One colour in every format an authoring tool, a brand guide or a stylesheet might ask for, all on screen at once. It also shows the contrast against white and black, which is the fastest way to know whether a colour can carry text at all.
Free · No account · Your files never upload
| Hex | |
| Hex, lowercase | |
| RGB | |
| RGB values | |
| HSL | |
| HSV / HSB | |
| CSS variable |
Those two ratios are the quickest way to know whether a colour can carry text at all. Under 4.5 against both means it works as a background or a graphic, but not as body copy on either.
One colour, shown at once as hex, hex in lower case, an rgb() string, bare RGB values, HSL, HSV and a ready-made CSS variable. Click any of them to copy.
Storyline wants hex. A brand guide quotes RGB. A designer works in HSL because that is where lightness lives. The conversion is trivial arithmetic; the annoying part is looking it up, so nothing is hidden behind a dropdown.
Contrast against white and against black is shown as well. That pair tells you almost everything about how a colour can be used: below 4.5 against both means it works as a background or a graphic but cannot carry body copy on either, which is a thing worth knowing before you build a screen around it.
It handles opaque colours. An eight-digit hex is accepted and the alpha is dropped, because contrast against a partly transparent colour depends entirely on what sits behind it, and guessing would be worse than not answering.