How to use the color converter
Pick a color with the color picker, or paste a value in HEX, RGB or HSL format. The converter shows the
same color in every format, a palette of lighter tints and darker shades, and how readable text is when
you combine the color with white or black. Click any value or swatch to copy it.
Color formats explained
- HEX (
#FF5A1F) is the most common format in HTML and CSS: two hexadecimal digits each for red, green and blue.
- RGB (
rgb(255, 90, 31)) gives the same three channels as numbers from 0 to 255.
- HSL (
hsl(16, 100%, 56%)) uses hue (0–360°), saturation and lightness. To make a color lighter, just raise the lightness.
- CMYK (cyan, magenta, yellow, black) is used for print. The values here are a simple conversion; a print shop will use color profiles for exact results.
Frequently asked questions
What's the difference between HEX, RGB and HSL?
They're three ways of writing the same color. HEX (#FF5A1F) and RGB (rgb(255, 90, 31)) describe how much red, green and blue light to mix. HSL (hsl(16, 100%, 56%)) describes hue, saturation and lightness, which is easier for adjusting a color by hand.
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from hexadecimal to a number from 0 to 255. For #FF5A1F: FF = 255, 5A = 90 and 1F = 31, so the color is rgb(255, 90, 31).
What contrast ratio do I need for readable text?
The Web Content Accessibility Guidelines (WCAG) require at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold) at level AA. Level AAA requires 7:1 and 4.5:1.
What are tints and shades?
Tints are a color mixed with white, making it lighter. Shades are a color mixed with black, making it darker. They're useful for building a palette from one brand color, for example for hover states and backgrounds.
