This color converter turns one color into HEX, RGB and HSL instantly, with a visual picker to choose it directly. It also compares two colors (text and background) and calculates their WCAG contrast ratio, showing whether it passes the AA and AAA levels for normal and large text.
It also generates a palette of ten tints (mixed toward white) and ten shades (mixed toward black) from the chosen color, handy for building a full scale from a single brand color for an interface or a design system.
How to use
- 1Pick a color with the picker or type its value in HEX, RGB or HSL: the other two formats update on their own.
- 2Copy the value you need with one click.
- 3To check accessibility, choose a text color and a background color and read the contrast ratio and whether it passes AA or AAA.
- 4Generate a tints-and-shades palette from the active color and copy any of its shades.
What you can do
- HEX, RGB and HSL conversion
- Visual color picker
- WCAG AA and AAA contrast check
- Tints and shades palette
HEX, RGB and HSL: what each format means
HEX describes a color with a 3, 6 or 8-digit hexadecimal code (the last two digits, optional, are transparency). RGB describes it by the amount of red, green and blue, from 0 to 255, plus an optional opacity. HSL describes it in a way that's more intuitive to tweak by hand: hue (0-360°), saturation and lightness, both as percentages.
How WCAG contrast is read
The WCAG 2.x accessibility guidelines require a minimum contrast ratio between text and its background to stay readable: 4.5:1 for normal text and 3:1 for large text at the AA level (the common baseline), and 7:1 and 4.5:1 respectively at the stricter AAA level. Text counts as large from 18pt, or 14pt bold.
Tints and shades for a brand palette
A tint is a color progressively mixed with white, and a shade is the same color mixed with black. It's the simplest way to build a full single-color scale (like a 50-to-900 range) for buttons, backgrounds and states in an interface, starting from a single brand color.
Frequently asked questions
How do I convert a HEX color to RGB?
Type the HEX code (with or without the # sign) into that field; the RGB and HSL values update automatically.
What contrast ratio do I need for web accessibility?
For the AA level, the most commonly required baseline, you need a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or larger, or 14pt bold).
What does the fourth value in RGBA or HSLA mean?
It's the alpha channel, which controls opacity: 1 is fully opaque and 0 is fully transparent. In HEX it's represented by two extra digits at the end (#RRGGBBAA).
How do I pick a color with the picker?
Click the color swatch to open your browser or operating system's native color picker; choosing a color there updates the HEX, RGB and HSL fields automatically.