HEX, RGB, HSL and OKLCH: one colour, four notations
Every colour on a screen is a mix of red, green and blue light, but there are several ways to write that mix down. Designers hand over HEX codes, CSS needs rgb() or hsl(), and modern design systems increasingly define their palettes in OKLCH. Converting between them by hand is error-prone.
This converter keeps all four notations in sync. Edit any one of them and the other three update at once, with a live swatch so you can see the colour you are describing.
How to use it
- Start from whatever you have: a HEX code such as #0d9488, an rgb() value, an hsl() value or an oklch() value.
- Type it into its field. The other fields and the swatch follow as you type.
- Adjust in the notation that suits the change. HSL and OKLCH make it easy to make a colour lighter or more muted without shifting its hue.
- Copy the notation your code or design tool expects.
Example: a teal accent colour
#0d9488
rgb(13, 148, 136) hsl(175, 84%, 32%) oklch(60.02% 0.104 184.7)
All four describe exactly the same colour. Each pair of HEX digits is one channel in base 16: 0d is 13, 94 is 148 and 88 is 136.
What each notation is good for
HEX and RGB both list the red, green and blue channels from 0 to 255; HEX is simply shorter. They are what design tools export and what every browser understands, but they say little about how the colour looks.
HSL describes hue as an angle on the colour wheel, saturation and lightness. It is easier to reason about than RGB, but its lightness is not what people perceive: yellow and blue at 50% lightness look very different in brightness.
OKLCH fixes that. Its L is perceptual lightness, C is chroma (how colourful) and H is hue. Two colours with the same L look equally bright, which makes it the best choice for building colour scales and for keeping text contrast predictable across a palette. All current major browsers support oklch() in CSS.
Out-of-gamut colours
OKLCH can describe colours that a standard sRGB screen cannot show, especially at high chroma. When you type such a value, this tool converts it to the nearest sRGB values by clamping each channel to the 0–255 range, so the HEX and RGB results may look slightly less vivid than the OKLCH value you entered.
Questions
What is a three-digit HEX code?
A shorthand where each digit is doubled: #0d8 means #00dd88. The tool accepts both forms.
Why does converting back and forth change the last digit?
RGB channels are whole numbers, while HSL and OKLCH are rounded for display. A round trip can shift a channel by one step, which is invisible on screen.
Can I use OKLCH in production CSS?
Yes, in current Chrome, Edge, Firefox and Safari. If you must support much older browsers, ship the HEX value as a fallback declaration before the oklch() line.