Color Code Converter — HEX, RGB, HSL with Preview
Convert color codes between HEX, RGB, and HSL formats instantly with a live color preview swatch.
Swatches:
Color Model Reference
| Format | Range | Example (Green) |
|---|---|---|
| HEX | #000000–#FFFFFF | #00FF00 |
| RGB | 0–255 each channel | rgb(0, 255, 0) |
| HSL | H: 0–360°, S: 0–100%, L: 0–100% | hsl(120, 100%, 50%) |
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL color codes?
HEX is a 6-character hexadecimal code (#RRGGBB). RGB uses three numbers 0–255 for red, green, blue. HSL uses Hue (0–360°), Saturation (0–100%), Lightness (0–100%). All represent the same colors but in different formats.
Which color format should I use in CSS?
All three work in CSS. HEX is most common and concise. RGB allows opacity with rgba(). HSL is most intuitive for designers — adjusting lightness or saturation without changing hue is easy.
What is the HEX code for common colors?
Black = #000000, White = #FFFFFF, Red = #FF0000, Green = #00FF00, Blue = #0000FF, Yellow = #FFFF00, Orange = #FF8000.
What is HSL hue?
Hue is the color angle on the color wheel: 0° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta. Saturation 100% is vivid, 0% is grey. Lightness 50% is normal, 0% is black, 100% is white.
What is CMYK and why is it not shown?
CMYK (Cyan, Magenta, Yellow, Black) is used for print. Web and screen colors use RGB. CMYK and RGB are in different color spaces — conversion between them is approximate.