How to convert a color
- Type or paste a color in any supported format, or pick one with the color picker.
- The HEX, RGB, HSL and OKLCH values update instantly.
- Copy the format you need into your CSS, design tokens or code.
Color formats in CSS
- HEX:
#ff5f6d, the most common format in design tools. - RGB:
rgb(255, 95, 109), red, green and blue from 0 to 255. - HSL:
hsl(354.8, 100%, 68.6%), hue, saturation and lightness. - OKLCH:
oklch(69.74% 0.1942 18.63), perceptual lightness, chroma and hue.
Frequently asked questions
How do I convert HEX to RGB?
Split the six hex digits into three pairs and convert each pair from base 16 to base 10. For #FF8000, FF is 255, 80 is 128 and 00 is 0, so the color is rgb(255, 128, 0).
What is OKLCH and why use it?
OKLCH describes a color by perceived lightness, chroma (colorfulness) and hue. Unlike HSL, colors with the same lightness value really look equally light, which makes it much easier to build consistent palettes and accessible color scales. All modern browsers support it in CSS.
What does "outside the sRGB gamut" mean?
OKLCH can describe colors that ordinary sRGB screens cannot show. When that happens, the HEX, RGB and HSL values are clipped to the nearest displayable color.
Does it support transparency?
Yes. Use 8-digit HEX like #ff000080, or an alpha value in rgb(), hsl() or oklch(), for example rgb(255 0 0 / 50%). Alpha is kept in every output format.