How to Convert HEX, RGB & HSL Colors
Colors on screens are defined by mixing red, green, and blue light. Web developers work with three representations of the same color: HEX (a 6-digit hexadecimal string like #FF5733), RGB (three integers 0–255), and HSL (hue in degrees, saturation and lightness as percentages). Being able to convert between them helps you understand design tools, CSS, and image editors.
Last updated: March 31, 2026
The Formula
HEX to RGB: R = hex(1–2), G = hex(3–4), B = hex(5–6) each converted from hex to decimal RGB to HEX: convert each R, G, B value to 2-digit hex, concatenate with # RGB to HSL: R' = R/255, G' = G/255, B' = B/255 Max = max(R',G',B'), Min = min(R',G',B'), Δ = Max−Min L = (Max + Min) / 2 S = Δ / (1 − |2L − 1|) (if L ≠ 0 or 1) H = 60 × ((G'−B')/Δ mod 6) if Max=R'
Variable Definitions
| Symbol | Name | Description |
|---|---|---|
| R, G, B | Red, Green, Blue | Each channel is an integer 0–255. 0 = none of that color, 255 = full intensity. |
| H, S, L | Hue, Saturation, Lightness | Hue: 0°=red, 120°=green, 240°=blue. Saturation: 0%=gray, 100%=vivid. Lightness: 0%=black, 50%=normal, 100%=white. |
Step-by-Step Example
Convert the color #FF5733 to RGB, then find its approximate HSL values.
Given
Solution
- 1Split hex into pairs:
FF = Red, 57 = Green, 33 = Blue - 2Convert each pair from hex to decimal:
FF = 255, 57 = 87, 33 = 51 - 3RGB result:
rgb(255, 87, 51) - 4Normalise: R'=255/255=1.0, G'=87/255=0.341, B'=51/255=0.2:
Max=1.0(R), Min=0.2(B), Δ=0.8 - 5Lightness L = (1.0+0.2)/2:
L = 0.6 = 60% - 6Saturation S = 0.8/(1−|2×0.6−1|) = 0.8/0.8:
S = 1.0 = 100% - 7Hue H = 60 × ((0.341−0.2)/0.8 mod 6):
H = 60 × 0.176 ≈ 10.6°
#FF5733 = rgb(255, 87, 51) = hsl(11°, 100%, 60%) — a vivid orange-red.
Ready to calculate?
Use the free Color Picker — instant results, no sign-up.
Common Mistakes to Avoid
Forgetting to divide R, G, B by 255 before the HSL calculation — the formula requires normalised values (0–1).
Reading HEX pairs in the wrong order — always Red first, Green second, Blue third (#RRGGBB).
Confusing HSL with HSV/HSB — Lightness 100% is white in HSL, but Value 100% is the pure hue in HSV (not white).
Assuming #000000 is black — it is! But #FFFFFF is white. #808080 is mid-gray.