Convert HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK — live preview, palettes, contrast checker & harmony generator.
HEX (
#RRGGBB
) is the most widely used format in web design. RGB (
rgb(R, G, B)
) expresses each channel as a 0–255 integer. Both describe colour in the sRGB colour space used by screens.
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are human-intuitive models. Rotating the hue generates harmonious palettes. HSL is natively supported in CSS via
hsl()
and
oklch()
.
CMYK is the subtractive model used in print (Cyan, Magenta, Yellow, Key/Black). WCAG contrast ratios (AA ≥ 4.5:1, AAA ≥ 7:1) ensure text is readable for users with low vision or colour blindness.
For a design system or any project where you'll create color variations, HSL stored as CSS custom properties is genuinely the best choice. The reason is practical: darkening a button on hover is hsl(var(--hue) var(--sat) calc(var(--l) - 8%)). With hex, you'd need to hardcode the hover color separately. The tradeoff: HSL's "lightness" isn't perceptually uniform — at the same L value, yellow looks much lighter than blue. For accessible color scales, oklch is more reliable because its L channel matches human perception. For a small project with a handful of fixed colors, hex is completely fine and easier to read in code review.
| Format | Use it when… | Skip it when… |
|---|---|---|
HEX (#RRGGBB) | Fixed, non-programmatic colors. Sharing colors in specs, tickets, Slack. Any context that expects a string (SVG fill, legacy APIs). | You need to manipulate individual channels in CSS. Opacity requires a separate rgba() conversion. |
| RGB / RGBA | You need alpha transparency. You're computing colors in JavaScript and need integer channel values. | Pure CSS theming — hsl is more legible. Arbitrary rgb values are harder to reason about than hsl. |
| HSL / HSLA | Design tokens in CSS. Any situation where you'll generate tints, shades, or hover states programmatically. | High-accuracy print or gamut-critical work. HSL's perceptual non-uniformity is a problem for precise accessible color scales. |
| oklch | New projects on modern browsers. Generating color scales where equal L steps should look equally different. P3 wide-gamut colors. | You need to support Safari <15.4 or any legacy browser. Also: most third-party libraries (D3, Chart.js) don't parse oklch yet. |
| CMYK | Handing off to print production — but only as a reference, not as a CSS value. CSS doesn't support CMYK. | Any CSS or web context. Always convert to RGB/HEX for the browser; pass CMYK to your print workflow separately. |
A color with HSV saturation 100% and HSL saturation 100% are different colors unless both have a Value/Lightness of 50%. Figma shows HSV (or HSB). CSS uses HSL. If you copy the S value from Figma's color picker into a CSS hsl() declaration, you'll get the wrong color. Either use this tool to convert properly, or copy the hex value from Figma and convert that.
The formula-based RGB-to-CMYK conversion is mathematically correct for the sRGB-to-generic-CMYK conversion, but it doesn't account for ink profiles, paper type, dot gain, or the specific color gamut of a given press. For professional print, always use your design software's built-in ICC profile conversion (Illustrator, InDesign, Photoshop). The CMYK values here are useful for communicating intent to a printer or getting ballpark ink percentages, not for production color management.
In oklch, C (chroma/saturation) doesn't have a universal maximum like HSL's 0–100%. The maximum chroma depends on the hue and lightness — some color combinations support C values up to 0.4 or higher; others clip below 0.2. If you set a very high chroma and the color looks unexpectedly muted, the browser is likely gamut-mapping it back into sRGB range.
In Chrome and Edge DevTools, click the small colored square next to any color value in the Styles panel. This opens the color picker. Click the hex/rgb label at the top of the picker to cycle through HEX, RGB, HSL, and (in recent Chrome) oklch representations of the exact same color — no copy-paste to a converter needed. Firefox DevTools has a similar feature in its color picker.
#6F42C1 has a hue of about 270°, which puts it in the blue-to-magenta range. If the hue looks completely unexpected (e.g., a clearly blue color showing as hue 30°), check whether you're looking at HSL or HSV — they share the hue definition, so if the hue is different between tools, it's usually the saturation model that's creating confusion about which color space you're in.hsl(var(--h), var(--s), var(--l)), doesn't work with CSS variables because the commas are part of the var() value. The modern space-separated syntax, hsl(var(--h) var(--s) var(--l)), does work. Both syntaxes are valid in browsers without variables, but only the space-separated version accepts variables correctly. This is one of the more common "why isn't my CSS variable working in a color?" bugs.