HTML Color Names Chart: 148 CSS Colors
Complete list of standard named colors • Click to copy HEX
What Is the HTML Color Names Chart?
The HTML Color Names Chart is a complete visual reference of all 148 standard color names supported by modern web browsers. Instead of digging through documentation or guessing whether a name like "CornflowerBlue" or "RebeccaPurple" actually exists in the CSS spec, you can browse every named color right here — see what it looks like, and copy its HEX code with one click.
These color names originated from the X11 color standard used in Unix systems and were adopted into the CSS3 specification. They are fully supported in every major browser — Chrome, Firefox, Safari, and Edge — so you can use them confidently in production code. Writing color: Tomato; is not only valid CSS, it's often more readable than color: #FF6347;.
Whether you're prototyping a quick layout, building a color palette, or just need a memorable name for a shade you keep forgetting, this chart saves you time. Scroll down to the grid, find your color, and click to copy — no sign-up, no downloads, completely free.
Complete List of HTML Color Codes
Below is the complete reference of 148 standard HTML color codes supported by all major web browsers. This list includes the color name, the corresponding HEX code, and the RGB value. These names are derived from the X11 color standard and are fully compliant with CSS3 specifications. Use this chart to quickly find color names like "CornflowerBlue" or "RebeccaPurple" without memorizing complex hex values.
Click on any color block above to copy the HEX code to your clipboard instantly. This tool is designed to speed up your development workflow by making color selection effortless. If you need to convert a color you've found here into a different format, try our color converter to switch between HEX, RGB, and HSL.
The 148 named colors cover a wide spectrum — from basic primary colors like Red, Green, and Blue, to nuanced shades like BurlyWood, PapayaWhip, and LavenderBlush. While they don't cover every possible color (there are over 16 million HEX values), these named colors are the most commonly referenced in web development and are a great starting point for any project.
How Named Colors Work in CSS
HTML color names are predefined keywords that represent specific colors in web design. Instead of using numeric values like HEX codes (#FF0000) or RGB functions (rgb(255, 0, 0)), developers can simply write the name Red. These 148 names are part of the CSS Color Module and work in any CSS property that accepts a color value — color, background-color, border-color, and more.
It's worth noting that named colors are case-insensitive in CSS, so color: tomato; and color: TOMATO; produce the same result. However, the conventional writing style is PascalCase (e.g., CornflowerBlue) as defined in the specification. Named colors are also fully opaque — if you need transparency, you'll need to use rgba() or HEX with alpha instead.
How to Use This Chart
Browse or Scan
Scroll through the visual grid above to find the color you need. Each card shows the color preview, its name, and HEX code at a glance.
Click to Copy
Click on any color card to instantly copy its HEX code to your clipboard. A confirmation toast will appear so you know it worked.
Paste Into Your Code
Paste the HEX value directly into your CSS, Tailwind config, or design tool. Or use the color name itself — both are valid in CSS.
Build a Palette
Found a few colors you like? Head over to our palette generator to combine them into a cohesive design system.
Why Use Named Colors in CSS?
- Readability: Code like
color: Tomato;is easier to understand thancolor: #FF6347;. - Memorability: It's easier to remember names like "SkyBlue" or "Chocolate" than hex codes.
- Speed: Faster to type common names during rapid prototyping.
- Transparency: You know exactly what color you are using just by reading the name.
- Zero Lookup: No need to open a color picker or reference sheet — the name describes the color.
Who Uses This Color Names Chart?
This reference tool is used by a wide range of people working with color on the web:
- Front-End Developers: Quickly find and copy named colors for CSS, Tailwind configs, or inline styles without leaving the browser.
- UI/UX Designers: Use named colors as a starting point when building design systems or wireframing with code-based tools.
- Students and Educators: A clear visual reference for learning the standard color names covered in web development courses.
- Content Creators: Bloggers and documentation writers who need consistent color names for code examples and tutorials.
- Accessibility Auditors: Identify named colors in existing codebases and verify them with our color blindness simulator to check for vision deficiency issues.
Benefits of Using a Visual Color Reference
There are plenty of text-only color lists out there, but seeing the actual color matters. Here's why a visual chart is more effective:
- Instant Recognition: You can spot the color you need at a glance instead of mentally converting HEX values to visual hues.
- Fewer Mistakes: Visual confirmation prevents typos and wrong-color bugs that are easy to miss in code reviews.
- Copy-and-Paste Workflow: One click copies the HEX code, eliminating manual transcription errors entirely.
- Discovery: Browsing the grid exposes you to named colors you might not have known existed — like BurlyWood, Peru, or NavajoWhite.
- No Dependencies: Everything runs in your browser. No installation, no account, no server calls. It just works.
Once you've picked your colors, you can test how they look in a gradient with our gradient generator, or extract colors from any image using the color from image tool.
Why I Built This Tool
I kept finding myself in the same situation: halfway through writing CSS, I'd think "does CSS have a name for this shade?" and then spend five minutes searching through MDN or StackOverflow to confirm whether "PapayaWhip" was real or something I'd imagined. Turns out it's real. So is "BlanchedAlmond" and "OldLace."
The existing references I found were either plain text lists — no color previews — or bloated pages that took forever to load. I wanted something fast and visual: see the color, know the name, copy the code, and get back to work. So I built this chart. Every named color in the CSS spec, displayed as a card you can click to copy. No more guessing, no more tab-switching.
It's one of the tools I use almost daily on DevPalettes, and I hope it saves you the same headache it saved me. If you find it handy, check out the other free tools on the site.
Frequently Asked Questions
How many HTML color names are there?
There are 148 standard HTML color names supported by modern browsers. These include basic names like Red and Blue, as well as extended names like Coral, BurlyWood, and the recently added RebeccaPurple.
Can I use HTML color names in CSS?
Yes, you can use HTML color names directly in CSS properties. For example: color: Tomato; or background-color: SlateBlue;. They are valid, widely supported CSS values that work in all modern browsers.
What is the difference between HEX and color names?
HEX codes (like #FF0000) are numerical representations of colors with over 16 million possible values, while color names (like Red) are human-readable keywords limited to 148 options. Names are easier to remember and read in code, but HEX gives you far more precision and a wider range of shades.
Are named colors supported in all browsers?
Yes. All 148 named colors are supported in every major browser including Chrome, Firefox, Safari, and Edge. They have been part of the CSS specification since CSS3 and are universally recognized across all modern rendering engines.
Can I use HTML color names in Tailwind CSS?
Tailwind CSS uses its own default color palette and doesn't include named CSS colors out of the box. However, you can use arbitrary values with the bracket syntax like text-[Tomato] or bg-[CornflowerBlue]. You can also add named colors to your tailwind.config.js under theme.extend.colors.
What is the newest HTML color name?
RebeccaPurple (#663399) is the most recently added named color. It was added to the CSS specification in 2014 as a tribute to Eric Meyer's daughter. It is the only color name added after the original 147 from the X11 standard, bringing the total to 148.
Are named colors case-sensitive in CSS?
No, CSS color names are case-insensitive. color: red;, color: RED;, and color: Red; all produce the same result. The conventional writing style in specifications is PascalCase (e.g., CornflowerBlue).
Related Design Tools
Found a color you like? Use these tools to build on it.
About This Tool
This HTML Color Names Chart is a free, open tool provided by DevPalettes. All 148 color names are sourced directly from the W3C CSS Color Module Level 4 specification. No data is collected, no cookies are set by this tool, and all processing happens locally in your browser.
Last updated: June 2026 • Reviewed for accuracy against the CSS Color 4 spec