Convert any color instantly
Use the free color picker — enter any hex color and it shows the RGB, HSL, and HSB equivalents instantly. No account required.
How hex colors work
A hex color like #ff6600 encodes three values — red, green, blue — each as two hexadecimal digits:
ff= red channel66= green channel00= blue channel
Hexadecimal (base 16) uses digits 0–9 and letters a–f. Each two-digit pair represents a value from 0 (00 in hex) to 255 (ff in hex).
The conversion formula: hex to RGB
Convert each two-digit hex pair to decimal:
ffhex → 15 × 16 + 15 = 25566hex → 6 × 16 + 6 = 10200hex → 0 × 16 + 0 = 0
So #ff6600 = rgb(255, 102, 0).
In JavaScript: parseInt('ff', 16) converts any hex pair to decimal.
The conversion formula: RGB to hex
Convert each decimal value (0–255) to two-digit hexadecimal:
- 255 ÷ 16 = 15 remainder 15 → ff
- 102 ÷ 16 = 6 remainder 6 → 66
- 0 ÷ 16 = 0 remainder 0 → 00
In JavaScript: (255).toString(16) returns 'ff'. Pad single-digit results with a leading zero: (6).toString(16).padStart(2, '0')returns '06'.
Shorthand hex (#rgb)
When both digits of each channel are identical, hex colors can be shortened:
#ffffff→#fff#000000→#000#ff6600cannot be shortened (66 would be 6, but 66 ≠ 6)#ff6633→#f63
Shorthand only works when each pair is a repeated digit. Browsers expand #f63to #ff6633.
Hex with opacity: #RRGGBBAA
Modern CSS supports 8-digit hex for opacity: #ff660080 where the last two digits (80 = 128 in decimal = 50% opacity) represent the alpha channel. This is equivalent to rgba(255, 102, 0, 0.5).
Quick reference: common colors
| Color | Hex | RGB |
|---|---|---|
| White | #ffffff | rgb(255, 255, 255) |
| Black | #000000 | rgb(0, 0, 0) |
| Red | #ff0000 | rgb(255, 0, 0) |
| Green | #00ff00 | rgb(0, 255, 0) |
| Blue | #0000ff | rgb(0, 0, 255) |
| Gray (50%) | #808080 | rgb(128, 128, 128) |
| Transparent | #00000000 | rgba(0, 0, 0, 0) |
Why CSS has both formats
Hex colors came from HTML in the 1990s and are more compact. RGB and HSL were added later as CSS became a design language — they are more readable and easier to manipulate programmatically. Both are equally valid in CSS today.
HSL (Hue, Saturation, Lightness) is the most human-readable format:hsl(24, 100%, 50%)means "warm orange, fully saturated, medium brightness." Easy to adjust by eye. Use the color picker to get all three formats for any color simultaneously.
Summary
- Hex:
#RRGGBB— each pair is the channel value in hex (00–ff = 0–255) - RGB:
rgb(R, G, B)— each value is 0–255 in decimal - Convert hex to decimal:
parseInt(hexPair, 16) - Convert decimal to hex:
value.toString(16).padStart(2, '0') - Use the color picker to skip the math