HEXColor Converter
Convert between HEX, RGB, and HSL colors
Color Converter Complete Guide
Color Converter instantly converts between HEX, RGB, and HSL color formats. Essential for web developers and UI designers who need to translate Figma HEX codes into CSS rgb()/hsl() values, or find the exact numbers behind color names like blue or tomato.
Color Spaces — RGB / HSL / HSV / CMYK
- RGB (Red, Green, Blue): Additive light mixing for screens. Each channel 0–255. The foundation of all web and app colors.
- HSL (Hue, Saturation, Lightness): Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Most intuitive for building CSS theme systems.
- HSV (Hue, Saturation, Value): Similar to HSL but different brightness calculation. Common in Photoshop and color picker UIs.
- CMYK (Cyan, Magenta, Yellow, Key/Black): Subtractive ink mixing for print. RGB colors can look different when printed.
HEX Notation and Alpha
| Format | Example | Transparency | Notes |
|---|---|---|---|
| #RRGGBB | #3b82f6 | None | Standard 6-digit HEX |
| #RRGGBBAA | #3b82f680 | 50% | 8-digit HEX, AA = alpha (00–FF) |
| #RGB | #38f | None | 3-digit shorthand (= #3388ff) |
| rgba() | rgba(59,130,246,0.5) | 50% | CSS rgba, alpha 0–1 |
| hsl() | hsl(217,91%,60%) | None | CSS HSL |
Print vs Web Color Spaces
- Web/screen: RGB, HEX, HSL. sRGB is the standard color space.
- Print: CMYK. RGB colors from your monitor can look different when printed.
- ICC profiles: Print work needs Adobe RGB or CMYK ICC profiles for accurate color management.
- P3 color space: Modern iPhone/Mac displays support Display P3, wider than sRGB. Specify in CSS with
color(display-p3 ...).
Why HSL Wins in CSS
- Change only L to create lightness variants of the same hue:
hsl(217, 91%, 50%)→hsl(217, 91%, 70%) - Tailwind CSS and shadcn/ui both use HSL-based CSS variable systems
- Dark mode: keep the same Hue, invert L — instant dark palette
- Pattern:
:root { --primary: 217 91% 60%; }→hsl(var(--primary))
FAQ
HEX is concise and great for design handoffs. RGBA when you need transparency. HSL is best for CSS variables and theme systems.
Use 8-digit HEX: #3b82f680 = 50% opacity. Or use rgba(59, 130, 246, 0.5).
Figma defaults to sRGB, but on modern Mac displays with P3, colors appear more vivid. Check Figma's color space settings if colors look off.
Yes. Over 140 CSS Named Colors (blue, tomato, cornflowerblue, etc.) are supported — just type the name and get HEX/RGB/HSL instantly.