Paste HEX (with or without alpha), rgb(), hsl(), oklch(), or a name such as rebeccapurple. Comma or space syntax both work.
Color & CSS
Color Converter
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.
Your colorType any CSS color, or pick one
Shades of this color
Every formatCopy the one you need
HEX
#3b82f6RGB
rgb(59 130 246)HSL
hsl(217 91% 60%)OKLCH
oklch(0.623 0.188 259.8)HSV
hsv(217, 76%, 96%)CMYK
cmyk(76%, 47%, 0%, 4%)CSS variable
--color: #3b82f6;What it handles
Every color format, one place.
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.
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.
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.