Colour converter

1. Leave “HEX” selected in the “Format” drop-down; it is the one shown when the page opens.
2. Type or paste the colour into “Value” with all six digits, with or without the hash: #3b82f6, 3b82f6 and #3B82F6 all work.
3. Look at the “All formats” table: the “RGB” row shows rgb(59, 130, 246). The table updates with every key you press.
4. Press the copy icon on the row you need to take the value exactly as shown, ready to paste into your stylesheet or design app.

Eight, for both input and output: HEX, RGB, “Decimal RGB”, HSL, LAB, LCH, OKLAB and OKLCH. Under the table, “Format examples” shows how to write each one.

For the three-number formats, just type them in order, separated by commas or spaces; the function name and brackets (rgb(…), hsl(…)) are optional. In HSL the % sign is optional, and in LAB and OKLAB the a and b values can be negative. Use a point as the decimal separator: 0.5, not 0,5.

If the value cannot be read, the table is replaced by the message “Enter a valid colour value to see the conversions”. The usual cause is a three-digit HEX (#fff) or one with transparency (#ffffff80): write it with six digits.

You can also click the colour swatch on the left to open your system colour picker. When you choose a colour, the “Format” switches to HEX and the table recalculates.

All three describe the same sRGB colour with three channels: red, green and blue. RGB gives each channel from 0 to 255 in base 10; HEX writes those same numbers in base 16, with two digits per channel (00 to ff). So rgb(59, 130, 246) is #3b82f6: 3b is 59, 82 is 130 and f6 is 246.

“Decimal RGB” divides each channel by 255 and gives a number from 0 to 1 with four decimal places: rgb(0.2314, 0.5098, 0.9647) for the same example. It is the form many 3D engines, shaders and graphics libraries ask for. It is not CSS syntax: in a stylesheet, use normal RGB.

HSL describes the same colour with hue (0 to 360 degrees), saturation and lightness as percentages. It is handier for lightening or darkening a colour by hand: just change the last number.

They are colour spaces designed to be closer to how we perceive colour: the same change in L looks like a similar change in lightness for any hue. LCH and OKLCH express the same as LAB and OKLAB, but as lightness, chroma (intensity) and hue, which is easier to adjust.

The tool works in sRGB with the D65 illuminant and rounds each channel to a whole number from 0 to 255. If you enter a LAB or OKLCH value outside what sRGB can show, the colour is clipped to the nearest one and the values change on the way back. For the same reason, a round trip between formats can shift a decimal or two.

Apart from “Decimal RGB”, the rows in the table follow CSS syntax: lab() and lch() with L from 0 to 100, and oklab() and oklch() with L from 0 to 1.