About the Color Converter
The converter reads everything modern CSS accepts for sRGB colors: #rgb, #rrggbbaa, rgb(52 211 153 / 50%), legacy rgba(52, 211, 153, .5), hsl() with deg, turn or rad hues, hwb(), oklch(), oklab(), the 148 named colors and a bare 52, 211, 153. Every result updates as you type, and alpha is kept across all formats.
OKLCH and OKLab use Björn Ottosson's published matrices, the same model browsers implement for CSS Color 4. Because OKLCH can describe colors outside sRGB, out-of-gamut values are clipped and flagged. CMYK is a naive device conversion without an ICC profile — handy for rough mockups, not for print proofs.
Contrast ratios follow WCAG 2.x relative luminance: 4.5:1 passes AA for body text, 3:1 for large text (24px, or 18.66px bold), and 7:1 passes AAA. Semi-transparent colors are blended over the background first, which is what users actually see. Everything is calculated locally in your browser. Click any tint or shade to load it as the new base color.
How to use it
- Type or paste a color in any format, or use the color picker.
- Adjust transparency with the alpha slider.
- Copy the notation you need from the Formats table.
- Enter a background color to check the contrast pair against WCAG AA and AAA.
- Click a tint or shade to explore lighter or darker variants.