Color Converter
Convert colours between HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH and OKLCH. Paste any format, use the picker and alpha slider, and copy valid CSS in one click.
How to use Color Converter
- 1Type or paste a colour, or pick one with the colour picker.
- 2Read the HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH and OKLCH values, and drag the alpha slider if you need transparency.
- 3Copy a single format, or switch the mode to Palette to get matching tints, shades and harmonies.
What makes it better
- One box accepts #rgb, #rrggbb, #rrggbbaa, hex without #, rgb()/rgba() in comma or space syntax, hsl(), hwb(), lab(), lch(), oklch() and 148 CSS names
- LAB and LCH use the D50 white point exactly as CSS defines them; OKLCH uses Ottosson's OKLab
- Shows the nearest CSS colour name and says when a colour is out of the sRGB gamut and was clipped
- Native colour picker and an alpha slider that rewrites HEX, RGBA, HSLA and the modern slash syntax
- Palette mode builds tints, shades, complement, triad, analogous and monochrome swatches you can copy
About Color Converter
Paste a colour in almost any notation, from #ff5733 or bare hex to rgb(), hsl(), hwb(), lab(), lch(), oklch() or a CSS colour name, and every other format appears with its own Copy button. The Palette mode turns the same colour into tints, shades, a complement, a triad, analogous and monochrome swatches. Colours beyond the sRGB gamut are clipped and the page tells you when that happens.
Common uses
- Turn a brand HEX code from a style guide into hsl() or oklch() for a CSS design-token file.
- Translate a designer's RGB value into the HSL numbers needed to build hover and focus states.
- Check how a lab() or oklch() value from a modern CSS example looks as a plain hex colour.
- Generate a quick set of tints and shades around a primary colour for a UI theme.
Example
Input
#ff5733
Result
HEX: #ff5733 RGB: rgb(255, 87, 51) HSL: hsl(11, 100%, 60%) HSV / HSB: hsv(11, 80%, 100%) HWB: hwb(11 20% 0%) CMYK: cmyk(0%, 66%, 80%, 0%) LAB: lab(61.03% 63.55 55.96) LCH: lch(61.03% 84.67 41.37) OKLCH: oklch(68.04% 0.21 33.69) Nearest CSS name: tomato (#ff6347)
Good to know
- CMYK is a naive formula applied to sRGB. It is not colour-managed, so a print shop or an ICC profile will give different numbers for the same colour.
- HSL, HSV, HWB and CMYK are shown as whole numbers, so converting them back can differ from the original by a step or two. HEX and RGB are exact.
- sRGB is the only output space. Colours from lab(), lch() or oklch() that sit outside it are clipped per channel, which can shift their hue slightly compared with the browser's own gamut mapping.
Color Converter FAQ
How do I convert HEX to RGB or HSL?
Paste the hex code, with or without the # sign, and the RGB and HSL rows update at once. Each row has its own Copy button and is written as valid CSS, such as rgb(255, 87, 51) or hsl(11, 100%, 60%).
What colour formats can I paste?
Three, four, six and eight digit hex, rgb() and rgba() with commas or the modern space and slash syntax, percentages included, hsl(), hwb(), lab(), lch(), oklch() and any of the 148 CSS colour names. Anything else gets a message that says what could not be read.
Is the CMYK value accurate for printing?
No. The page uses the simple formula that treats sRGB channels as if they were ink coverage, which is fine for a rough idea but is not colour-managed. Print work needs the printer's ICC profile, so treat the CMYK row as an approximation.
What does 'outside the sRGB gamut' mean?
lab(), lch() and oklch() can describe saturated colours that a standard screen cannot show. When your input is one of them, the page clips each channel to the nearest displayable value and says so instead of silently changing the colour.
Are the colours I enter stored or sent anywhere?
No. The maths runs in your browser tab, nothing is uploaded, and nothing is kept once you close or reload the page.