Reference & Lookup Tools
100% Client-Side 100% Client-Side. Color conversions and relative luminance calculations execute locally in-browser.

CSS Color Code Reference & Contrast Checker

W3C CSS Color Module Level 4 named colors with HEX, RGB, HSL, and WCAG contrast scoring

W3C Standard CSS Named Colors

Visual color swatches, HEX/RGB/HSL values, and WCAG contrast scoring against white/black.

#F0F8FF

aliceblue

White Family
RGB:
HSL:
On White:Fail
On Black:AAA
#FAEBD7

antiquewhite

White Family
RGB:
HSL:
On White:Fail
On Black:AAA
#00FFFF

aqua

Blue Family
RGB:
HSL:
On White:Fail
On Black:AAA
#7FFFD4

aquamarine

Green Family
RGB:
HSL:
On White:Fail
On Black:AAA
#F0FFFF

azure

White Family
RGB:
HSL:
On White:Fail
On Black:AAA
#000000

black

Black Family
RGB:
HSL:
On White:AAA
On Black:Fail
#0000FF

blue

Blue Family
RGB:
HSL:
On White:AAA
On Black:Fail
#8A2BE2

blueviolet

Purple Family
RGB:
HSL:
On White:AA
On Black:AA Large
#7FFF00

chartreuse

Green Family
RGB:
HSL:
On White:Fail
On Black:AAA
#D2691E

chocolate

Brown Family
RGB:
HSL:
On White:AA Large
On Black:AA
#FF7F50

coral

Orange Family
RGB:
HSL:
On White:Fail
On Black:AAA
#6495ED

cornflowerblue

Blue Family
RGB:
HSL:
On White:Fail
On Black:AAA
#DC143C

crimson

Red Family
RGB:
HSL:
On White:AA
On Black:AA Large
#00FFFF

cyan

Blue Family
RGB:
HSL:
On White:Fail
On Black:AAA
#00008B

darkblue

Blue Family
RGB:
HSL:
On White:AAA
On Black:Fail
#008B8B

darkcyan

Blue Family
RGB:
HSL:
On White:AA Large
On Black:AA
#B8860B

darkgoldenrod

Yellow Family
RGB:
HSL:
On White:AA Large
On Black:AA
#A9A9A9

darkgray

Gray Family
RGB:
HSL:
On White:Fail
On Black:AAA
#006400

darkgreen

Green Family
RGB:
HSL:
On White:AAA
On Black:Fail
#8B008B

darkmagenta

Purple Family
RGB:
HSL:
On White:AAA
On Black:Fail
#FF8C00

darkorange

Orange Family
RGB:
HSL:
On White:Fail
On Black:AAA
#8B0000

darkred

Red Family
RGB:
HSL:
On White:AAA
On Black:Fail
#483D8B

darkslateblue

Purple Family
RGB:
HSL:
On White:AAA
On Black:Fail
#FF1493

deeppink

Pink Family
RGB:
HSL:
On White:AA Large
On Black:AA
#00BFFF

deepskyblue

Blue Family
RGB:
HSL:
On White:Fail
On Black:AAA
#696969

dimgray

Gray Family
RGB:
HSL:
On White:AA
On Black:AA Large
#1E90FF

dodgerblue

Blue Family
RGB:
HSL:
On White:AA Large
On Black:AA
#B22222

firebrick

Red Family
RGB:
HSL:
On White:AA
On Black:AA Large
#228B22

forestgreen

Green Family
RGB:
HSL:
On White:AA Large
On Black:AA
#FF00FF

fuchsia

Pink Family
RGB:
HSL:
On White:AA Large
On Black:AA
#FFD700

gold

Yellow Family
RGB:
HSL:
On White:Fail
On Black:AAA
#DAA520

goldenrod

Yellow Family
RGB:
HSL:
On White:Fail
On Black:AAA
#808080

gray

Gray Family
RGB:
HSL:
On White:AA Large
On Black:AA
#008000

green

Green Family
RGB:
HSL:
On White:AA
On Black:AA Large
#FF69B4

hotpink

Pink Family
RGB:
HSL:
On White:Fail
On Black:AAA
#CD5C5C

indianred

Red Family
RGB:
HSL:
On White:AA Large
On Black:AA
#4B0082

indigo

Purple Family
RGB:
HSL:
On White:AAA
On Black:Fail
#00FF00

lime

Green Family
RGB:
HSL:
On White:Fail
On Black:AAA
#32CD32

limegreen

Green Family
RGB:
HSL:
On White:Fail
On Black:AAA
#FF00FF

magenta

Pink Family
RGB:
HSL:
On White:AA Large
On Black:AA
#800000

maroon

Red Family
RGB:
HSL:
On White:AAA
On Black:Fail
#191970

midnightblue

Blue Family
RGB:
HSL:
On White:AAA
On Black:Fail
#000080

navy

Blue Family
RGB:
HSL:
On White:AAA
On Black:Fail
#808000

olive

Green Family
RGB:
HSL:
On White:AA Large
On Black:AA
#FFA500

orange

Orange Family
RGB:
HSL:
On White:Fail
On Black:AAA
#FF4500

orangered

Orange Family
RGB:
HSL:
On White:AA Large
On Black:AA
#DA70D6

orchid

Purple Family
RGB:
HSL:
On White:Fail
On Black:AAA
#800080

purple

Purple Family
RGB:
HSL:
On White:AAA
On Black:Fail
#663399

rebeccapurple

Purple Family
RGB:
HSL:
On White:AAA
On Black:Fail
#FF0000

red

Red Family
RGB:
HSL:
On White:AA Large
On Black:AA
#4169E1

royalblue

Blue Family
RGB:
HSL:
On White:AA
On Black:AA Large
#FA8072

salmon

Red Family
RGB:
HSL:
On White:Fail
On Black:AAA
#2E8B57

seagreen

Green Family
RGB:
HSL:
On White:AA Large
On Black:AA
#A0522D

sienna

Brown Family
RGB:
HSL:
On White:AA
On Black:AA Large
#C0C0C0

silver

Gray Family
RGB:
HSL:
On White:Fail
On Black:AAA
#87CEEB

skyblue

Blue Family
RGB:
HSL:
On White:Fail
On Black:AAA
#6A5ACD

slateblue

Purple Family
RGB:
HSL:
On White:AA
On Black:AA Large
#708090

slategray

Gray Family
RGB:
HSL:
On White:AA Large
On Black:AA
#00FF7F

springgreen

Green Family
RGB:
HSL:
On White:Fail
On Black:AAA
#4682B4

steelblue

Blue Family
RGB:
HSL:
On White:AA Large
On Black:AA
#008080

teal

Green Family
RGB:
HSL:
On White:AA
On Black:AA Large
#FF6347

tomato

Red Family
RGB:
HSL:
On White:Fail
On Black:AAA
#40E0D0

turquoise

Green Family
RGB:
HSL:
On White:Fail
On Black:AAA
#EE82EE

violet

Purple Family
RGB:
HSL:
On White:Fail
On Black:AAA
#FFFFFF

white

White Family
RGB:
HSL:
On White:Fail
On Black:AAA
#FFFF00

yellow

Yellow Family
RGB:
HSL:
On White:Fail
On Black:AAA
#9ACD32

yellowgreen

Green Family
RGB:
HSL:
On White:Fail
On Black:AAA

About CSS Color Code Reference & Contrast Checker

Visual reference catalog of all standard W3C CSS Color Module named colors (from aliceblue to yellowgreen). Filter by hue family, inspect precise HEX, RGB, and HSL values, and view automated WCAG 2.1 contrast ratio calculations against pure black and white backgrounds.

Key Capabilities & Features

  • Visual catalog of all 148 standard W3C CSS named colors with crisp color swatches
  • Color family filtering (Red, Pink, Orange, Yellow, Purple, Green, Blue, Brown, Gray, etc.)
  • Exact color format conversions: 6-digit HEX, rgb(r, g, b), and hsl(h, s%, l%)
  • Automated WCAG 2.1 contrast ratio calculations against white (#FFF) and black (#000)
  • WCAG compliance badges: AAA, AA, AA Large, or Fail indicators

How to Use CSS Color Code Reference & Contrast Checker

1

Search or Filter

Search for a color name or select a hue family pill.

2

Inspect Swatch

View the live full-color preview and color values.

3

Verify Contrast

Check the WCAG accessibility ratings for readability on dark or light backgrounds.

4

Copy Values

Click any RGB, HEX, or HSL value to copy directly to your stylesheet.

Privacy & In-Browser Execution Guarantee

100% Client-Side. Color conversions and relative luminance calculations execute locally in-browser.

Frequently Asked Questions

What contrast ratio is required for WCAG AA compliance?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (at least 18pt or 14pt bold).

Are named CSS colors supported in all web browsers?

Yes, the standard 148 named CSS colors are defined in the W3C CSS Color Module Level 3 and 4 and are universally supported across all browsers.