HTML Color Codes
Pick a colour, get every code, check the contrast.
Runs entirely in your browser
Loading the tool…
| HEX | |
|---|---|
| HEX short | |
| RGB | |
| HSL | |
| HSV | |
| CMYK | |
| Nearest name |
Palette
Contrast
| Ratio | — |
|---|---|
| Body text (AA 4.5:1) | — |
| Body text (AAA 7:1) | — |
| Large text / UI (3:1) | — |
Pick a colour, or paste any CSS notation: #f60, #ff6600,
rgb(255 102 0), hsl(24 100% 50%) or a name like
tomato. You get every other representation back, plus harmony palettes
and the shade and tint ramps.
The contrast figures are the WCAG 2.1 ratios. Body text needs 4.5:1 to pass AA and 7:1 for AAA; large text and UI borders need 3:1. Those thresholds are legal requirements in a growing number of places, not style advice.
How to use it
- Use the picker, or type a colour in any CSS format.
- Copy the HEX, RGB, HSL, HSV or CMYK value you need.
- Generate a palette, or check the contrast against your background colour.
Questions
What is the difference between HSL and HSV?
Both describe a colour by hue, but HSL's lightness runs from black through the pure hue to white, while HSV's value runs from black to the pure hue only. HSL is friendlier for building light and dark variants of a brand colour.
Is CMYK here print-accurate?
No. This is the standard arithmetic conversion, which ignores paper, ink and colour profiles. For anything going to a press, get the values from a profile-aware tool.
What contrast ratio do I need?
4.5:1 for normal body text (WCAG AA), 3:1 for text at 18pt or 14pt bold and for interface components, and 7:1 for AAA.
Your data stays on your device
Everything above runs inside your browser as WebAssembly compiled from Rust. Nothing you type is uploaded, logged or stored on a server. There is no server. You can load this page once, go offline, and it still works.