How to use
- Enter a color —
- Copy the format you need from the list.
- Set a background color to check the contrast ratio and WCAG AA/AAA results.
- Click a shade in the scale to use it.
Options explained
- HEX / RGB
- Screen colors as red, green and blue from 0–255. #rrggbbaa and rgb(… / 50%) add transparency.
- HSL / HSV
- Hue, saturation and lightness (or value). Handy for making a color lighter or darker by hand.
- OKLCH
- A perceptual color space in CSS Color 4. Changing lightness keeps the hue and perceived colorfulness steady, which makes it ideal for palettes and dark themes.
- CMYK
- A simple conversion for reference only. Real print colors depend on the printer's color profile, so ask your printer for exact values.
- Contrast ratio
- WCAG 2.2 requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) at level AA; 7:1 and 4.5:1 at AAA.
Example
#0f766e is rgb(15 118 110), hsl(175 77% 26%) and oklch(51.1% 0.086 186.4). On a white background its contrast ratio is about 5.5:1, which passes WCAG AA for all text sizes.
Common colours in every format
CSS named colours and their values. CMYK here is a simple mathematical conversion; for professional printing, use the CMYK values from your printer’s colour profile.
| CSS name | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Which format to use
HEX is the shortest way to write a colour in CSS and design tools: two hex digits each for red, green and blue.
RGB is the same information in decimal, and rgb(255 0 0 / 50%) adds transparency.
HSL describes hue, saturation and lightness, which makes it easy to build lighter or darker shades of the same colour by changing only the last number.
OKLCH is a newer CSS format where equal steps in lightness look equally different to the eye — useful for accessible colour palettes.
Frequently asked questions
What is a good contrast ratio for text?
At least 4.5:1 for body text (WCAG AA). Pure black on white is 21:1; the common #767676 grey on white is 4.54:1, just passing.
Why does the CMYK value differ from Photoshop?
Photoshop converts through an ICC color profile for a specific press and paper. This tool uses the plain mathematical formula, which is fine for estimates but not for print proofs.
What is the difference between HSL and OKLCH?
HSL is a simple rearrangement of RGB, so a yellow and a blue with the same lightness look very different in brightness. OKLCH is designed so that equal lightness looks equally bright to the eye.
Can I use OKLCH in CSS today?
Yes. oklch() works in all current major browsers.
Privacy
This tool runs entirely in your browser. Your files and text are processed on your device and are never uploaded to our servers.