Color Converter
Convert between HEX, RGB, and HSL with a live picker.
HEX
#2563EB
RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)
About this tool
The same colour gets written three ways depending on where it lives — HEX in a brand guide, RGB in a design tool, HSL in a stylesheet where someone wanted to tweak lightness. This converts between all three with a picker attached.
HSL is the one worth learning. Because hue, saturation, and lightness are separate numbers, you can build a whole tint scale by changing one value, which is impossible to do by eye in HEX.
Common questions
What is the difference between HEX, RGB, and HSL?
HEX and RGB describe the same thing in different notation — how much red, green, and blue. HSL restates it as hue (which colour), saturation (how vivid), and lightness (how bright), which maps far better to how people actually reason about colour.
How do I make a lighter or darker version of a brand colour?
Convert to HSL and change only the lightness. Adjusting a HEX value by hand almost always shifts the hue as a side effect, which is why hand-picked tint scales tend to look subtly off.
What does the fourth value in RGBA or an 8-digit HEX mean?
Alpha — opacity from fully transparent to fully opaque. An 8-digit HEX is just RGB plus two hex digits of alpha, so #FF0000 80 is red at roughly 50%.
Turn it into an interactive demo
createademo turns screenshots and recordings into demos your buyers click through themselves. Free plan, full editor, no credit card.