HTML / CSS Named Color Library

Beyond a basic color chart

More than a list of pretty colors.

A complete set of color discovery, comparison, and design tools — useful for frontend developers, graphic designers, students, content creators, and anyone who loves color.

Discover

Search 1,097 Named Colors

Find colors by name, HEX, RGB, or HSL. Filter by collection and color family, then sort by hue, brightness, or name. Switch between grid and list views to explore your way.

Inspect

Get HEX, RGB & HSL Values

Click a swatch to inspect its exact values and copy the format you need. Use standard CSS keywords where supported or copy numeric color codes for expanded survey colors.

#663399 · rgb(102, 51, 153)

Accessible

Check Color Contrast

Compare text and background colors, view contrast ratios, and find named-color pairings that meet selected WCAG AA or AAA thresholds for readable interface designs.

Aa Aa Aa

Create

Generate Harmonious Palettes

Experiment with complementary, analogous, triadic, split-complementary, square, and monochromatic combinations. Generate tints and shades from a selected color.

Match

Find the Nearest Named Color

Have a HEX code but no idea what to call it? Enter the color into the matcher to find six visually similar named colors using OKLab color-distance calculations.

Build

Export Colors for Your Projects

Save favorites, generate gradients, preview a styled UI card, and export matching colors as CSS custom properties, JSON, or CSV for use in design and development workflows.

.CSS .JSON .CSV

Official browser keywords

148 Standard CSS Color Names

CSS includes 148 standard named color keywords, counting alternate spellings such as Gray and Grey. They can be used directly as values in CSS properties, without typing hexadecimal or RGB numbers.

Tomato

Gold

Teal

RebeccaPurple

color: rebeccapurple; background: gold;

Both are valid CSS declarations.

Creative color vocabulary

949 Extended XKCD Color Names

Sometimes "blue" simply isn't descriptive enough. The additional XKCD color collection introduces hundreds of distinctive, memorable color names from a community color-naming survey.

Pastel Orange

Royal Purple

Chartreuse

Strong Pink

/* XKCD Pastel Orange */ background: #FF964F;

Extended survey names are descriptive labels, not official CSS keywords. Use their HEX, RGB, or HSL codes in CSS.

Understand your color codes

HEX vs RGB vs HSL: What's the difference?

The same color can be expressed in different formats. Knowing when to use each format makes writing CSS easier and helps you build consistent palettes.

One color, many codes

RebeccaPurple

A named CSS color with three equivalent numeric representations.

HEX

#663399

A hexadecimal code that stores red, green, and blue channel values. Compact, common, and ideal for design handoffs, CSS variables, and brand style guides.

RGB

rgb(102, 51, 153)

Uses red, green, and blue channel values. Particularly useful when working with numeric color channels or the modern CSS rgb() syntax.

HSL

hsl(270, 50%, 40%)

Describes hue, saturation, and lightness. Helpful for experimenting with related shades and adjusting a color's intensity or brightness.

Quick reference

Popular HTML & CSS Named Colors

A handy reference chart of recognizable CSS colors and their HEX values.

Official CSS keywords

Popular CSS named colors with hexadecimal codes and design uses
Color	CSS Keyword	HEX Value	Common Design Use
Alice Blue	`aliceblue`	`#F0F8FF`	Soft interface backgrounds
Cornflower Blue	`cornflowerblue`	`#6495ED`	Buttons and accents
Rebecca Purple	`rebeccapurple`	`#663399`	Brand identity and headings
Coral	`coral`	`#FF7F50`	Warm decorative highlights
Sea Green	`seagreen`	`#2E8B57`	Nature-inspired interfaces
Gold	`gold`	`#FFD700`	Badges and celebration accents
Hot Pink	`hotpink`	`#FF69B4`	Vibrant creative visuals
Slate Gray	`slategray`	`#708090`	Neutral UI details

Color uses are creative suggestions, not fixed rules. Always test text and background contrast before using colors for important content.

Getting started

How to Use the Named Color Library

No complicated setup and no color-theory degree required. Start with one color and explore wherever inspiration leads.

01

Search or browse

Find a color using its name or code, select a collection, or browse swatches by family and hue.

02

Inspect and copy

Select a color to view its HEX, RGB, HSL, brightness, and contrast information.

03

Build a color scheme

Generate color harmonies, examine shades, and experiment with gradients and interface previews.

04

Check accessibility and export

Review contrast, save favorite colors, then export the matching collection for your project.

Color recipe

A Palette in Four Shades

Example CSS custom properties

:root {
  --brand-dark: #172554;
  --brand-main: #2563EB;
  --brand-light: #38BDF8;
  --page-tint: #E0F2FE;
}

.button {
  background: var(--brand-main);
  color: white;
}

Tip: For a real interface, test every important text/background combination rather than assuming a coordinated palette will automatically be accessible.

Readability matters

Beautiful colors are great. Readable colors are better.

Color contrast describes the luminance difference between a foreground and background. A beautiful color combination can still make text difficult to read. That's why accessible web design requires more than choosing colors that simply look good together.

Use the library's color inspector and accessible pairing finder to evaluate candidate text colors. The tool helps you compare selected contrast ratios against common WCAG targets.

4.5:1

WCAG AA normal text

3:1

WCAG AA large text

7:1

WCAG AAA normal text

Strong contrastExample

Easy to read

Light text against a dark background creates clear visual separation.

Low contrastExample

Harder to read

Similar lightness values can reduce text readability.

WCAG contrast is one part of accessibility. Also consider focus indicators, text size, interaction states, and avoiding color-only communication.

Ideas worth exploring

Where Can You Use Named Colors?

From a small personal webpage to a complete visual identity, color choices influence how a project feels and how comfortably people can use it.

Website & UI Design

Select accessible button colors, backgrounds, navigation accents, and interactive states.

Branding & Graphics

Explore memorable brand palettes for illustrations, posters, presentations, and social graphics.

Charts & Dashboards

Distinguish data categories with thoughtful color choices supported by labels and patterns.

Learning & Teaching

Learn CSS syntax, understand color formats, and explore relationships across the color wheel.

Color theory made visual

Four Ways to Build a Better Color Palette

Understanding a few basic color relationships can make palette creation more intentional and enjoyable.

01. Complementary Colors

Colors positioned opposite each other on the color wheel create a vibrant relationship. Useful for energetic accents and visual emphasis when applied with care.

02. Analogous Colors

Neighboring hues tend to create a coordinated, flowing appearance. Try them for cohesive backgrounds, illustrations, and subtle visual themes.

03. Triadic Colors

Three hues spaced around the color wheel offer variety and energy. Use one as the dominant color and reserve the others for accents.

04. Monochromatic Colors

Variations built around one hue create visual consistency. Experiment with different lightness and saturation values for a refined single-hue design.

These are illustrative color combinations. The tool's harmony studio calculates palettes from whichever color you have selected.

Copy the idea, make it yours

How to Use Named Colors in CSS

A named color can be assigned directly to CSS properties such as color, background-color, and border-color.

For example, color: tomato; sets the text color using an official CSS keyword. No conversion is necessary.

For the extended XKCD collection, use the corresponding HEX, RGB, or HSL value instead of the descriptive survey name.

You can also define CSS custom properties for reusable design tokens. This helps keep button colors, headings, backgrounds, and other components consistent.

style.css CSS example

/* Official CSS color names */
.hero-title {
  color: rebeccapurple;
}

.action-button {
  background-color: royalblue;
  color: white;
}

.soft-section {
  background-color: aliceblue;
  border: 1px solid lightsteelblue;
}

/* Extended named color example:
   XKCD Pastel Orange */
.accent {
  background-color: #FF964F;
}

/* Reusable color tokens */
:root {
  --primary: #663399;
  --highlight: gold;
}

.card-title {
  color: var(--primary);
}

Frequently asked questions

Your Color Questions, Answered.

Clear explanations about CSS color names, color codes, extended color collections, and the tools available in this library.

What are CSS named colors?

CSS named colors are predefined color keywords recognized by web browsers. Examples include red, navy, coral, mediumseagreen, and rebeccapurple. These keywords can be written directly into CSS declarations, such as background-color: coral;.

How many official CSS named colors are there?

There are 148 standard named color keywords when alternate spellings are counted, representing 139 distinct RGB color values. For example, gray and grey are different keyword spellings that produce the same color. The special transparent keyword and contextual currentColor keyword are not part of this 148-color named list.

Why does this library contain 1,097 colors?

The library combines two collections: 148 official CSS named color keywords and 949 descriptive XKCD survey colors. Together they provide 1,097 named entries for browsing. Only the official CSS collection can be used directly as standard CSS color keywords; the extended names are labels associated with numerical color values.

Can I use XKCD color names directly in CSS?

Not as standard CSS keywords. An extended name such as XKCD Pastel Orange is a descriptive label, not a browser-recognized color keyword. Use its HEX, RGB, or HSL representation instead. For example, background-color: #FF964F; is valid CSS.

What is the difference between HEX, RGB, and HSL colors?

HEX uses hexadecimal notation such as #663399. RGB specifies red, green, and blue components such as rgb(102, 51, 153). HSL specifies hue, saturation, and lightness such as hsl(270, 50%, 40%). They can represent the same color in different ways, depending on your design workflow.

How can I find a CSS color by its HEX code?

Enter the HEX value into the library's search field to look for matching entries. For a color without an exact named match, use the nearest named color finder. It compares the entered color with entries in the library and suggests visually similar names using OKLab color distance.

How do I choose accessible text and background colors?

Start by checking the contrast ratio between the two colors. WCAG 2.x Level AA generally requires at least 4.5:1 contrast for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text. The library includes contrast tools to help you identify candidate combinations, but a complete accessibility review also considers other interface requirements.

Can I generate color palettes from one named color?

Yes. Select a color and open the Color Harmony Studio to explore complementary, analogous, triadic, split-complementary, square, or monochromatic combinations. You can also examine a scale of lighter and darker color variations and copy generated HEX values.

Can I create CSS gradients with these colors?

Yes. The built-in CSS gradient maker lets you choose two colors, change the gradient angle, preview the result, and copy a linear-gradient() CSS declaration for your webpage or interface.

Can I save favorite colors and export the library?

Yes. You can save favorite colors in your browser's local storage, filter the library to favorites, and export matching entries as CSS custom properties, JSON, or CSV. Local favorites depend on the browser retaining its stored data.

Are HTML color names and CSS color names different?

In modern web development, the familiar standard named color keywords are primarily defined through CSS and can be applied to HTML elements using CSS. Older HTML color-attribute terminology is still common in searches, but modern styling is generally written with CSS properties.

What is the difference between Gray and Grey in CSS?

Both spellings are accepted for several standard CSS named colors. For example, gray and grey both correspond to #808080. Related pairs such as darkgray and darkgrey are also equivalent. These aliases account for some of the difference between 148 standard keyword spellings and 139 unique color values.

Is the HTML / CSS Named Color Library free to use?

Yes. The UtilityGlen color library is a free browser-based tool for exploring named colors, copying color codes, building palettes, comparing contrast, and exporting color data. No account is required to use its core features.

Your next favorite color is waiting

Stop guessing colors.
Start discovering them.

Explore 1,097 named color entries, compare HEX and RGB values, discover creative palettes, test contrast, and build something brilliant — one color at a time.

Explore All Named Colors

Free to use · No registration required · Explore in your browser