Color Converter
Convert colors between HEX, RGB, HSL, and more.
- Runs in your browser
- No signup
Color Values
Color Harmonies
Shade Palette
Contrast Checker
How to use Color Converter
Enter a color
Type HEX, RGB, RGBA, HSL, HSV or CMYK, or use the color picker.
Get every format
All other formats update instantly, with harmonies and a 50 to 900 shade palette.
Check contrast
Test text against a background for WCAG AA and AAA, then copy the values you need.
How to convert HEX, RGB, HSL and CMYK colors
Designers, developers and printers describe the same color in different ways. Color Converter translates between HEX, RGB, RGBA, HSL, HSV and CMYK instantly, and adds the extras you need when building a palette: harmonies, shades and an accessibility contrast checker.
Which format to use where
Each format has its natural home:
- HEX (#FF5733): the most common way to write colors in CSS and design tools.
- RGB and RGBA: red, green and blue values from 0 to 255, plus alpha for transparency.
- HSL: hue, saturation and lightness, the easiest to adjust by hand, for example to make a color 10 percent lighter.
- HSV/HSB: used by color pickers in apps like Photoshop and Figma.
- CMYK: for print. Screen colors may shift in print because printers cannot reproduce every RGB color.
Accessible contrast
Text needs enough contrast with its background to be readable, including for people with low vision. The WCAG guidelines ask for a ratio of at least 4.5:1 for normal text (AA) and 7:1 for the stricter AAA level; large text needs 3:1 and 4.5:1. The checker shows pass or fail badges for each.
Palettes and shades
Harmonies (complementary, analogous, triadic, split-complementary and tetradic) suggest colors that work together. The shade palette generates ten steps from 50 to 900 by varying lightness, the same structure Tailwind CSS uses, so you can build a full scale from one brand color.