Color Format Converter
Convert color between HEX, RGB, HSL, HSV, CMYK, and named CSS colors. Live swatch + WCAG contrast ratio checker. Color picker. Copy any format. 100% offline.
About this tool
A complete color playground. Pick a color with the native color picker, drag the RGB sliders, or paste a HEX/RGB/HSL/HSV/CMYK string into any of the format inputs — all five other formats update in real time. The big swatch shows the current color and doubles as the picker target. The contrast section shows how readable the color is when used as text on white, on black, on the chosen color itself, and on the current theme surface — with the actual contrast ratio (WCAG 2.1 formula) and an AAA/AA/AALarge/FAIL badge on the better of white vs black. The named-CSS grid surfaces the 12 most common color names (red, orange, yellow, green, cyan, blue, purple, pink, black, white, gray, brown) for one-tap selection, and the input field below the swatch shows the closest named CSS color when one exists. All conversions are pure-JS, no external libs. Works fully offline.
Details
- Category
- developer
- Version
- 1.0.0
- Size
- 17 KB
- Updated
- Jun 2026
Frequently Asked Questions
What is the difference between HSL, HSV, and HSL/H?
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) both use a cylindrical color model but differ in the third axis. HSL's L=50% is the pure hue at full saturation; HSV's V=100% is the pure hue. HSL is what CSS uses (hsl() and hsla()), and it is what most designers think in. HSV is what most color pickers and image editing software show. HSL is the standard for code; HSV is the standard for visual picking. The tool shows both so you can copy whichever your toolchain wants.
What is CMYK and when do I use it?
CMYK (Cyan, Magenta, Yellow, Key/black) is the subtractive color model used in print. RGB is additive (light) and is what screens emit; CMYK is subtractive (ink) and is what paper absorbs. The conversion from RGB to CMYK is approximate — the actual printed color depends on the printer profile, paper, and ink. The numbers shown are the standard formula; for production print work, use a profile-aware tool like Adobe Illustrator. Use the tool's CMYK field when you need an approximate print spec.
What is the WCAG contrast ratio and why does it matter?
WCAG 2.1 defines a contrast ratio formula (L1 + 0.05) / (L2 + 0.05) where L is the relative luminance. The thresholds are 4.5:1 for AA body text, 3:1 for AA Large text (≥18pt or bold 14pt+), and 7:1 for AAA. The tool shows the ratio vs white and vs black, and a single badge for the best of the two. Aim for AA at minimum for body text; AAA is preferred for accessibility-critical interfaces. The badge is the easier-to-scan summary; the ratio number is for exact reporting.
Why are some color names not in the named list?
The grid surfaces the 12 most useful color families for quick picking. The full 147-color CSS named set is available by pasting a name into any input field — "rebeccapurple", "papayawhip", "dodgerblue" all work. The inline input under the swatch also shows the closest named match when one exists; the matching is exact on the 6-digit hex, so "#FF0000" → red, "#000080" → navy, "#FFD700" → gold.
Is my data private?
Yes. All color math runs in the browser. The named-color table and contrast formula are pure JS inlined in the HTML. There are no network calls and no CDN. The picker is the native browser input type=color. You can experiment with brand colors or accessibility checks for sensitive client work without anything leaving your device.
