Skip to content
DevKit Labs

Color Picker & Converter

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

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.

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.

Related tools

References