How to use Color Converter
- 1Pick a colour or type a HEX, rgb(), hsl() or CSS colour name
- 2Check the preview swatch
- 3Copy the format you need
- 4Check the contrast ratings for text on white and black
What Color Converter does
Screens mix colour from red, green and blue light, and every digital colour format is a different way of writing the same three numbers. HEX packs them into six hexadecimal digits for CSS and design tools. RGB lists them as 0–255 values. HSL and HSV describe the same colour as hue, saturation and lightness or brightness, which is far easier to adjust by hand.
CMYK is different in kind: it describes ink on paper rather than light, so the figures here are a straightforward mathematical conversion. They are a good starting point for print, but a printer's colour profile will adjust them. Contrast is included because a colour that looks fine on its own can be unreadable as text.
When to use it
- Moving colours between tools
- Figma shows HEX, a CSS file wants hsl() and a slide template wants RGB values. Paste in whichever you have and copy out the one the next tool expects.
- Checking accessible text colours
- WCAG asks for a contrast ratio of at least 4.5:1 for body text. The two preview panels show instantly whether a brand colour works as text on white or black backgrounds.
- Building a palette
- Convert a brand colour to HSL, then change only the lightness to create lighter and darker shades that still look related.
Color Converter settings explained
- Pick
- Your system's colour picker, including the eyedropper where the browser supports it.
- Type any colour
- HEX with or without #, in 3, 4, 6 or 8 digits; rgb() and rgba(); hsl() and hsla(); or any colour name or format your browser understands, such as tomato or rebeccapurple.
- HEX, RGB and HSL
- Ready-to-paste CSS values. When the colour has transparency, the alpha channel is included in all three.
- HSV / HSB and CMYK
- HSV is the model used by Photoshop's picker; CMYK is the naive ink conversion without a colour profile.
- Contrast
- The WCAG 2 contrast ratio of the colour against pure white and pure black, graded AAA (7:1), AA (4.5:1), AA large text (3:1) or fail.
Colour formats at a glance
| Format | Example | Used for |
|---|---|---|
| HEX | #7c3aed | CSS, design tools, brand guidelines |
| RGB | rgb(124, 58, 237) | CSS, Office, video software |
| HSL | hsl(262, 83%, 58%) | CSS themes and shade scales |
| HSV / HSB | 262°, 76%, 93% | Photoshop and paint programs |
| CMYK | 48%, 76%, 0%, 7% | Print artwork, as a starting point |
Limits and what to expect
- CMYK values are not colour-managed; ask your printer for the profile they use for accurate print colour.
- Wide-gamut colours such as display-p3 are converted to the nearest sRGB values.
- Contrast is checked against pure white and black only, not an arbitrary background colour.
Troubleshooting
- It says the colour isn't recognised
- Check for typos, missing commas in rgb() written the old way, or a HEX code with 5 or 7 digits. Valid HEX codes have 3, 4, 6 or 8 digits.
- The printed colour doesn't match the screen
- Screens emit light and paper reflects it, and printers use colour profiles. Use the CMYK figures as a starting point and request a proof from your printer.
- A HEX code converts back slightly differently
- HSL and HSV values are rounded to whole numbers for readability, so converting them back can move a channel by one step. Copy the HEX or RGB value when exactness matters.
Your files and your privacy
Colour conversion runs entirely in your browser. Nothing you pick or type is uploaded, stored or tracked.
What to use next
FAQ
How do I convert HEX to RGB?
Split the six digits into three pairs and read each pair as a hexadecimal number. #7c3aed becomes 7c, 3a and ed, which are 124, 58 and 237.
What is the difference between HSL and HSV?
Both use hue and saturation. HSL's lightness runs from black through the pure colour to white, while HSV's value runs from black to the pure colour. CSS uses HSL; many paint programs use HSV.
What contrast ratio do I need for accessible text?
WCAG 2 level AA asks for 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). Level AAA asks for 7:1.
Can I use colour names like 'teal'?
Yes. Any of the 148 CSS named colours works, as do other CSS colour formats your browser supports.
Is the CMYK conversion print-ready?
It is mathematically correct but not colour-managed. Professional print uses ICC profiles for a specific press and paper, so treat these values as an approximation.