Favorites
Back to tools
Color Converter (HEX to RGB, HSL)
Type any color (HEX, RGB, HSL or a CSS name) or pick one visually to get every format ready to copy, plus tints and shades, harmonies and WCAG contrast results.
Accepts HEX (3/4/6/8 digits), RGB(A), HSL(A) and CSS color names.
- HEX
- #3B82F6
- RGB
- rgb(59, 130, 246)
- HSL
- hsl(217, 91%, 60%)
- HSV / HSB
- 217°, 76%, 96%
Tints & shades
Same hue and saturation at different lightness. Click any swatch to use it.
Complementary
Analogous
Triadic
Split complementary
Contrast (WCAG 2)
On white
The quick brown fox
3.68 : 1
AAfailsAAAfailsAA largepasses
On black
The quick brown fox
5.71 : 1
AApassesAAAfailsAA largepasses
White text
The quick brown fox
3.68 : 1
AAfailsAAAfailsAA largepasses
Black text
The quick brown fox
5.71 : 1
AApassesAAAfailsAA largepasses
AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 18.7px bold). AAA needs 7:1. Transparency is ignored here.
How to use it
- Pick a color or type a value such as #3B82F6, rgb(59 130 246) or tomato.
- Copy the HEX, RGB, HSL or HSV value you need.
- Click any shade or harmony swatch to switch to it.
- Check the contrast cards before using the color for text.
Common Use Cases
- Converting design colors for CSS
- Building a palette from a brand color
- Checking text color accessibility
Frequently Asked Questions
Can I type a color name?▼
Yes. All 148 CSS color names are supported, such as tomato or rebeccapurple.
Is alpha/opacity supported?▼
Yes. 4- and 8-digit hex, rgba() and hsla() keep transparency, and the output formats include it.
What do AA and AAA mean?▼
They are WCAG contrast levels. AA needs 4.5:1 for normal text (3:1 for large text); AAA needs 7:1.
Can I pick a color from my screen?▼
In browsers that support the EyeDropper API (such as Chrome and Edge on desktop), a pipette button appears next to the input.
Why use this tool?
- HEX (3/4/6/8 digits), RGB(A), HSL(A) and CSS names
- Alpha (transparency) support
- Tints, shades and color harmonies
- WCAG AA/AAA contrast against white and black
Related Tools
How was this tool?
Your feedback helps us make it better.
Have further opinions? Email me at hello@everythingbagel.app