What each color format is good for
HEX and modern rgb() notation both encode red, green, and blue channels in the sRGB color space. HEX is compact and common in design handoffs; rgb() is convenient when writing CSS or adding an alpha channel. Converting between them does not change the underlying color.
HSL rearranges an sRGB color into hue, saturation, and lightness. It is intuitive for rotating a hue or making rough variations, but equal HSL lightness does not mean equal perceived brightness. Yellow can look much brighter than blue even when their HSL lightness numbers match.
OKLCH is designed around perceptual lightness, chroma, and hue. It is often better for systematic UI ramps and predictable lightness changes. Browser and gamut support still matter: a very high-chroma OKLCH color may fall outside a display’s available colors.
CMYK has no single device-independent conversion from HEX. The displayed result is a basic formula, not a press-ready separation. Real printing depends on the selected ICC profile, ink limit, paper, press, and rendering intent; ask the printer for the correct profile and proof.
How to use the color converter
- Paste the HEX value from your design tool or stylesheet.
- Copy RGB or HSL for broadly compatible CSS and OKLCH when building perceptual color scales.
- Preserve the original HEX in design documentation so collaborators have a stable reference.
- For print, treat the CMYK row as orientation only and convert in a color-managed application using the printer’s profile.
The same color in different formats
| Situation or input | Result or choice | Why it matters |
|---|---|---|
| #336699 | rgb(51 102 153) | Direct base-16 to base-10 representation of the same sRGB channels. |
| #336699 | hsl(210 50% 40%) | Useful when you need to understand or rotate the blue hue. |
| #336699 | OKLCH lightness near 50% | Perceptual coordinates are useful for building a more even lightness scale. |
Practical tips for a better result
- Use the original source value rather than sampling a screenshot whenever possible.
- Keep enough decimal precision in OKLCH during calculation; round mainly for display and handoff.
- Check high-chroma OKLCH values on the target browsers and displays for gamut clipping.
- Add alpha separately when needed; this tool intentionally compares opaque colors.
What this tool cannot know
A useful result includes knowing the limits of the calculation.
- The converter accepts HEX input and assumes sRGB.
- CMYK output is an unprofiled approximation and is not production artwork.
- Values may be rounded for readable display, so repeated conversions can differ by a tiny amount.
Frequently asked questions
Are HEX and RGB different colors?
Not when they encode the same sRGB channels. #336699 and rgb(51 102 153) are two notations for the same color.
Why include OKLCH?
OKLCH separates perceptual lightness, chroma, and hue more evenly than HSL, which makes it useful for accessible ramps and controlled variations.
Can I send the CMYK result directly to a printer?
No. It is a generic approximation. Use the printer’s ICC profile in a color-managed application and approve a proof for production work.