Color & CSS
Color Converter
#3b82f6rgb(59 130 246)hsl(217 91% 60%)oklch(0.623 0.188 259.8)hsv(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)--color: #3b82f6;Type or pick a color in any format and get it back in every other one: HEX, RGB, HSL, the modern OKLCH, HSV and CMYK, each ready to copy.
How to use this tool
Type any CSS color into Color value (a name, HEX, rgb(), hsl() or oklch()), choose one with the picker, or press Random color.
The HEX, RGB, HSL, OKLCH, HSV and CMYK values, a CSS variable and a row of shades appear at once, and transparency is kept.
Press Copy HEX, Copy RGB and so on for the format you need, Copy color for the main one, or press a shade to use it as the color.
How to use this tool
Type any CSS color into Color value (a name, HEX, rgb(), hsl() or oklch()), choose one with the picker, or press Random color.
The HEX, RGB, HSL, OKLCH, HSV and CMYK values, a CSS variable and a row of shades appear at once, and transparency is kept.
Press Copy HEX, Copy RGB and so on for the format you need, Copy color for the main one, or press a shade to use it as the color.
Was this tool helpful?
Suggest an improvementHelp keep ConduitTools free
Every tool here is free, private and built by a solo developer. If this one saved you time, a small tip keeps the site running and new tools coming.
Paste any CSS color and copy it in seven formats.
Design tools, CSS, and code all describe colors differently. This converts between them instantly so you can paste whatever you have and copy whatever you need.
- Any CSS format in
- Paste HEX (with or without alpha), rgb(), hsl(), oklch(), or a name such as rebeccapurple. Comma or space syntax both work.
- Seven formats out
- HEX, RGB, HSL, OKLCH, HSV, CMYK, and a ready-made CSS variable, each with its own copy button. Transparency is kept where the format supports it.
- Pick and explore
- Use the color picker, try a random color, or click a shade to step lighter or darker while keeping the same hue.
Frequently asked questions
What is OKLCH and why would I use it?
OKLCH describes a color by lightness, chroma, and hue in a space designed to match human vision. Equal lightness steps look equally light, which makes it good for building consistent palettes. Modern browsers support it in CSS.
Why do my CMYK numbers differ from my printer's?
CMYK here is the simple mathematical conversion from RGB. Real print output depends on ink, paper, and color profiles, so treat it as a guide and use a print profile for production work.
What happens to an OKLCH color that screens cannot show?
Some OKLCH colors are more vivid than an sRGB display can produce. They are clipped to the closest displayable color, which is the same thing browsers do on screens without a wide gamut.
Does it keep transparency?
Yes. An alpha value in the input (such as #3b82f680 or rgb(59 130 246 / 50%)) is carried into the HEX, RGB, HSL, and OKLCH results.