Color Converter — HEX, RGB & HSL

Color Converter — Free color converter. Convert any color between HEX, RGB, and HSL formats instantly. Type a hex code, RGB values, or HSL values — all three update in real time. Includes a live color preview and common color swatches. No signup required.

Type in any format — all three update instantly

—HEX

—RGB

—HSL

HEX

RGB

HSL

Quick swatches

HEX, RGB, and HSL explained

Every color on a screen can be expressed in multiple formats. HEX, RGB, and HSL all describe the same colors — they just use different notation. Knowing all three makes you more effective in CSS, design tools, and anywhere color values appear.

Format	Example	Best for
HEX	#FF5733	Compact notation, copy-pasting color codes
RGB	rgb(255, 87, 51)	Combining with opacity (rgba), programmatic manipulation
HSL	hsl(11, 100%, 60%)	Creating color scales, reasoning about shades

How to read HSL

HSL stands for Hue, Saturation, Lightness. It is more intuitive than RGB for color design because each property controls something visually obvious:

Hue (0–360°) — the color itself. 0° = red, 120° = green, 240° = blue.
Saturation (0–100%) — color intensity. 0% is grey, 100% is full color.
Lightness (0–100%) — brightness. 0% is black, 50% is normal, 100% is white.

This makes HSL excellent for creating tints and shades: keep H and S constant and vary L to get lighter or darker versions of the same color.

Common web colors

Color	HEX	RGB	HSL
Red	#FF0000	255, 0, 0	0°, 100%, 50%
Green	#00FF00	0, 255, 0	120°, 100%, 50%
Blue	#0000FF	0, 0, 255	240°, 100%, 50%
White	#FFFFFF	255, 255, 255	0°, 0%, 100%
Black	#000000	0, 0, 0	0°, 0%, 0%
Coral	#FF5733	255, 87, 51	11°, 100%, 60%
Teal	#008080	0, 128, 128	180°, 100%, 25%

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

HEX (#FF5733) represents a color as three hexadecimal byte values — one each for red, green, and blue. RGB (rgb(255, 87, 51)) expresses the same values as decimal numbers 0–255. HSL (hsl(11, 100%, 60%)) uses Hue (color wheel position, 0–360°), Saturation (intensity, 0–100%), and Lightness (brightness, 0–100%). All three describe the same colors — they are just different ways to express them.

Which format should I use in CSS?

All three work in CSS. HEX is the most compact and widely used for static colors. RGB is useful when you need to set opacity with rgba(). HSL is easiest to reason about when creating color scales — lightening or darkening a color just means adjusting the L value.

What is hue in HSL?

Hue is the position on a color wheel, measured in degrees 0–360. Red is at 0° (and 360°), green at 120°, blue at 240°. Colors between those points are blends — yellow is around 60°, cyan at 180°, magenta at 300°.

What does the # in hex colors mean?

The # sign just indicates that what follows is a hexadecimal number. Each pair of hex digits (00–FF) represents one color channel: red, green, blue. FF in hex equals 255 in decimal — the maximum value for a channel.