ColorBridge

Color Converter

Edit any format — the rest update instantly, with a live colour preview.

#4F46E5

HEX

RGB

HSL

What you entered

RGB: 79, 70, 229

1
RGB to HEX: each channel → 2-digit hex
R=79, G=70, B=229 → base 16= #4F46E5
2
Normalize RGB to a 0–1 range
(79, 70, 229) ÷ 255= (0.310, 0.275, 0.898)
3
Lightness = (max + min) ÷ 2
average of the normalized max and min channel= 59%
4
Hue and saturation from channel spread
based on which channel is largest= H=243°, S=75%

Result

HEX: #4F46E5

RGB(79, 70, 229) is #4F46E5 in hex, or HSL(243°, 75%, 59%) — three different ways of writing the exact same color.

Colours in RGB, hex and HSL

Hex is the RGB values written in base 16. HSL describes the same colour as hue, saturation and lightness.

RGB	Hex	HSL
rgb(255, 0, 0)	#FF0000	hsl(0, 100%, 50%)
rgb(0, 128, 0)	#008000	hsl(120, 100%, 25%)
rgb(0, 0, 255)	#0000FF	hsl(240, 100%, 50%)
rgb(128, 128, 128)	#808080	hsl(0, 0%, 50%)
rgb(18, 52, 86)	#123456	hsl(210, 65%, 20%)
rgb(255, 255, 255)	#FFFFFF	hsl(0, 0%, 100%)

Hex is just RGB in base 16, two digits per channel - FF is 255, 80 is 128 - so the two are the same information in different notation. HSL is genuinely different and far easier to reason about: hue is an angle on the colour wheel, so 0 is red, 120 green and 240 blue, while saturation and lightness are independent. That separation is why HSL is better for generating a palette - drop the lightness and keep hue and saturation fixed and you get a coherent darker shade, which is awkward to do by adjusting RGB values directly. Grey has zero saturation, so its hue is arbitrary and reported as 0.

When to use HSL

HSL (hue, saturation, lightness) is easier than RGB for design tasks — bump lightness to make a tint, drop saturation to mute a colour, rotate hue for related palettes.

Frequently asked questions

My designer sent me the color #2C5F8A — what are the RGB values?

R = 0x2C = 44, G = 0x5F = 95, B = 0x8A = 138. In CSS: rgb(44, 95, 138). It's a medium steel blue. Enter the hex above and all formats update simultaneously.

How do I make a color 20% lighter without changing the hue?

Switch to HSL mode — keep the H (hue) and S (saturation) the same, and increase L (lightness) by 20 percentage points. For example, hsl(210, 50%, 35%) → hsl(210, 50%, 55%). This is much harder to do intuitively in RGB.

What's the difference between RGB and HSL?

RGB defines color by mixing red, green, and blue light (how screens work). HSL defines it by hue (color wheel position), saturation (intensity), and lightness (dark to light). They describe the same colors, but HSL is more intuitive for design tasks like creating palettes and adjusting brightness.

Why do CSS and design tools use different color formats?

CSS accepts hex (#FF5500), rgb(255, 85, 0), and hsl(20, 100%, 50%) — all equivalent. Hex is compact for code; RGB matches how screens render; HSL matches how humans think about color. Use whichever is clearest for your context.