Color Converter
Convert one colour between HEX, RGB, HSL, HSV, CMYK and OKLCH at the same time. Pick a colour or type into any field and the rest recompute as you go.
- Runs in your browser
- Six formats, both directions
- Copy any value
- Built by Mohamed Nasreldeen
Pick or paste a color
Edit any field — HEX, RGB, HSL, HSV, CMYK or OKLCH — and the rest update instantly. Copy the CSS string you need.
How to use the color converter
Pick or paste a color
Use the native color picker, or type a value into the HEX, RGB, HSL, HSV, CMYK or OKLCH field.
Watch every field update
As soon as you edit one field, the converter recomputes all the other formats live so you can compare them side by side.
Copy the format you need
Click to copy any value, such as #3b82f6, rgb(59, 130, 246) or oklch(62.3% 0.188 259.8).
What this color converter does
It is a two-way converter: every field is editable, so you can go from HEX to RGB, RGB back to HSL, or jump straight into OKLCH and read off the equivalent HEX. There is no convert button to press and no round trip to a server. Each keystroke is converted with standard color math directly on the page, which keeps it fast and means your colors never leave your device.
The formats cover the common needs of web and UI work. HEX and RGB are the everyday CSS values, HSL and HSV are useful when you want to tweak hue, saturation or lightness by hand, and OKLCH is the modern perceptual space that keeps lightness consistent as you shift hue (the HEX to OKLCH page adds sliders for it). CMYK is included for reference when you need a rough idea of the ink mix.
Honest limits
Everything here is computed with standard color math in sRGB, including the OKLCH conversion. That is the right space for screens and CSS, but it is not a color-management system. The CMYK output is a generic approximation with no printer or paper color profile attached, so treat it as a starting reference rather than a calibrated proof. For real print work, confirm colors against a proper proof from your print provider.
HEX to HSL and RGB to HSL
HSL describes a colour by hue (an angle from 0 to 360 degrees), saturation and lightness (both percentages). It is friendlier than a HEX code or three RGB channels when you want to make a shade lighter, dial down its intensity, or build a set of tints from one base colour. Paste #3b82f6 into the HEX field, or rgb(59, 130, 246) into the RGB field, and the HSL field reads hsl(217, 91%, 60%).
The conversion works both ways: edit the HSL numbers and the HEX and RGB values follow. HSL is stored here as whole numbers, so a round trip can shift a channel by one step, which is not visible.
HEX to CMYK: an honest note on accuracy
Screens mix red, green and blue light; print mixes cyan, magenta, yellow and black ink. When a design moves from web to print, a CMYK readout is useful for rough planning and for talking to a print shop: #3b82f6 comes out as cmyk(76%, 47%, 0%, 4%).
That figure is a generic mathematical conversion. It uses no ICC printer profile, paper stock or ink set, so the same HEX code can print differently on different presses. Use it as a reference, and confirm any colour that has to match against a calibrated proof from your print provider.
Frequently asked questions
Is this color converter really free and private?
Yes. It is free, needs no sign-up, and every conversion runs in your browser. No color values are uploaded to a server.
Which color formats are supported?
HEX, RGB, HSL, HSV, CMYK and OKLCH. You can edit any one of them and the others recompute automatically.
Can I copy the result as CSS?
Yes. Each field has a copy button and holds a ready-to-paste value, such as rgb(59, 130, 246), hsl(217, 91%, 60%) or oklch(62.3% 0.188 259.8).
Is the CMYK value accurate for printing?
It is an approximation using standard math with no printer color profile, so use it as a reference. For accurate print color, check a calibrated proof from your printer.
Does OKLCH use a special color space?
OKLCH is computed from sRGB using the standard matrices, which is correct for web and CSS. It is not tied to a wide-gamut or print profile.