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.
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.