Colour converter
Convert a colour between HEX, RGB, HSL, HWB, OKLCH, OKLab and CMYK, with tints, shades and the nearest CSS name.
How to use
Type a colour in any CSS notation, or pick it with the colour picker, and the same colour appears in every format, each with its own copy button. The tool reads #hex with 3, 4, 6 or 8 digits, rgb(), hsl(), hwb(), oklch(), oklab() and the 148 CSS colour names, with or without transparency.
HEX and RGB write the same three channels from 0 to 255, in base 16 or base 10. HSL and HWB describe the same sRGB colours by hue, with saturation and lightness or with white and black. OKLCH and OKLab, defined in CSS Color Module Level 4, are built so that equal steps look roughly equal to the eye: an OKLCH lightness of 50% looks half as light whatever the hue, which HSL does not do.
OKLCH and OKLab can also describe colours that screens in sRGB cannot show. Such a colour is brought to the nearest sRGB values, and the result says so. CMYK uses the plain formula from RGB without a colour profile; printers convert with their own profile, so treat it only as a starting point.
Below the formats are the nearest CSS colour name, measured by distance in OKLab (CSS Color 4 takes 0.02 as the smallest difference people notice), and five tints and five shades: the colour mixed with white or black in sRGB, as CSS color-mix(in srgb, …) does. Click one to copy it. Everything runs in your browser.
Example
#4169e2 is one step away from royalblue (#4169e1): their difference, 0.002, is far below 0.02, the smallest difference people notice.
#1a73e8rgb(26 115 232), hsl(214.1 81.7% 50.6%) and oklch(57.37% 0.1946 257.86).#4169e2Nearest name royalblue (#4169e1), at a distance of 0.002, below 0.02.oklch(70% 0.4 150)Too saturated for sRGB: shown as #00d600, the nearest colour a screen can display.rgb(26 115 232 / 50%)#1a73e880: the last two digits hold the opacity, 80 in hexadecimal, 128 of 255.
Frequently asked questions
What is the difference between HSL and OKLCH?
Both use hue, but HSL lightness is not what the eye sees: hsl(60 100% 50%) is yellow and hsl(240 100% 50%) is blue, both at 50%, yet in OKLCH yellow has a lightness of 96.8% and blue 45.2%. OKLCH keeps the perceived lightness when the hue changes, which makes it better for building colour scales.
Why is the CMYK different from what my print shop uses?
Printing depends on paper, inks and the press, which a colour profile describes. This tool uses the formula without a profile, so print shops will convert from RGB with their own settings.
What do 8-digit hex codes mean?
The last two digits are the opacity: ff is fully opaque and 00 fully transparent. #1a73e880 is the colour #1a73e8 at about 50%.
Is rgb(26, 115, 232) the same as rgb(26 115 232)?
Yes. The comma form is the older CSS syntax; the form with spaces comes from CSS Color 4 and writes transparency after a slash, as in rgb(26 115 232 / 50%). Browsers accept both.
Is my colour sent anywhere?
No. The conversion runs in your browser.