Color Picker & Converter

Pick a color and convert between HEX, RGB, HSL, HWB, CMYK, LAB, LCH and OKLCH — 100% in your browser.

Alpha100%

HEX#3b82f6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

HSVhsv(217, 76%, 96%)

HWBhwb(217 23% 4%)

CMYKcmyk(76%, 47%, 0%, 4%)

LABlab(55.63% 17.54 -64.42)

LCHlch(55.63% 66.77 285.23)

OKLCHoklch(0.623 0.188 259.81)

XYZxyz(0.264, 0.235, 0.903)

Shades (click to use)

About Color Picker & Converter

Pick a color with the swatch picker or type any CSS color — HEX (#3b82f6), rgb()/rgba(), hsl()/hsla() or a named color like “tomato” — and it's instantly converted to every common notation: HEX, RGB, HSL, HSV, HWB, CMYK, and the wide-gamut CIE and modern CSS spaces LAB, LCH, OKLCH and XYZ, each with a copy button. An alpha slider adds transparency and updates the HEX, RGBA and HSLA outputs.

LAB, LCH and OKLCH are perceptual color spaces used in modern CSS for smoother gradients and predictable lightness, while CMYK is handy for print. A row of tints and shades is generated so you can build a quick palette; click any swatch to switch to it. Everything runs locally in your browser — no color data is uploaded.

How to use Color Converter

Enter a supported named color, HEX, RGB or HSL value and compare the converted representations.
Copy the format expected by the CSS property or design tool you are using.

Limitations and common mistakes

Rounding can cause small differences when converting repeatedly between color models. Preserve the original value when exact round-tripping matters.

A valid color value does not guarantee readable text. Use the contrast checker with the actual foreground, background and transparency combination.

The tool processes its input locally on your device. Read our privacy policy for analytics, storage and network details.

Convert a HEX color

Input

#3b82f6

Output

rgb(59, 130, 246) · hsl(217, 91%, 60%) · oklch(0.623 0.188 259.81)

Type a named color or rgb()/hsl() value and it converts the same way.

Frequently asked questions

Which color formats are supported?

HEX (3/4/6/8 digit), RGB/RGBA, HSL/HSLA, HSV, HWB, CMYK, LAB, LCH, OKLCH and XYZ as outputs, plus named CSS colors as input.

What are LAB, LCH and OKLCH?

They're perceptual color spaces. LAB/LCH are based on CIE color science, and OKLCH is a newer space (now in CSS) that gives more uniform lightness and better gradients than HSL.

Does it support transparency (alpha)?

Yes. Use the alpha slider or an 8-digit HEX / rgba() / hsla() value, and the HEX, RGBA and HSLA outputs include the alpha channel.

Is my color data uploaded anywhere?

No. All parsing and conversion happen locally in your browser.

For related tasks, explore Gradient Generator and Contrast Checker. Their guides explain the different inputs, assumptions and output formats.