Tools
Colour converter
Convert a colour between HEX, RGB, HSL, OKLCH, LAB, LCH and OKLAB instantly.
#3b82f659, 130, 2460.2314, 0.5098, 0.9647217, 91%, 60%54.5 8.5 -65.554.5 66.0 277.50.64 -0.01 -0.150.64 0.15 264About this tool
This converter shows one colour in eight notations at once: HEX, RGB, decimal RGB, HSL, LAB, LCH, OKLAB and OKLCH. It helps when a brand guide gives you a hex code but your stylesheet uses OKLCH, when a graphics library wants values between 0 and 1, or when you want to compare colours in a perceptual space such as LAB before tuning a palette.
Choose the starting notation in the “Format” menu and type the colour into “Value”. The “All formats” table updates as you type, and every row has its own copy button. You can also click the swatch on the left and pick a shade with your system colour picker. Switching format rewrites the current value in the new notation, so you can carry on from there.
Everything is calculated in your browser with JavaScript; nothing is sent to a server. It works in sRGB with a D65 white point and rounds to 8 bits per channel, so out-of-gamut colours are clipped to the nearest one. It does not handle transparency (alpha) or three-digit shorthand hex: type all six digits.
Frequently asked questions
What is the difference between HSL and OKLCH?
Both describe colour by lightness, saturation or chroma, and hue, but OKLCH is designed so that perceived lightness is uniform. Two colours with the same L in OKLCH look equally light; in HSL that is often not the case.
What is decimal RGB used for?
It is the same RGB expressed from 0 to 1 instead of 0 to 255. Many 3D engines, shaders and graphics libraries such as Three.js or Unity expect it.
Why does a value change slightly after a round trip?
Each conversion rounds to 8 bits per channel (0–255). Going through spaces such as LAB or OKLCH and back can introduce a one-step difference you will not see by eye.
Can I paste the values straight into CSS?
Yes: hex, rgb(), hsl(), lab(), lch(), oklab() and oklch() are all understood by current browsers. Check compatibility if you need to support older ones.