Color Converter
Convert colors between HEX, RGB and HSL with a live preview.
- Runs in your browser
- Web
HEX#ea580c
RGBrgb(234 88 12)
HSLhsl(21 90% 48%)
CSS variable--brand: #ea580c;
Shades · click to use
Contrast (WCAG)
Aa3.56 : 1AA large · on white
Aa5.90 : 1AA · on black
How to use the Color Converter
- 1Type a color as HEX, rgb() or hsl(), or click the swatch to pick one.
- 2Copy it in any format, including as a CSS variable.
- 3Click a shade to use it, and check its contrast on white and black.
Questions
What do AA and AAA mean?
WCAG contrast levels. AA needs 4.5:1 for normal text (3:1 for large text) and AAA needs 7:1.
How are the shades made?
By keeping the hue and saturation and stepping the lightness from 96% (50) down to 18% (900), similar to Tailwind's scale.
Why might converting back give a slightly different HEX?
HSL values are rounded to whole numbers, so a round trip can shift a channel by 1.