Colour Information
Everything about one colour: codes, name, shades, tints, palettes.
Runs entirely in your browser
Loading the tool…
- —Hue
- —Saturation
- —Lightness
- —Luminance
| Name | — |
|---|---|
| HEX | — |
| RGB | — |
| RGBA | — |
| HSL | — |
| HSV | — |
| CMYK | — |
| On white | — |
| On black | — |
Shades toward black
Tints toward white
Harmonies
A single-colour deep dive: every code format, the nearest CSS colour name, relative luminance, whether white or black text sits better on it, and full nine-step shade and tint ramps ready to paste into a design token file.
The nearest-name search uses a weighted RGB distance that tracks human perception
better than plain Euclidean distance, so #ff6348 comes back as
tomato, not something numerically closer but visibly wrong.
How to use it
- Enter a colour in any format, or pick one.
- Browse the conversions, the ramps and the harmony palettes.
- Click any swatch to copy its hex code.
Questions
What is relative luminance?
The perceived brightness of a colour after gamma correction, from 0 for black to 1 for white. It is what the WCAG contrast formula is built on, and why pure yellow reads as far brighter than pure blue.
How many named CSS colours are there?
148, including duplicates like gray/grey and aqua/cyan. All of them are searchable here, and any colour resolves to its nearest name.
What is the difference between a shade and a tint?
A shade mixes the colour toward black; a tint mixes it toward white. Both keep the hue, which is what makes them useful as a UI colour scale.
Why is #808080 not the middle grey?
Because sRGB is gamma-encoded, not linear. #808080 sits halfway along the numbers, but its relative luminance is about 0.216, not 0.5. The colour that actually reflects half of white's light is close to #bcbcbc. This is why a design that looks balanced by hex values often looks too dark on screen.
What is rebeccapurple?
#663399, and the only CSS colour keyword named after a person. Rebecca Meyer, daughter of the CSS author Eric Meyer, died of brain cancer on her sixth birthday in 2014; purple was her colour, and the working group added the name within weeks.
Why does the same hex code look different on two screens?
A hex code carries no colour space with it. Browsers interpret a plain hex as sRGB, but a wide-gamut display may stretch it toward its own primaries, and an uncalibrated panel shifts it again. For anything where the exact colour matters, tag the colour space explicitly with color(display-p3 ...) or oklch().
Can I use the shade and tint ramps as design tokens?
That is what the nine steps are for. Map them onto the usual 100 to 900 scale and you have a full ramp from one brand colour. Check the contrast of any step you plan to put text on, because a ramp built by mixing toward black and white is even in numbers but not in perceived lightness.
Where the 148 named colours came from
The keyword list is an accident of history rather than a design. HTML 4.01 standardised sixteen names, picked to match the VGA palette every display of the day could show:
| Name | Hex | Name | Hex |
|---|---|---|---|
black | #000000 | maroon | #800000 |
silver | #c0c0c0 | red | #ff0000 |
gray | #808080 | purple | #800080 |
white | #ffffff | fuchsia | #ff00ff |
green | #008000 | navy | #000080 |
lime | #00ff00 | blue | #0000ff |
olive | #808000 | teal | #008080 |
yellow | #ffff00 | aqua | #00ffff |
Note that green is not #00ff00. That one is
lime, which surprises people writing CSS by hand for the first time.
Everything above sixteen came from the X11 window system, whose colour file had
accumulated names for decades of workstation defaults. CSS Color 3 adopted the
whole thing, duplicates and all, which is why seven greys are spelled both ways
(gray and grey, darkgray and
darkgrey, and so on down to lightslategray), and why
aqua and cyan are the same colour under two names, as are
fuchsia and magenta. That list ran to 147.
The 148th is rebeccapurple, #663399, added in 2014 in
memory of Rebecca Meyer, the daughter of the CSS author Eric Meyer, who died of
brain cancer on her sixth birthday. It is the only keyword added since, and the only
one that commemorates a person.
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.