🎨
Color Converter
Convert colors between HEX, RGB, and HSL formats.
Click to pick color
e.g. 59, 130, 246
e.g. 217, 91%, 60%
HEX: #3b82f6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
CMYK: cmyk(76%, 47%, 0%, 4%)
Color Palette
Complementary
Analogous
Triadic
Shades
💡 How to Use
Enter a color value in any of the HEX, RGB, or HSL fields and the other two formats update automatically. Click the color preview swatch to open the browser color picker and choose a color visually. Use the copy button next to each field to save that format to your clipboard instantly. This is especially useful for converting CSS color codes between formats and matching colors between design tools and code.
Related Tools
FAQ
Should I use HEX, RGB, or HSL?▼
HEX (#3b82f6) is the most concise in CSS. Use RGB (rgba) when you need transparency, and HSL when you need to adjust colors intuitively.
What's the color contrast ratio for web accessibility?▼
Per WCAG guidelines, normal text needs a 4.5:1 contrast ratio, and large text (18pt+) needs at least 3:1.
What's the difference between CMYK and RGB?▼
RGB is for screens (light mixing), CMYK is for print (ink mixing). Use RGB/HEX/HSL for web design, CMYK for print materials.