HEX / RGB / HSL Converter
Convert a color between HEX, RGB, and HSL notation in any direction, for example to turn a brand HEX code into rgb() for CSS.
Your input stays in your browser. Nothing is uploaded.
About this tool
A HEX color is three pairs of hexadecimal digits for red, green, and blue, each from 00 to ff (0 to 255). RGB lists the same three channels as decimal numbers. HSL describes the color as a hue angle (0–360°), a saturation, and a lightness percentage, which makes it easier to create lighter or darker variants. Type any of the three formats and the others are calculated. HSL values are rounded to whole numbers.
How to use it
- Type a HEX, rgb(), or hsl() value.
- Copy the converted value you need.
R = hex pair 1 in base 16, G = pair 2, B = pair 3
L = (max + min) ÷ 2 (channels scaled to 0–1)
S = (max − min) ÷ (1 − |2L − 1|)
Examples
HEX to RGB
#1e90ff: 1e = 30, 90 = 144, ff = 255, so rgb(30, 144, 255).
RGB to HEX
rgb(255, 165, 0): 255 = ff, 165 = a5, 0 = 00, so #ffa500.
Common colors in each notation
| Color | HEX | RGB | HSL |
|---|---|---|---|
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green (CSS lime) | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Mid gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
FAQ
What is a three-digit HEX code?
A shorthand where each digit is doubled: #f80 means #ff8800.
Why does converting back give a slightly different HEX?
HSL is rounded to whole numbers, which can shift a channel by one when converted back.
Does it support 8-digit HEX with alpha?
No. Only 3- and 6-digit HEX codes are accepted.