Universal Color Converter
Convert any colour to every format at once: HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab, OKLCH, XYZ and Display P3. Paste any CSS colour and copy the result.
How to Use
- Type or paste a colour in any CSS format — #3B82F6, rgb(), hsl(), hwb(), lab(), lch(), oklch(), cmyk(), or a name like teal — or use the picker. The format is detected for you.
- Every format updates at once. Choose a Focus format to bring the one you need to the top.
- Switch to Precise for extra decimal places, for example when moving colours between design tools.
- Click any value to copy it. The tint strip and complement load related colours with one click.
- For the theory behind these spaces, read Color Spaces Explained.
Worked Example
Convert #3B82F6.
RGB: 3B = 3 × 16 + 11 = 59, 82 = 8 × 16 + 2 = 130, F6 = 15 × 16 + 6 = 246, so rgb(59, 130, 246).
HSL: as fractions of 255 the channels are 0.231, 0.510 and 0.965. Lightness is the average of the largest and smallest, (0.965 + 0.231) ÷ 2 = 59.8%. Saturation is their difference divided by (2 − their sum): 0.733 ÷ 0.804 = 91.2%. Blue is the largest, so hue = 60 × ((R − G) ÷ 0.733 + 4) = 217.2°. Result: hsl(217, 91%, 60%).
OKLCH first undoes the screen’s gamma (59 becomes 0.044 of full light, 246 becomes 0.922), then applies Ottosson’s matrices and cube roots: oklch(62.31% 0.188 259.81) — lightness 62%, a strong chroma, hue in the blues.
Show Work
Formulas
Why So Many Colour Formats
CIE XYZ (1931) defined colour from measurements of human vision, and every other space here is built on it. CIELAB (1976) rearranged it so distances roughly match perceived differences. RGB and HEX describe what a screen emits; sRGB, defined by HP and Microsoft in 1996, became the web’s standard. HSL and HSV, from Alvy Ray Smith’s 1978 work, rearrange RGB into hue, saturation and lightness so people could choose colours more easily. CMYK describes the four inks of colour printing.
CSS Color Level 4 added lab(), lch(), oklab() and oklch() — OKLab being Björn Ottosson’s 2020 improvement on CIELAB — and color(display-p3 …) for the wider gamut of modern phones and laptops.
About This Tool
This tool reads any CSS colour plus HSV and CMYK, detects the format, and converts it to twelve formats at once using the CSS Color 4 definitions: Lab and LCH on a D50 white point, OKLab and OKLCH from Ottosson’s matrices, XYZ relative to D65, and Display P3. Colours outside sRGB are flagged and mapped to the nearest displayable colour for the sRGB formats.
Values can be rounded or precise, the focus format is pulled to the top, and a tint strip and complement load related colours. Everything runs in your browser.
Related tools: Color Picker, Contrast Checker, and CSS Color Names.
Frequently Asked Questions
How do I convert HEX to RGB?
Split the six digits into three pairs and read each as a base-16 number: #3B82F6 is 3B, 82, F6, which are 3×16 + 11 = 59, 8×16 + 2 = 130 and 15×16 + 6 = 246, so rgb(59, 130, 246). Going back, write each number as two hex digits. Three-digit hex such as #39F doubles each digit: #3399FF.
Which formats can I paste?
Any CSS colour: hex with 3, 4, 6 or 8 digits, rgb() and rgba(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), the 148 named colours and transparent — in both the comma and the modern space-separated syntax — plus hsv()/hsb(), cmyk() and a bare “59, 130, 246”.
What are OKLCH and Lab for?
They describe colour the way we see it. Equal changes in their lightness look equally large, which HSL cannot promise, so they are used for palettes, gradients and accessible colour scales. OKLCH (lightness, chroma, hue) is supported in all modern browsers and is how Tailwind 4 defines its colours.
Why does my colour change when converted to HEX?
HEX, RGB, HSL and CMYK can only describe colours inside the sRGB range most screens show. Lab, LCH, OKLCH and Display P3 can describe more vivid colours; those are brought to the nearest sRGB colour for the sRGB formats, and the tool says so. Rounding to whole numbers can also move a value by 1.
Is CMYK accurate for printing?
Only roughly. The CMYK here is the simple device-independent formula, which ignores the inks, paper and printer profile that decide real print colour. Use it as a starting point, and get exact CMYK from your printer’s colour profile in a design application.
How do I use the Universal Color Converter?
Just type or paste your value. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
HEX to RGB for code
Turn #3B82F6 from a design file into rgb(59, 130, 246) for a canvas or chart library that wants numbers.
Moving to modern CSS
Rewrite a hex palette in oklch() so lighter and darker variants can be made by changing one number.
Design hand-off
Copy HSL for quick lightness tweaks, or Precise values when matching colours exactly between Figma, Photoshop and code.
Print estimates
Get a first CMYK estimate, such as cmyk(76%, 47%, 0%, 4%) for #3B82F6, before proofing.
Last updated: