Are these official CSS colors?

Yes. Each row is an official CSS named color keyword. HSL and OKLCH on this page are calculated from the same sRGB HEX.

CSS named colors

Common Color Codes

Popular named colors with HEX, RGB, HSL, and OKLCH. Values come from the CSS Color Module keywords; HSL and OKLCH are calculated in ColorBase’s shared engine.

20 of 20

					Actions
Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)	oklch(0 0 0)	Open
Blue	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)	oklch(0.452 0.3132 264.04)	Open
Brown	#A52A2A	rgb(165, 42, 42)	hsl(0, 59%, 41%)	oklch(0.4806 0.1596 25.57)	Open
Cyan	#00FFFF	rgb(0, 255, 255)	hsl(180, 100%, 50%)	oklch(0.9054 0.1545 194.77)	Open
Gold	#FFD700	rgb(255, 215, 0)	hsl(51, 100%, 50%)	oklch(0.8868 0.1822 95.32)	Open
Gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)	oklch(0.5999 0 0)	Open
Green	#008000	rgb(0, 128, 0)	hsl(120, 100%, 25%)	oklch(0.5198 0.1769 142.49)	Open
Lime	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)	oklch(0.8664 0.2948 142.5)	Open
Magenta	#FF00FF	rgb(255, 0, 255)	hsl(300, 100%, 50%)	oklch(0.7017 0.3225 328.36)	Open
Maroon	#800000	rgb(128, 0, 0)	hsl(0, 100%, 25%)	oklch(0.3767 0.1546 29.23)	Open
Navy	#000080	rgb(0, 0, 128)	hsl(240, 100%, 25%)	oklch(0.2711 0.1879 264.04)	Open
Olive	#808000	rgb(128, 128, 0)	hsl(60, 100%, 25%)	oklch(0.5807 0.1266 109.77)	Open
Orange	#FFA500	rgb(255, 165, 0)	hsl(39, 100%, 50%)	oklch(0.7927 0.171 70.68)	Open
Pink	#FFC0CB	rgb(255, 192, 203)	hsl(350, 100%, 88%)	oklch(0.8677 0.0736 7.11)	Open
Purple	#800080	rgb(128, 0, 128)	hsl(300, 100%, 25%)	oklch(0.4209 0.1935 328.36)	Open
Red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	oklch(0.628 0.2577 29.22)	Open
Silver	#C0C0C0	rgb(192, 192, 192)	hsl(0, 0%, 75%)	oklch(0.8078 0 0)	Open
Teal	#008080	rgb(0, 128, 128)	hsl(180, 100%, 25%)	oklch(0.5431 0.0927 194.76)	Open
White	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)	oklch(1 0 0)	Open
Yellow	#FFFF00	rgb(255, 255, 0)	hsl(60, 100%, 50%)	oklch(0.968 0.211 109.77)	Open

Black

NameBlack

HEX#000000

RGBrgb(0, 0, 0)

HSLhsl(0, 0%, 0%)

OKLCHoklch(0 0 0)

Blue

NameBlue

HEX#0000FF

RGBrgb(0, 0, 255)

HSLhsl(240, 100%, 50%)

OKLCHoklch(0.452 0.3132 264.04)

Brown

NameBrown

HEX#A52A2A

RGBrgb(165, 42, 42)

HSLhsl(0, 59%, 41%)

OKLCHoklch(0.4806 0.1596 25.57)

Cyan

NameCyan

HEX#00FFFF

RGBrgb(0, 255, 255)

HSLhsl(180, 100%, 50%)

OKLCHoklch(0.9054 0.1545 194.77)

Gold

NameGold

HEX#FFD700

RGBrgb(255, 215, 0)

HSLhsl(51, 100%, 50%)

OKLCHoklch(0.8868 0.1822 95.32)

Gray

NameGray

HEX#808080

RGBrgb(128, 128, 128)

HSLhsl(0, 0%, 50%)

OKLCHoklch(0.5999 0 0)

Green

NameGreen

HEX#008000

RGBrgb(0, 128, 0)

HSLhsl(120, 100%, 25%)

OKLCHoklch(0.5198 0.1769 142.49)

Lime

NameLime

HEX#00FF00

RGBrgb(0, 255, 0)

HSLhsl(120, 100%, 50%)

OKLCHoklch(0.8664 0.2948 142.5)

Magenta

NameMagenta

HEX#FF00FF

RGBrgb(255, 0, 255)

HSLhsl(300, 100%, 50%)

OKLCHoklch(0.7017 0.3225 328.36)

Maroon

NameMaroon

HEX#800000

RGBrgb(128, 0, 0)

HSLhsl(0, 100%, 25%)

OKLCHoklch(0.3767 0.1546 29.23)

Navy

NameNavy

HEX#000080

RGBrgb(0, 0, 128)

HSLhsl(240, 100%, 25%)

OKLCHoklch(0.2711 0.1879 264.04)

Olive

NameOlive

HEX#808000

RGBrgb(128, 128, 0)

HSLhsl(60, 100%, 25%)

OKLCHoklch(0.5807 0.1266 109.77)

Orange

NameOrange

HEX#FFA500

RGBrgb(255, 165, 0)

HSLhsl(39, 100%, 50%)

OKLCHoklch(0.7927 0.171 70.68)

Pink

NamePink

HEX#FFC0CB

RGBrgb(255, 192, 203)

HSLhsl(350, 100%, 88%)

OKLCHoklch(0.8677 0.0736 7.11)

Purple

NamePurple

HEX#800080

RGBrgb(128, 0, 128)

HSLhsl(300, 100%, 25%)

OKLCHoklch(0.4209 0.1935 328.36)

Red

NameRed

HEX#FF0000

RGBrgb(255, 0, 0)

HSLhsl(0, 100%, 50%)

OKLCHoklch(0.628 0.2577 29.22)

Silver

NameSilver

HEX#C0C0C0

RGBrgb(192, 192, 192)

HSLhsl(0, 0%, 75%)

OKLCHoklch(0.8078 0 0)

Teal

NameTeal

HEX#008080

RGBrgb(0, 128, 128)

HSLhsl(180, 100%, 25%)

OKLCHoklch(0.5431 0.0927 194.76)

White

NameWhite

HEX#FFFFFF

RGBrgb(255, 255, 255)

HSLhsl(0, 0%, 100%)

OKLCHoklch(1 0 0)

Yellow

NameYellow

HEX#FFFF00

RGBrgb(255, 255, 0)

HSLhsl(60, 100%, 50%)

OKLCHoklch(0.968 0.211 109.77)

HEX

Represents: A compact RGB encoding written as #RRGGBB.
Useful for: CSS, design tools, URLs, and copy-paste interchange.
Advantages: Short, unambiguous, and universally supported.
Limits: Hard to edit by hue or lightness; alpha needs 8-digit HEX or a different syntax.
Developer use: Store tokens and share colors. Convert to HSL or OKLCH when you need to mix.

RGB

Represents: Red, green, and blue channel intensities on a 0–255 display grid.
Useful for: Canvas, images, and any API that talks in device pixels.
Advantages: Maps 1:1 to 24-bit screens; RGBA adds transparency.
Limits: Equal RGB steps are not equal perceived steps.
Developer use: Image processing and `rgb()` / `rgba()` CSS when you need alpha.

HSL

Represents: Hue, saturation, and lightness — a cylindrical model around RGB.
Useful for: Hover states, theme tweaks, and teaching color relationships.
Advantages: Keep hue, change lightness. Easy mental model.
Limits: Lightness is not perceptually uniform; yellow and blue at 50% do not look equally bright.
Developer use: Author palettes, then export HEX for tools that still want it.

OKLCH

Represents: Lightness, chroma, and hue in the OKLab polar space.
Useful for: Modern CSS, perceptual shade scales, and mixing.
Advantages: More even lightness than HSL; good for 50–950 ramps.
Limits: Wide-gamut values can be out of sRGB; browsers gamut-map them.
Developer use: `oklch()` in CSS when the team already ships modern browsers.

Color

Actions

Black

#000000

rgb(0, 0, 0)

hsl(0, 0%, 0%)

oklch(0 0 0)

Open

Blue

#0000FF

rgb(0, 0, 255)

hsl(240, 100%, 50%)

oklch(0.452 0.3132 264.04)

Open

Brown

#A52A2A

rgb(165, 42, 42)

hsl(0, 59%, 41%)

oklch(0.4806 0.1596 25.57)

Open

Cyan

#00FFFF

rgb(0, 255, 255)

hsl(180, 100%, 50%)

oklch(0.9054 0.1545 194.77)

Open

Gold

#FFD700

rgb(255, 215, 0)

hsl(51, 100%, 50%)

oklch(0.8868 0.1822 95.32)

Open

Gray

#808080

rgb(128, 128, 128)

hsl(0, 0%, 50%)

oklch(0.5999 0 0)

Open

Green

#008000

rgb(0, 128, 0)

hsl(120, 100%, 25%)

oklch(0.5198 0.1769 142.49)

Open

Lime

#00FF00

rgb(0, 255, 0)

hsl(120, 100%, 50%)

oklch(0.8664 0.2948 142.5)

Open

Magenta

#FF00FF

rgb(255, 0, 255)

hsl(300, 100%, 50%)

oklch(0.7017 0.3225 328.36)

Open

Maroon

#800000

rgb(128, 0, 0)

hsl(0, 100%, 25%)

oklch(0.3767 0.1546 29.23)

Open

Navy

#000080

rgb(0, 0, 128)

hsl(240, 100%, 25%)

oklch(0.2711 0.1879 264.04)

Open

Olive

#808000

rgb(128, 128, 0)

hsl(60, 100%, 25%)

oklch(0.5807 0.1266 109.77)

Open

Orange

#FFA500

rgb(255, 165, 0)

hsl(39, 100%, 50%)

oklch(0.7927 0.171 70.68)

Open

Pink

#FFC0CB

rgb(255, 192, 203)

hsl(350, 100%, 88%)

oklch(0.8677 0.0736 7.11)

Open

Purple

#800080

rgb(128, 0, 128)

hsl(300, 100%, 25%)

oklch(0.4209 0.1935 328.36)

Open

Red

#FF0000

rgb(255, 0, 0)

hsl(0, 100%, 50%)

oklch(0.628 0.2577 29.22)

Open

Silver

#C0C0C0

rgb(192, 192, 192)

hsl(0, 0%, 75%)

oklch(0.8078 0 0)

Open

Teal

#008080

rgb(0, 128, 128)

hsl(180, 100%, 25%)

oklch(0.5431 0.0927 194.76)

Open

White

#FFFFFF

rgb(255, 255, 255)

hsl(0, 0%, 100%)

oklch(1 0 0)

Open

Yellow

#FFFF00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

oklch(0.968 0.211 109.77)

Open

HEX

Represents

A compact RGB encoding written as #RRGGBB.

Useful for

CSS, design tools, URLs, and copy-paste interchange.

Advantages

Short, unambiguous, and universally supported.

Limits

Hard to edit by hue or lightness; alpha needs 8-digit HEX or a different syntax.

Developer use

Store tokens and share colors. Convert to HSL or OKLCH when you need to mix.

RGB

Represents

Red, green, and blue channel intensities on a 0–255 display grid.

Useful for

Canvas, images, and any API that talks in device pixels.

Advantages

Maps 1:1 to 24-bit screens; RGBA adds transparency.

Limits

Equal RGB steps are not equal perceived steps.

Developer use

Image processing and `rgb()` / `rgba()` CSS when you need alpha.

HSL

Represents

Hue, saturation, and lightness — a cylindrical model around RGB.

Useful for

Hover states, theme tweaks, and teaching color relationships.

Advantages

Keep hue, change lightness. Easy mental model.

Limits

Lightness is not perceptually uniform; yellow and blue at 50% do not look equally bright.

Developer use

Author palettes, then export HEX for tools that still want it.

OKLCH

Represents

Lightness, chroma, and hue in the OKLab polar space.

Useful for

Modern CSS, perceptual shade scales, and mixing.

Advantages

More even lightness than HSL; good for 50–950 ramps.

Limits

Wide-gamut values can be out of sRGB; browsers gamut-map them.

Developer use

`oklch()` in CSS when the team already ships modern browsers.