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 |
Pick a colour, or paste any CSS notation: #f60, #ff6600,
rgb(255 102 0), hsl(24 100% 50%) or a name like
tomato. Every representation comes back at once, so there is no
direction to choose: HTML to RGB, RGB to HTML, hex to HTML and back are all the same
press.
HTML colour is not a third format. That trips more people up than anything else here, because "convert HTML to RGB" sounds like it should sit alongside hex and RGB as a notation of its own. It does not: an HTML colour code is the hex code, six hexadecimal digits after a hash, two each for red, green and blue. The name stuck because HTML carried them long before CSS existed. So there is nothing to convert between HTML and hex, and converting HTML to RGB means converting hex to RGB.
The one place the phrase means something else is the 140 named
colours, tomato, rebeccapurple and the rest, which
are also called HTML colour names and are the only part of this that is not just hex
in a different hat. Type one in and it resolves like anything else; the table gives
the nearest name back for any colour you paste.
Two jobs this page used to do have addresses of their own now, because each is a different question: the palette generator builds a matching set around a colour, and the contrast checker scores a pair against WCAG.
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
Is HTML color the same as hex?
Yes. An HTML color code is a hex code: a hash followed by six hexadecimal digits, two each for red, green and blue. There is no separate HTML notation to convert to or from, which is why this page shows every representation at once rather than asking which direction you want.
How do I convert an HTML color to RGB?
Paste it into the box. Because an HTML color is a hex code, this is hex to RGB: #FF6347 is rgb(255, 99, 71). Each pair of hex digits is one channel, 00 to FF, which is 0 to 255 in decimal. Going the other way works identically, since the page converts in every direction at once.
What are HTML color names?
The 140 keywords browsers accept in place of a code: red, tomato, steelblue, rebeccapurple and the rest. They are the only part of "HTML color" that is not hex under another name. Type one in and it resolves; paste any colour and the table gives you the nearest name, which is often close enough to use.
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 does the three-digit form mean?
Each digit is doubled: #f60 is exactly #ff6600. There are four- and eight-digit forms too, where the extra digits are alpha, so #f608 is #ff660088, about 53% opaque.
What about oklch and lab?
They are perceptually uniform spaces, and they solve a real problem with HSL: raising the lightness of an HSL colour visibly shifts its hue, so a ramp built that way drifts. In oklch it does not. This page converts the sRGB formats, which is what most codebases still store.
The contrast ratios you actually have to hit
WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05), where L is the
relative luminance of the lighter and darker colour. It runs from 1:1 for two
identical colours to 21:1 for black on white, and nothing can exceed that.
| What it is | AA | AAA |
|---|---|---|
| Body text, under 18pt | 4.5:1 | 7:1 |
| Large text, 18pt or 14pt bold and up | 3:1 | 4.5:1 |
| Icons, borders, form outlines, focus rings | 3:1 | 3:1 |
| Disabled controls and pure decoration | none | none |
| Logos | none | none |
Two traps catch most people. Placeholder text inside an input is real text and has to meet 4.5:1, however grey the design wants it. And a focus ring needs 3:1 against the background it sits on and against the component it outlines, which a single check against the page background will miss.
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. You can load this page once, go offline, and it still works.
This page makes no requests at all, to anywhere. That is not a promise in the copy: it is a Content-Security-Policy header your browser enforces, and connect-src on it is none. Open the network tab and watch nothing happen.