A designer sends you #FF6B6B. Your CSS needs rgb(). A tool shows hsl(). They are all the same color — just written in different formats. Converting between them is something web developers and designers do constantly.
Convert Colors Now
Use our free Color Converter — enter any color in HEX, RGB, or HSL and instantly see it in all formats with a live preview. Copy CSS-ready values with one click.
For generating entire color schemes, try our Color Palette Generator — create harmonious palettes with complementary, analogous, and triadic rules.
Color Formats Explained
HEX (Hexadecimal)
The most common format in web design. A # followed by 6 characters (0-9, A-F):
color: #FF6B6B;Each pair represents Red, Green, Blue:
#FF 6B 6B
R G B
255 107 107
Shorthand: When pairs repeat, you can shorten: #FF0000 → #F00
RGB (Red, Green, Blue)
Three numbers from 0-255 representing each channel:
color: rgb(255, 107, 107);
/* With alpha transparency */
color: rgba(255, 107, 107, 0.5);HSL (Hue, Saturation, Lightness)
Describes color in a more human-intuitive way:
color: hsl(0, 100%, 71%);
/* With alpha transparency */
color: hsla(0, 100%, 71%, 0.5);- Hue: 0-360 degrees on the color wheel (0=red, 120=green, 240=blue)
- Saturation: 0-100% (0=gray, 100=full color)
- Lightness: 0-100% (0=black, 50=normal, 100=white)
HSL is easiest when you want to create variations — just change lightness for shades or saturation for muted versions.
Quick Reference
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 |
rgb(255,0,0) |
hsl(0,100%,50%) |
| Green | #00FF00 |
rgb(0,255,0) |
hsl(120,100%,50%) |
| Blue | #0000FF |
rgb(0,0,255) |
hsl(240,100%,50%) |
| White | #FFFFFF |
rgb(255,255,255) |
hsl(0,0%,100%) |
| Black | #000000 |
rgb(0,0,0) |
hsl(0,0%,0%) |
| Gray | #808080 |
rgb(128,128,128) |
hsl(0,0%,50%) |
Which Format to Use?
| Situation | Best Format | Why |
|---|---|---|
| CSS variables | HEX or HSL | Short, easy to read |
| Transparency needed | RGBA or HSLA | Support alpha channel |
| Creating color variations | HSL | Just adjust lightness/saturation |
| Design handoff | HEX | Universal, everyone understands it |
| JavaScript canvas | RGB | Canvas API uses RGB values |
| Matching a brand color | HEX | Brand guidelines use HEX |
CSS Tips
Creating Shades with HSL
:root {
--brand: hsl(210, 80%, 50%); /* Base blue */
--brand-light: hsl(210, 80%, 70%); /* Lighter */
--brand-dark: hsl(210, 80%, 30%); /* Darker */
--brand-muted: hsl(210, 30%, 50%); /* Less saturated */
}Modern CSS Color Functions
/* Relative color syntax (modern browsers) */
color: color-mix(in oklab, #FF6B6B 50%, white);Related Tools
- Color Converter — convert between HEX, RGB, HSL
- Color Palette Generator — create color schemes