CSS Named Colors Reference

Search, filter, and copy all 148 CSS named colors with their HEX, RGB, and HSL values. Filter by 12 color families — red, orange, yellow, green, cyan, blue, purple, pink, brown, white, gray, and black. Click any copy button to copy the color name, HEX, or RGB value instantly. Fully private, 100% free, and no signup required.

Search, filter, and copy all 146 CSS named colors. Click any copy button to copy the color name, HEX, or RGB value to your clipboard instantly.

Showing 146 of 146 CSS named colors

CSS Color Level 4

#ff0000

Red

red

rgb(255, 0, 0)

hsl(0, 100%, 50%)

#8b0000

Dark Red

darkred

rgb(139, 0, 0)

hsl(0, 100%, 27%)

#b22222

Firebrick

firebrick

rgb(178, 34, 34)

hsl(0, 68%, 42%)

#dc143c

Crimson

crimson

rgb(220, 20, 60)

hsl(348, 83%, 47%)

#cd5c5c

Indian Red

indianred

rgb(205, 92, 92)

hsl(0, 53%, 58%)

#f08080

Light Coral

lightcoral

rgb(240, 128, 128)

hsl(0, 79%, 72%)

#fa8072

Salmon

salmon

rgb(250, 128, 114)

hsl(6, 93%, 71%)

#e9967a

Dark Salmon

darksalmon

rgb(233, 150, 122)

hsl(15, 72%, 70%)

#ffa07a

Light Salmon

lightsalmon

rgb(255, 160, 122)

hsl(17, 100%, 74%)

#ff6347

Tomato

tomato

rgb(255, 99, 71)

hsl(9, 100%, 64%)

#ff4500

Orange Red

orangered

rgb(255, 69, 0)

hsl(16, 100%, 50%)

#ffa500

Orange

orange

rgb(255, 165, 0)

hsl(39, 100%, 50%)

#ff8c00

Dark Orange

darkorange

rgb(255, 140, 0)

hsl(33, 100%, 50%)

#ff7f50

Coral

coral

rgb(255, 127, 80)

hsl(16, 100%, 66%)

#ffff00

Yellow

yellow

rgb(255, 255, 0)

hsl(60, 100%, 50%)

#ffd700

Gold

gold

rgb(255, 215, 0)

hsl(51, 100%, 50%)

#ffffe0

Light Yellow

lightyellow

rgb(255, 255, 224)

hsl(60, 100%, 94%)

#fffacd

Lemon Chiffon

lemonchiffon

rgb(255, 250, 205)

hsl(54, 100%, 90%)

#fafad2

Light Goldenrod Yellow

lightgoldenrodyellow

rgb(250, 250, 210)

hsl(60, 80%, 90%)

#ffefd5

Papaya Whip

papayawhip

rgb(255, 239, 213)

hsl(37, 100%, 92%)

#ffe4b5

Moccasin

moccasin

rgb(255, 228, 181)

hsl(38, 100%, 85%)

#ffdab9

Peach Puff

peachpuff

rgb(255, 218, 185)

hsl(28, 100%, 86%)

#eee8aa

Pale Goldenrod

palegoldenrod

rgb(238, 232, 170)

hsl(55, 67%, 80%)

#f0e68c

Khaki

khaki

rgb(240, 230, 140)

hsl(54, 77%, 75%)

#bdb76b

Dark Khaki

darkkhaki

rgb(189, 183, 107)

hsl(56, 38%, 58%)

#008000

Green

green

rgb(0, 128, 0)

hsl(120, 100%, 25%)

#006400

Dark Green

darkgreen

rgb(0, 100, 0)

hsl(120, 100%, 20%)

#00ff00

Lime

lime

rgb(0, 255, 0)

hsl(120, 100%, 50%)

#32cd32

Lime Green

limegreen

rgb(50, 205, 50)

hsl(120, 61%, 50%)

#228b22

Forest Green

forestgreen

rgb(34, 139, 34)

hsl(120, 61%, 34%)

#2e8b57

Sea Green

seagreen

rgb(46, 139, 87)

hsl(146, 50%, 36%)

#8fbc8f

Dark Sea Green

darkseagreen

rgb(143, 188, 143)

hsl(120, 25%, 65%)

#3cb371

Medium Sea Green

mediumseagreen

rgb(60, 179, 113)

hsl(147, 50%, 47%)

#20b2aa

Light Sea Green

lightseagreen

rgb(32, 178, 170)

hsl(177, 70%, 41%)

#00ff7f

Spring Green

springgreen

rgb(0, 255, 127)

hsl(150, 100%, 50%)

#00fa9a

Medium Spring Green

mediumspringgreen

rgb(0, 250, 154)

hsl(157, 100%, 49%)

#adff2f

Green Yellow

greenyellow

rgb(173, 255, 47)

hsl(84, 100%, 59%)

#7fff00

Chartreuse

chartreuse

rgb(127, 255, 0)

hsl(90, 100%, 50%)

#7cfc00

Lawn Green

lawngreen

rgb(124, 252, 0)

hsl(90, 100%, 49%)

#9acd32

Yellow Green

yellowgreen

rgb(154, 205, 50)

hsl(80, 61%, 50%)

#6b8e23

Olive Drab

olivedrab

rgb(107, 142, 35)

hsl(80, 60%, 35%)

#808000

Olive

olive

rgb(128, 128, 0)

hsl(60, 100%, 25%)

#556b2f

Dark Olive Green

darkolivegreen

rgb(85, 107, 47)

hsl(82, 39%, 30%)

#98fb98

Pale Green

palegreen

rgb(152, 251, 152)

hsl(120, 93%, 79%)

#90ee90

Light Green

lightgreen

rgb(144, 238, 144)

hsl(120, 73%, 75%)

#66cdaa

Medium Aquamarine

mediumaquamarine

rgb(102, 205, 170)

hsl(160, 51%, 60%)

#00ffff

Cyan

cyan

rgb(0, 255, 255)

hsl(180, 100%, 50%)

#00ffff

Aqua

aqua

rgb(0, 255, 255)

hsl(180, 100%, 50%)

#008b8b

Dark Cyan

darkcyan

rgb(0, 139, 139)

hsl(180, 100%, 27%)

#008080

Teal

teal

rgb(0, 128, 128)

hsl(180, 100%, 25%)

#7fffd4

Aquamarine

aquamarine

rgb(127, 255, 212)

hsl(160, 100%, 75%)

#40e0d0

Turquoise

turquoise

rgb(64, 224, 208)

hsl(174, 72%, 56%)

#48d1cc

Medium Turquoise

mediumturquoise

rgb(72, 209, 204)

hsl(178, 60%, 55%)

#00ced1

Dark Turquoise

darkturquoise

rgb(0, 206, 209)

hsl(181, 100%, 41%)

#e0ffff

Light Cyan

lightcyan

rgb(224, 255, 255)

hsl(180, 100%, 94%)

#afeeee

Pale Turquoise

paleturquoise

rgb(175, 238, 238)

hsl(180, 65%, 81%)

#b0e0e6

Powder Blue

powderblue

rgb(176, 224, 230)

hsl(187, 52%, 80%)

#add8e6

Light Blue

lightblue

rgb(173, 216, 230)

hsl(195, 53%, 79%)

#0000ff

Blue

blue

rgb(0, 0, 255)

hsl(240, 100%, 50%)

#00008b

Dark Blue

darkblue

rgb(0, 0, 139)

hsl(240, 100%, 27%)

#000080

Navy

navy

rgb(0, 0, 128)

hsl(240, 100%, 25%)

#0000cd

Medium Blue

mediumblue

rgb(0, 0, 205)

hsl(240, 100%, 40%)

#4169e1

Royal Blue

royalblue

rgb(65, 105, 225)

hsl(225, 73%, 57%)

#6495ed

Cornflower Blue

cornflowerblue

rgb(100, 149, 237)

hsl(219, 79%, 66%)

#1e90ff

Dodger Blue

dodgerblue

rgb(30, 144, 255)

hsl(210, 100%, 56%)

#00bfff

Deep Sky Blue

deepskyblue

rgb(0, 191, 255)

hsl(195, 100%, 50%)

#87ceeb

Sky Blue

skyblue

rgb(135, 206, 235)

hsl(197, 71%, 73%)

#87cefa

Light Sky Blue

lightskyblue

rgb(135, 206, 250)

hsl(203, 92%, 75%)

#4682b4

Steel Blue

steelblue

rgb(70, 130, 180)

hsl(207, 44%, 49%)

#b0c4de

Light Steel Blue

lightsteelblue

rgb(176, 196, 222)

hsl(214, 41%, 78%)

#5f9ea0

Cadet Blue

cadetblue

rgb(95, 158, 160)

hsl(182, 25%, 50%)

#191970

Midnight Blue

midnightblue

rgb(25, 25, 112)

hsl(240, 64%, 27%)

#f0f8ff

Alice Blue

aliceblue

rgb(240, 248, 255)

hsl(208, 100%, 97%)

#e6e6fa

Lavender

lavender

rgb(230, 230, 250)

hsl(240, 67%, 94%)

#f8f8ff

Ghost White

ghostwhite

rgb(248, 248, 255)

hsl(240, 100%, 99%)

#f0ffff

Azure

azure

rgb(240, 255, 255)

hsl(180, 100%, 97%)

#800080

Purple

purple

rgb(128, 0, 128)

hsl(300, 100%, 25%)

#9400d3

Dark Violet

darkviolet

rgb(148, 0, 211)

hsl(282, 100%, 41%)

#9932cc

Dark Orchid

darkorchid

rgb(153, 50, 204)

hsl(280, 61%, 50%)

#8b008b

Dark Magenta

darkmagenta

rgb(139, 0, 139)

hsl(300, 100%, 27%)

#8a2be2

Blue Violet

blueviolet

rgb(138, 43, 226)

hsl(271, 76%, 53%)

#4b0082

Indigo

indigo

rgb(75, 0, 130)

hsl(275, 100%, 25%)

#6a5acd

Slate Blue

slateblue

rgb(106, 90, 205)

hsl(248, 53%, 58%)

#7b68ee

Medium Slate Blue

mediumslateblue

rgb(123, 104, 238)

hsl(249, 80%, 67%)

#483d8b

Dark Slate Blue

darkslateblue

rgb(72, 61, 139)

hsl(248, 39%, 39%)

#9370db

Medium Purple

mediumpurple

rgb(147, 112, 219)

hsl(260, 60%, 65%)

#663399

Rebecca Purple

rebeccapurple

rgb(102, 51, 153)

hsl(270, 50%, 40%)

#ee82ee

Violet

violet

rgb(238, 130, 238)

hsl(300, 76%, 72%)

#da70d6

Orchid

orchid

rgb(218, 112, 214)

hsl(302, 59%, 65%)

#ba55d3

Medium Orchid

mediumorchid

rgb(186, 85, 211)

hsl(288, 59%, 58%)

#dda0dd

Plum

plum

rgb(221, 160, 221)

hsl(300, 47%, 75%)

#d8bfd8

Thistle

thistle

rgb(216, 191, 216)

hsl(300, 24%, 80%)

#fff0f5

Lavender Blush

lavenderblush

rgb(255, 240, 245)

hsl(340, 100%, 97%)

#ff00ff

Magenta

magenta

rgb(255, 0, 255)

hsl(300, 100%, 50%)

#ff00ff

Fuchsia

fuchsia

rgb(255, 0, 255)

hsl(300, 100%, 50%)

#ff1493

Deep Pink

deeppink

rgb(255, 20, 147)

hsl(328, 100%, 54%)

#ff69b4

Hot Pink

hotpink

rgb(255, 105, 180)

hsl(330, 100%, 71%)

#ffc0cb

Pink

pink

rgb(255, 192, 203)

hsl(350, 100%, 88%)

#ffb6c1

Light Pink

lightpink

rgb(255, 182, 193)

hsl(351, 100%, 86%)

#db7093

Pale Violet Red

palevioletred

rgb(219, 112, 147)

hsl(340, 60%, 65%)

#c71585

Medium Violet Red

mediumvioletred

rgb(199, 21, 133)

hsl(322, 81%, 43%)

#ffe4e1

Misty Rose

mistyrose

rgb(255, 228, 225)

hsl(6, 100%, 94%)

#a52a2a

Brown

brown

rgb(165, 42, 42)

hsl(0, 59%, 41%)

#8b4513

Saddle Brown

saddlebrown

rgb(139, 69, 19)

hsl(25, 76%, 31%)

#a0522d

Sienna

sienna

rgb(160, 82, 45)

hsl(19, 56%, 40%)

#d2691e

Chocolate

chocolate

rgb(210, 105, 30)

hsl(25, 75%, 47%)

#cd853f

Peru

peru

rgb(205, 133, 63)

hsl(30, 59%, 53%)

#f4a460

Sandy Brown

sandybrown

rgb(244, 164, 96)

hsl(28, 87%, 67%)

#deb887

Burlywood

burlywood

rgb(222, 184, 135)

hsl(34, 57%, 70%)

#d2b48c

Tan

tan

rgb(210, 180, 140)

hsl(34, 44%, 69%)

#bc8f8f

Rosy Brown

rosybrown

rgb(188, 143, 143)

hsl(0, 25%, 65%)

#800000

Maroon

maroon

rgb(128, 0, 0)

hsl(0, 100%, 25%)

#f5deb3

Wheat

wheat

rgb(245, 222, 179)

hsl(39, 77%, 83%)

#ffdead

Navajo White

navajowhite

rgb(255, 222, 173)

hsl(36, 100%, 84%)

#ffe4c4

Bisque

bisque

rgb(255, 228, 196)

hsl(33, 100%, 88%)

#ffebcd

Blanched Almond

blanchedalmond

rgb(255, 235, 205)

hsl(36, 100%, 90%)

#fff8dc

Cornsilk

cornsilk

rgb(255, 248, 220)

hsl(48, 100%, 93%)

#fdf5e6

Old Lace

oldlace

rgb(253, 245, 230)

hsl(39, 85%, 95%)

#faf0e6

Linen

linen

rgb(250, 240, 230)

hsl(30, 67%, 94%)

#faebd7

Antique White

antiquewhite

rgb(250, 235, 215)

hsl(34, 78%, 91%)

#ffffff

White

white

rgb(255, 255, 255)

hsl(0, 0%, 100%)

#fffafa

Snow

snow

rgb(255, 250, 250)

hsl(0, 100%, 99%)

#f0fff0

Honeydew

honeydew

rgb(240, 255, 240)

hsl(120, 100%, 97%)

#f5fffa

Mint Cream

mintcream

rgb(245, 255, 250)

hsl(150, 100%, 98%)

#fffff0

Ivory

ivory

rgb(255, 255, 240)

hsl(60, 100%, 97%)

#fffaf0

Floral White

floralwhite

rgb(255, 250, 240)

hsl(40, 100%, 97%)

#fff5ee

Seashell

seashell

rgb(255, 245, 238)

hsl(25, 100%, 97%)

#f5f5dc

Beige

beige

rgb(245, 245, 220)

hsl(60, 56%, 91%)

#f5f5f5

White Smoke

whitesmoke

rgb(245, 245, 245)

hsl(0, 0%, 96%)

#808080

Gray

gray

rgb(128, 128, 128)

hsl(0, 0%, 50%)

#808080

Grey

grey

rgb(128, 128, 128)

hsl(0, 0%, 50%)

#a9a9a9

Dark Gray

darkgray

rgb(169, 169, 169)

hsl(0, 0%, 66%)

#a9a9a9

Dark Grey

darkgrey

rgb(169, 169, 169)

hsl(0, 0%, 66%)

#d3d3d3

Light Gray

lightgray

rgb(211, 211, 211)

hsl(0, 0%, 83%)

#d3d3d3

Light Grey

lightgrey

rgb(211, 211, 211)

hsl(0, 0%, 83%)

#c0c0c0

Silver

silver

rgb(192, 192, 192)

hsl(0, 0%, 75%)

#dcdcdc

Gainsboro

gainsboro

rgb(220, 220, 220)

hsl(0, 0%, 86%)

#696969

Dim Gray

dimgray

rgb(105, 105, 105)

hsl(0, 0%, 41%)

#696969

Dim Grey

dimgrey

rgb(105, 105, 105)

hsl(0, 0%, 41%)

#708090

Slate Gray

slategray

rgb(112, 128, 144)

hsl(210, 13%, 50%)

#708090

Slate Grey

slategrey

rgb(112, 128, 144)

hsl(210, 13%, 50%)

#778899

Light Slate Gray

lightslategray

rgb(119, 136, 153)

hsl(210, 14%, 53%)

#778899

Light Slate Grey

lightslategrey

rgb(119, 136, 153)

hsl(210, 14%, 53%)

#2f4f4f

Dark Slate Gray

darkslategray

rgb(47, 79, 79)

hsl(180, 25%, 25%)

#2f4f4f

Dark Slate Grey

darkslategrey

rgb(47, 79, 79)

hsl(180, 25%, 25%)

#000000

Black

black

rgb(0, 0, 0)

hsl(0, 0%, 0%)

Why Use Our CSS Named Colors Reference?

Instant Search Across All 148 Colors

The CSS named colors reference searches across color names, HEX values, RGB values, and HSL values in real time. Find any color instantly by typing its name, hex code, or RGB value.

Filter by Color Family

Filter the CSS named colors reference by 12 color families — red, orange, yellow, green, cyan, blue, purple, pink, brown, white, gray, and black. Quickly browse all colors in a specific hue range.

100% Private — No Upload

The CSS named colors reference runs entirely in your browser. No data is ever sent to any server — safe for offline use and private design work.

Free & No Limits

Browse and copy unlimited CSS named colors with no signup, no subscription, and no usage caps. The CSS named colors reference is completely free forever with no ads blocking the interface.

Common Use Cases for CSS Named Colors Reference

CSS & HTML Development

Frontend developers use the CSS named colors reference to quickly look up color names for use in CSS stylesheets and HTML attributes. Copy the exact CSS color name, HEX, or RGB value with one click.

Design & Prototyping

Designers use the CSS named colors reference to find browser-safe named colors for mockups and prototypes. The color family filter makes it easy to browse all blues, greens, or reds at once.

Accessibility & Contrast Checking

Accessibility specialists use the CSS named colors reference to identify named colors and then check their contrast ratios. The HEX and RGB values can be pasted directly into contrast checking tools.

Learning CSS & Web Design

Students and beginners use the CSS named colors reference to learn which color names are available in CSS. Seeing the actual color swatch alongside the name makes it easy to remember which name maps to which colour.

Email Template Development

Email developers use the CSS named colors reference to find named colors that are safe to use in HTML email clients. Named colors have broad support across email clients that may not support modern CSS color functions.

Design System Documentation

Design system teams use the CSS named colors reference to document which CSS named colors are used in their system and to find the HEX equivalents for design tokens and Figma colour styles.

Understanding CSS Named Colors

What are CSS Named Colors?

CSS named colors are predefined color keywords that can be used directly in CSS without specifying a HEX, RGB, or HSL value. For example, color: cornflowerblue is equivalent to color: #6495ed. The CSS specification defines 148 named colors, ranging from basic colors like red and blue to more descriptive names like rebeccapurple and papayawhip. Our CSS named colors reference lists all 148 with their HEX, RGB, and HSL equivalents.

How Our CSS Named Colors Reference Works

Search by name, HEX, or RGB:Type any part of a color name (e.g. “blue”, “coral”), a HEX value (e.g. “#ff7f50”), or an RGB value to filter the reference instantly.
Filter by color family: Click any family chip — Red, Orange, Yellow, Green, Cyan, Blue, Purple, Pink, Brown, White, Gray, or Black — to show only colors in that family. Combine with search for precise filtering.
Copy in one click: Each color card has three copy buttons — Name, HEX, and RGB. Click any button to copy that value to your clipboard instantly. All processing runs locally in your browser.

What the CSS Named Colors Reference Includes

CSS color name: The exact keyword to use in CSS (e.g. cornflowerblue).
HEX value: The 6-digit hexadecimal equivalent (e.g. #6495ed).
RGB value: The red, green, blue channel values (e.g. rgb(100, 149, 237)).
HSL value: The hue, saturation, lightness values (e.g. hsl(219, 79%, 66%)).

Notes on Duplicate Colors

Some CSS named colors are exact duplicates of each other. For example, aqua and cyan both map to #00ffff, and fuchsia and magenta both map to #ff00ff. Similarly, gray and grey (and their variants) are identical. The CSS named colors reference includes all 148 official names, including these duplicates, since both spellings are valid CSS.

Related Color Tools

Color Picker & Converter

Visual colour picker with HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK ↔ HWB conversion and WCAG contrast checker.

Color Contrast Checker

Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components.

Color Gradient Generator

Build CSS linear, radial, and conic gradients visually with up to 10 colour stops. Get instant CSS output.

Color Palette Generator

Generate harmonious colour palettes from any base colour using 7 harmony rules. Export as CSS variables or Tailwind config.

Frequently Asked Questions About CSS Named Colors Reference

The CSS named colors reference is a searchable, filterable list of all 148 CSS named colors with their HEX, RGB, and HSL values. You can search by color name, HEX, or RGB value, filter by color family, and copy any value with one click. Everything runs in your browser with no data sent to a server.

The CSS Color Level 4 specification defines 148 named colors. This includes the 16 basic colors from HTML 4.01, the 140 X11 colors adopted by CSS2.1, and the special color "rebeccapurple" added in CSS Color Level 4 in honor of Rebecca Meyer.

Yes. All 148 CSS named colors are supported in every modern browser including Chrome, Firefox, Safari, Edge, and Opera. They are also supported in older browsers back to IE9. Named colors are one of the most universally supported CSS features.

Yes. The CSS named colors reference is 100% free with no signup required, no premium features, and no usage limits. Browse and copy unlimited colors without any restrictions or hidden costs.

The CSS specification includes both American English (gray) and British English (grey) spellings for several colors, and both are valid CSS. Similarly, "aqua" and "cyan" are identical colors with different names, as are "fuchsia" and "magenta". The reference includes all 148 official names including these duplicates.

Rebeccapurple (#663399) was added to the CSS Color Level 4 specification in 2014 in honor of Rebecca Alison Meyer, the daughter of web standards advocate Eric Meyer, who passed away on her sixth birthday. It is the only CSS named color named after a specific person.

Tailwind CSS does not use CSS named colors in its default palette — it uses its own color system with numeric scales (e.g. blue-500). However, you can use CSS named colors in Tailwind arbitrary values: text-[cornflowerblue] or bg-[coral]. You can also add named colors to your tailwind.config.js theme.

No. CSS color names are case-insensitive. "CornflowerBlue", "cornflowerblue", and "CORNFLOWERBLUE" are all valid and equivalent. The conventional style is all lowercase, which is what the CSS named colors reference displays.