Color converter
Any CSS colour in, every format out, with contrast and palette matches.
| HEX | #21dbaa | |
|---|---|---|
| RGB | rgb(33, 219, 170) | |
| HSL | hsl(164 74% 49%) | |
| HWB | hwb(164 13% 14%) | |
| OKLCH | oklch(79.4% 0.155 168.6) | |
| OKLAB | oklab(79.4% -0.152 0.031) | |
| CSS vars | 33, 219, 170 | |
| Integer | 2218922 | |
| SwiftUI | Color(red: 0.129, green: 0.859, blue: 0.667) | |
| Android | 0XFF21DBAA |
Contrast (WCAG)
- Sample1.78:1Failon white
- Sample11.78:1AAAon black
- Sample10.74:1AAAvs #0b0f19
Nearest Tailwind
Tints and shades
Complementary
Analogous
Triadic
Split
Tetradic
How to convert a colour
Enter a colour
Type or paste any CSS colour into the box, or click the small swatch on the left to open a colour picker. The field turns red when the value cannot be read.
Read the formats
Every format is listed in the table with its own copy button. On the right you get the contrast ratio against white, black and a second colour of your choice, plus the three closest Tailwind shades.
Explore the palette
Below the table are eleven tints and shades and five harmonies built from your colour. Click any swatch to make it the new input and carry on from there.
Good to know
- Ctrl+C (Cmd+C on a Mac) with nothing selected copies every format at once, one per line.
- Tints, shades and harmonies are worked out in OKLCH, so the lightness steps look even and rotated hues keep the same perceived brightness.
- The CSS vars row is the bare r, g, b triple for patterns such as rgb(var(--brand) / 0.5).
- The Android literal is 0xAARRGGBB with alpha first. Integer is the plain 24-bit RGB value with no alpha, as some APIs and older Android code expect.
- Named colours resolve through your browser, so anything CSS knows works, including newer names like rebeccapurple.
- Everything is computed in your browser. Nothing you paste is sent anywhere.
Questions people ask
Which colour formats can I type in?
Hex with 3, 4, 6 or 8 digits, rgb(), rgba(), hsl(), hsla(), hwb(), oklch(), oklab() and any CSS colour name such as teal or rebeccapurple. Both the modern space-separated syntax and the older comma syntax work, including a slash alpha like rgb(33 219 170 / 0.5).
How is the contrast ratio worked out?
It is the WCAG 2 formula based on relative luminance. 4.5:1 or more passes AA for normal text, 3:1 passes for large text and UI parts, and 7:1 passes AAA. The ratio is shown against white, against black and against the second colour you type.
What does Nearest Tailwind mean?
The three shades in the default Tailwind CSS palette that sit closest to your colour, measured in OKLAB so the distance matches what the eye sees. Click a swatch to load that shade as the input.
Does it handle transparency?
Yes. Alpha from an 8-digit hex or a slash value is kept: it appears as 8-digit hex, as a slash alpha in the rgb, hsl, hwb, oklch and oklab rows, and as the leading byte of the Android literal. The SwiftUI and Integer rows drop it, and the contrast ratio treats the colour as opaque.
Why does my OKLCH colour come back slightly different?
OKLCH can describe colours that sRGB cannot show. Channels that fall outside sRGB are clamped, so a very saturated oklch() value maps to the nearest hex the screen can display.