Index / Developer
Hex and RGB Converter
Paste a colour in any notation a browser accepts and get every other notation back, in both directions. The channel boxes and the paste box drive each other, so either end is the input.
Colour in
Hex with 3, 4, 6 or 8 digits, with or without the
hash;
rgb(), rgba(), hsl(),
hsla() in either the comma or the space form; or one
of the 148 CSS colour names.
The native picker has no alpha channel, so
picking here leaves the alpha box alone.
Channels
0 to 1, or a percentage. Alpha is carried through
to the notations that have one and ignored by the rest.
Hex
--
rgb
--
hsl
--
The same colour, written every way
Contrast
WCAG 2.2 ratios
What the conversions assume
Every value on this page is plain sRGB. Hex, rgb(), hsl() and HSB
are four ways of writing the same three numbers, so converting between
them is arithmetic with no colour management in it and no profile
involved. Round-tripping hex to HSL and back returns the byte you
started with.
HSL and HSB are not the same thing. HSL's lightness is 100% at white; HSB's brightness is 100% at the most saturated version of the hue. Photoshop's picker is HSB, CSS is HSL, and reading one as the other is the usual reason a colour comes out wrong.
The CMYK row is the naive conversion — K from the largest channel, then C, M and Y from what is left. It is what a design tool shows you before you assign a profile, and it is not what a printer will produce. A real conversion needs an ICC profile for the specific paper and press, which this page has no way to hold.
Contrast uses the WCAG 2.2 formula: each channel is divided by 255, linearised with the sRGB transfer curve, weighted 0.2126 / 0.7152 / 0.0722 for the relative luminance, and the ratio is (Llighter + 0.05) ÷ (Ldarker + 0.05). It runs from 1 to 21. AA wants 4.5 for body text and 3 for text at 18.66px bold or 24px; AAA wants 7 and 4.5.
Contrast ignores alpha, because a translucent colour has no luminance until you know what is behind it. The ratios here are for the colour at full opacity.
The nearest colour name is measured as straight-line distance in RGB, which is not how eyes work — two colours the same distance apart can look very different. It is shown because it is the number people expect, and the exact-match line above it is the one to trust.
HSL and HSB are not the same thing. HSL's lightness is 100% at white; HSB's brightness is 100% at the most saturated version of the hue. Photoshop's picker is HSB, CSS is HSL, and reading one as the other is the usual reason a colour comes out wrong.
The CMYK row is the naive conversion — K from the largest channel, then C, M and Y from what is left. It is what a design tool shows you before you assign a profile, and it is not what a printer will produce. A real conversion needs an ICC profile for the specific paper and press, which this page has no way to hold.
Contrast uses the WCAG 2.2 formula: each channel is divided by 255, linearised with the sRGB transfer curve, weighted 0.2126 / 0.7152 / 0.0722 for the relative luminance, and the ratio is (Llighter + 0.05) ÷ (Ldarker + 0.05). It runs from 1 to 21. AA wants 4.5 for body text and 3 for text at 18.66px bold or 24px; AAA wants 7 and 4.5.
Contrast ignores alpha, because a translucent colour has no luminance until you know what is behind it. The ratios here are for the colour at full opacity.
The nearest colour name is measured as straight-line distance in RGB, which is not how eyes work — two colours the same distance apart can look very different. It is shown because it is the number people expect, and the exact-match line above it is the one to trust.