How to convert a color
- Type or paste a color in any format:
#3b82f6,rgb(59 130 246),hsl(217 91% 60%)oroklch(62% 0.19 260). - Or pick one with the color picker.
- Copy the format you need; every value is valid CSS.
- Check the contrast ratios before using the color for text.
Which color format should I use?
| Format | Describes a color by | Best for |
|---|---|---|
| HEX | Red, green, blue in hexadecimal | Sharing colors, design tools |
| RGB | Red, green, blue from 0 to 255 | Screens, image editing, code |
| HSL | Hue, saturation, lightness | Quick tweaks: “a bit lighter” |
| HWB | Hue, whiteness, blackness | Mixing tints and shades by hand |
| OKLCH | Perceived lightness, chroma, hue | Design systems, even color scales |
Contrast and accessibility
The WCAG contrast ratio compares how light two colors are, from 1:1 (identical) to 21:1 (black on white). Body text needs at least 4.5:1 to pass level AA, or 7:1 for AAA. Large text (about 24 px, or 19 px bold) and icons need 3:1.
Common uses
- A brand color in every format. A brand guide gives a HEX code, but your CSS or design tool wants RGB or HSL. Paste it once and copy whichever format you need.
- Checking text will be readable. Before using a color for text or buttons, check its contrast on white and on black against the WCAG AA and AAA levels.
- Moving a palette to OKLCH. Convert existing HEX or RGB colors to oklch() when building evenly spaced shades for a design system in modern CSS.