CSS Color Names

All 148 CSS named colors (CSS Level 1–4 + X11) with hex codes, RGB values, and visual swatches. Click to copy.

#cd5c5c

indianred

hsl(0,53%,58%)

#f08080

lightcoral

hsl(0,79%,72%)

#fa8072

salmon

hsl(6,93%,71%)

#e9967a

darksalmon

hsl(15,72%,70%)

#dc143c

crimson

hsl(348,83%,47%)

#ff0000

red

hsl(0,100%,50%)

#b22222

firebrick

hsl(0,68%,42%)

#8b0000

darkred

hsl(0,100%,27%)

#ffc0cb

pink

hsl(350,100%,88%)

#ffb6c1

lightpink

hsl(351,100%,86%)

#ff69b4

hotpink

hsl(330,100%,71%)

#ff1493

deeppink

hsl(328,100%,54%)

#c71585

mediumvioletred

hsl(322,81%,43%)

#db7093

palevioletred

hsl(340,60%,65%)

#ffa07a

lightsalmon

hsl(17,100%,74%)

#ff7f50

coral

hsl(16,100%,66%)

#ff6347

tomato

hsl(9,100%,64%)

#ff4500

orangered

hsl(16,100%,50%)

#ff8c00

darkorange

hsl(33,100%,50%)

#ffa500

orange

hsl(39,100%,50%)

#ffd700

gold

hsl(51,100%,50%)

#ffff00

yellow

hsl(60,100%,50%)

#ffffe0

lightyellow

hsl(60,100%,94%)

#fffacd

lemonchiffon

hsl(54,100%,90%)

#fafad2

lightgoldenrodyellow

hsl(60,80%,90%)

#ffefd5

papayawhip

hsl(37,100%,92%)

#ffe4b5

moccasin

hsl(38,100%,85%)

#ffdab9

peachpuff

hsl(28,100%,86%)

#eee8aa

palegoldenrod

hsl(55,67%,80%)

#f0e68c

khaki

hsl(54,77%,75%)

#bdb76b

darkkhaki

hsl(56,38%,58%)

#adff2f

greenyellow

hsl(84,100%,59%)

#7fff00

chartreuse

hsl(90,100%,50%)

#7cfc00

lawngreen

hsl(90,100%,49%)

#00ff00

lime

hsl(120,100%,50%)

#32cd32

limegreen

hsl(120,61%,50%)

#98fb98

palegreen

hsl(120,93%,79%)

#90ee90

lightgreen

hsl(120,73%,75%)

#00fa9a

mediumspringgreen

hsl(157,100%,49%)

#00ff7f

springgreen

hsl(150,100%,50%)

#3cb371

mediumseagreen

hsl(147,50%,47%)

#2e8b57

seagreen

hsl(146,50%,36%)

#228b22

forestgreen

hsl(120,61%,34%)

#008000

green

hsl(120,100%,25%)

#006400

darkgreen

hsl(120,100%,20%)

#9acd32

yellowgreen

hsl(80,61%,50%)

#6b8e23

olivedrab

hsl(80,60%,35%)

#808000

olive

hsl(60,100%,25%)

#556b2f

darkolivegreen

hsl(82,39%,30%)

#66cdaa

mediumaquamarine

hsl(160,51%,60%)

#8fbc8f

darkseagreen

hsl(120,25%,65%)

#20b2aa

lightseagreen

hsl(177,70%,41%)

#008b8b

darkcyan

hsl(180,100%,27%)

#008080

teal

hsl(180,100%,25%)

#00ffff

aqua

hsl(180,100%,50%)

#00ffff

cyan

hsl(180,100%,50%)

#e0ffff

lightcyan

hsl(180,100%,94%)

#afeeee

paleturquoise

hsl(180,65%,81%)

#7fffd4

aquamarine

hsl(160,100%,75%)

#40e0d0

turquoise

hsl(174,72%,56%)

#48d1cc

mediumturquoise

hsl(178,60%,55%)

#00ced1

darkturquoise

hsl(181,100%,41%)

#5f9ea0

cadetblue

hsl(182,25%,50%)

#4682b4

steelblue

hsl(207,44%,49%)

#b0c4de

lightsteelblue

hsl(214,41%,78%)

#b0e0e6

powderblue

hsl(187,52%,80%)

#add8e6

lightblue

hsl(195,53%,79%)

#87ceeb

skyblue

hsl(197,71%,73%)

#87cefa

lightskyblue

hsl(203,92%,75%)

#00bfff

deepskyblue

hsl(195,100%,50%)

#1e90ff

dodgerblue

hsl(210,100%,56%)

#6495ed

cornflowerblue

hsl(219,79%,66%)

#7b68ee

mediumslateblue

hsl(249,80%,67%)

#4169e1

royalblue

hsl(225,73%,57%)

#0000ff

blue

hsl(240,100%,50%)

#0000cd

mediumblue

hsl(240,100%,40%)

#00008b

darkblue

hsl(240,100%,27%)

#000080

navy

hsl(240,100%,25%)

#191970

midnightblue

hsl(240,64%,27%)

#e6e6fa

lavender

hsl(240,67%,94%)

#d8bfd8

thistle

hsl(300,24%,80%)

#dda0dd

plum

hsl(300,47%,75%)

#ee82ee

violet

hsl(300,76%,72%)

#da70d6

orchid

hsl(302,59%,65%)

#ff00ff

fuchsia

hsl(300,100%,50%)

#ff00ff

magenta

hsl(300,100%,50%)

#ba55d3

mediumorchid

hsl(288,59%,58%)

#9370db

mediumpurple

hsl(260,60%,65%)

#663399

rebeccapurple

hsl(270,50%,40%)

#8a2be2

blueviolet

hsl(271,76%,53%)

#9400d3

darkviolet

hsl(282,100%,41%)

#9932cc

darkorchid

hsl(280,61%,50%)

#8b008b

darkmagenta

hsl(300,100%,27%)

#800080

purple

hsl(300,100%,25%)

#4b0082

indigo

hsl(275,100%,25%)

#6a5acd

slateblue

hsl(248,53%,58%)

#483d8b

darkslateblue

hsl(248,39%,39%)

#fff8dc

cornsilk

hsl(48,100%,93%)

#ffebcd

blanchedalmond

hsl(36,100%,90%)

#ffe4c4

bisque

hsl(33,100%,88%)

#ffdead

navajowhite

hsl(36,100%,84%)

#f5deb3

wheat

hsl(39,77%,83%)

#deb887

burlywood

hsl(34,57%,70%)

#d2b48c

tan

hsl(34,44%,69%)

#bc8f8f

rosybrown

hsl(0,25%,65%)

#f4a460

sandybrown

hsl(28,87%,67%)

#daa520

goldenrod

hsl(43,74%,49%)

#b8860b

darkgoldenrod

hsl(43,89%,38%)

#cd853f

peru

hsl(30,59%,53%)

#d2691e

chocolate

hsl(25,75%,47%)

#8b4513

saddlebrown

hsl(25,76%,31%)

#a0522d

sienna

hsl(19,56%,40%)

#a52a2a

brown

hsl(0,59%,41%)

#800000

maroon

hsl(0,100%,25%)

#ffffff

white

hsl(0,0%,100%)

#fffafa

snow

hsl(0,100%,99%)

#f0fff0

honeydew

hsl(120,100%,97%)

#f5fffa

mintcream

hsl(150,100%,98%)

#f0ffff

azure

hsl(180,100%,97%)

#f0f8ff

aliceblue

hsl(208,100%,97%)

#f8f8ff

ghostwhite

hsl(240,100%,99%)

#f5f5f5

whitesmoke

hsl(0,0%,96%)

#fff5ee

seashell

hsl(25,100%,97%)

#f5f5dc

beige

hsl(60,56%,91%)

#fdf5e6

oldlace

hsl(39,85%,95%)

#fffaf0

floralwhite

hsl(40,100%,97%)

#fffff0

ivory

hsl(60,100%,97%)

#faebd7

antiquewhite

hsl(34,78%,91%)

#faf0e6

linen

hsl(30,67%,94%)

#fff0f5

lavenderblush

hsl(340,100%,97%)

#ffe4e1

mistyrose

hsl(6,100%,94%)

#dcdcdc

gainsboro

hsl(0,0%,86%)

#d3d3d3

lightgray

hsl(0,0%,83%)

#c0c0c0

silver

hsl(0,0%,75%)

#a9a9a9

darkgray

hsl(0,0%,66%)

#808080

gray

hsl(0,0%,50%)

#696969

dimgray

hsl(0,0%,41%)

#778899

lightslategray

hsl(210,14%,53%)

#708090

slategray

hsl(210,13%,50%)

#2f4f4f

darkslategray

hsl(180,25%,25%)

#000000

black

hsl(0,0%,0%)

Using CSS Color Names in Code

/* CSS */
.button {
  background-color: dodgerblue;
  color: white;
  border: 2px solid midnightblue;
}

/* Tailwind custom config */
colors: {
  brand: 'rebeccapurple',
}

/* JavaScript: canvas */
ctx.fillStyle = 'tomato';
ctx.strokeStyle = 'darkolivegreen';

/* SVG */
<circle fill="cornflowerblue" stroke="navy" />

/* CSS variables with named colors */
:root {
  --accent: mediumspringgreen;
  --danger: crimson;
}

CSS Color Formats Comparison

Format	Example	Best for
Named	rebeccapurple	Readability, quick prototyping
Hex	#663399	Design tools, copy/paste from Figma
RGB	rgb(102, 51, 153)	Programmatic manipulation
HSL	hsl(272, 50%, 40%)	Theming, lightness/saturation control
OKLCH	oklch(40% 0.15 305)	Perceptual uniformity, CSS Color 4

Color Converter Tool

Convert between hex, RGB, HSL, and CMYK color formats instantly.

Open Color Converter ->

Frequently Asked Questions

How many named colors does CSS support?

CSS supports 148 named colors defined in the CSS Color Level 4 specification, plus the special keyword 'transparent'. These include the 16 original HTML colors, X11/SVG colors, and additions from CSS3/4. All are supported in modern browsers.

Are CSS color names case-sensitive?

No, CSS color names are case-insensitive. 'Red', 'red', 'RED', and 'rEd' all produce the same result. However, camelCase (like 'lightBlue') is not used — the standard form is all lowercase (lightblue).

When should I use named colors vs hex codes?

Use named colors for quick prototyping and readability (e.g. 'red' is clearer than '#ff0000'). Use hex codes or RGB for precise design work where exact color values matter, or when using colors not in the named palette. HSL is often best for programmatic color manipulation.

What is the difference between CSS color names and HTML color names?

HTML originally defined 16 basic color names. CSS extended this to 141 names in CSS3, and CSS Color Level 4 added 'rebeccapurple' and standardized the full X11 color set bringing the total to 148. All HTML color names are valid CSS color names.

Using CSS Color Names in Code

/* CSS */
.button {
  background-color: dodgerblue;
  color: white;
  border: 2px solid midnightblue;
}

/* Tailwind custom config */
colors: {
  brand: 'rebeccapurple',
}

/* JavaScript: canvas */
ctx.fillStyle = 'tomato';
ctx.strokeStyle = 'darkolivegreen';

/* SVG */
<circle fill="cornflowerblue" stroke="navy" />

/* CSS variables with named colors */
:root {
  --accent: mediumspringgreen;
  --danger: crimson;
}

Format

Example

Best for

Named

rebeccapurple

Readability, quick prototyping

Hex

#663399

Design tools, copy/paste from Figma

RGB

rgb(102, 51, 153)

Programmatic manipulation

HSL

hsl(272, 50%, 40%)

Theming, lightness/saturation control

OKLCH

oklch(40% 0.15 305)

Perceptual uniformity, CSS Color 4

Frequently Asked Questions

How many named colors does CSS support?

Are CSS color names case-sensitive?

When should I use named colors vs hex codes?

What is the difference between CSS color names and HTML color names?

CSS Color Names

Using CSS Color Names in Code

CSS Color Formats Comparison

Color Converter Tool

Frequently Asked Questions

Color & design

CSS Color Names

Using CSS Color Names in Code

CSS Color Formats Comparison

Color Converter Tool

Frequently Asked Questions