Color Converter
Loading tool…
Design tools, CSS, and native apps do not share one color syntax. Pick a color or type a hex value and read the same color as RGB, HSL, HSV, CMYK, and HWB. Hex is the source of the conversion, so out-of-gamut print colors are approximated.
How to use the Color Converter
- Set the color. Use the picker or edit the hex field, including the leading #. Shorthand such as #fff is expanded.
- Copy the format you need. CSS usually wants hex, rgb(), or hsl(). Some design docs ask for HSB, which is the HSV row.
- Check contrast separately. This page does not compute WCAG contrast. Copy the RGB into a contrast checker before you ship text colors.
When it helps
- Design handoff. A Figma hex and a CSS hsl() can describe one brand color. Convert once and paste both into the ticket.
- Quick palette tweaks. HSL is easier to lighten than hex. Convert, change the lightness, and convert back.
Common questions
Why does CMYK not match my print proof?
The conversion is a simple mathematical mapping, not a press profile. Use your printer’s ICC profile for production color.
Can I paste rgb() as the input?
The control is hex-based. Convert rgb to hex first, or type the hex equivalent.
Does alpha survive?
The picker stores an opaque hex color. Add alpha in CSS yourself, for example rgb(0 0 0 / 50%).
Is the conversion done on a server?
No. The math runs in the browser from the hex value you entered.
Read the guide: Color Format Converter: Convert Between HEX, RGB, HSL, HSV, and CSS Color Names