HEX & RGB
The classic web formats. HEX is a compact hexadecimal notation (#ff5733), and RGB uses three 0–255 values for red, green, and blue channels. Universally supported.
Color Converter
Convert between HEX, RGB, HSL and OKLCH instantly, pick from 148 named CSS colors, and copy the code with one click.
Hue207°
Saturation44%
Lightness49%
HEX
#4682b4RGB
rgb(70, 130, 180)HSL
hsl(207, 44%, 49%)OKLCH
oklch(58.80% 0.0993 245.74)Preview
#4682B4
Sample text on the chosen colour
HSL
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Intuitive for designers — easy to tweak one dimension without touching the others.
OKLCH (modern)
A perceptually uniform color space — colors with the same lightness (L) value actually appear equally bright. The modern standard for design systems.
148 Named CSS Colors
Reds (7)
Pinks (8)
Oranges (12)
Yellows (13)
Greens (18)
#7fff00
Chartreuse
#006400
DarkGreen
#556b2f
DarkOliveGreen
#8fbc8f
DarkSeaGreen
#228b22
ForestGreen
#008000
Green
#adff2f
GreenYellow
#7cfc00
LawnGreen
#90ee90
LightGreen
#00ff00
Lime
#32cd32
LimeGreen
#3cb371
MediumSeaGreen
#00fa9a
MediumSpringGreen
#6b8e23
OliveDrab
#98fb98
PaleGreen
#2e8b57
SeaGreen
#00ff7f
SpringGreen
#9acd32
YellowGreen
Cyans (12)
Blues (17)
Purples (17)
Browns (9)
Whites (18)
Frequently asked questions
What is the difference between HEX, RGB, HSL and OKLCH?
HEX (#ff0000) and RGB (rgb(255,0,0)) describe a color by the intensity of red, green, and blue channels. HSL (hsl(0, 100%, 50%)) describes color by hue, saturation, and lightness — more intuitive for designers. OKLCH is a newer standard designed to match human perception — equal numerical differences appear equally different to the eye.
How many CSS named colors are there?
CSS Color Module Level 4 defines 148 named colors (excluding "transparent"). They range from primary colors like red, blue, and green to descriptive ones like AliceBlue, RebeccaPurple, or PapayaWhip. This page lists all 148.
How do I copy the code for a color?
Enter or pick a color, then press "Copy" next to the format you want — HEX, RGB, HSL, or OKLCH. You can also click any color in the palette to see its full breakdown.
What is a complementary color?
The complementary color is the one directly opposite on the color wheel — 180° away. Complementary pairs create the strongest contrast and are commonly used for accents and highlights.
What is OKLCH and why should I use it?
OKLCH is a modern color space (Björn Ottosson, 2020) that represents colors the way the eye perceives them. Two colors with the same "lightness" (L) value will appear equally bright — something HSL doesn't guarantee. It's supported in all modern browsers.
Is any of my data stored?
No. All conversions run entirely in your browser. No information is ever sent to a server or stored.