How to convert a color
- Type or paste a color in any format:
#15803d,rgb(21, 128, 61)orhsl(142, 72%, 29%). - Or tap Pick to choose a color visually.
- See the HEX, RGB and HSL values, plus contrast ratios against white and black. Copy the format you need.
Short HEX codes such as #fff are expanded automatically.
Color formats explained
| Format | Example | Best for |
|---|---|---|
| HEX | #15803D | Web design, CSS, design tools |
| RGB | rgb(21, 128, 61) | Screens, code that mixes colors |
| HSL | hsl(142, 72%, 29%) | Creating lighter and darker shades |
All three describe the same color. HEX is just RGB written in hexadecimal: each pair of digits is one channel, from 00 to FF (0 to 255).
HSL is the most intuitive for adjusting colors. Keep the hue the same and change the lightness to get a darker shade for hover states or a lighter tint for backgrounds.
Checking contrast
Text needs enough contrast against its background to be readable, especially for people with low vision and on phones in bright light. The Web Content Accessibility Guidelines (WCAG) recommend:
| Text | Minimum contrast (AA) |
|---|---|
| Normal text | 4.5:1 |
| Large text (about 24px, or 19px bold) | 3:1 |
The converter shows the contrast of your color against white and black, and whether each passes for normal text. If neither passes, choose a darker or lighter shade by adjusting the lightness in HSL.
Related tools
To find the exact color of something in a photo or screenshot, use the image color picker. For hexadecimal numbers in general, the number base converter helps.
Everything runs in your browser.