HTML Color Names - Online Complete List with Hex & Preview
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
UD5 Toolkit
Explore, search, and copy all 148 CSS named colors
No colors match your search.
Try a different keyword or clear the filter.
color: tomato; or background: steelblue; instead of using hex codes. They make CSS more readable and are supported by all modern browsers. There are currently 148 named colors defined in the CSS Color Module Level 4 specification.
rebeccapurple (#663399) was her favorite color. Several colors also have duplicate spellings (e.g., gray/grey, darkgray/darkgrey), which contribute to the total count of 148.
Tomato, TOMATO, or tomato — all are valid. However, the convention is to use lowercase for consistency and readability. Most developers prefer lowercase in their stylesheets.
color: coral; is intuitive). However, hex, RGB, and HSL offer far more precision — 16.7 million colors compared to just 148 named ones. Named colors are great for quick prototyping, learning CSS, or when you need a standard color like white, black, or tomato. For production projects requiring exact brand colors, hex or custom properties (CSS variables) are recommended.
white, black, red, blue, green, gray, orange, tomato, steelblue, coral, gold, teal, and navy. Colors like transparent and currentColor are also keywords but are not part of the 148 named colors — they serve special purposes in CSS.
color-mix() or combine them with CSS custom properties and rgb() conversion. For alpha transparency, you'd typically convert the named color to its RGB equivalent and use rgba() — for example, rgba(255, 99, 71, 0.5) for semi-transparent tomato. This tool helps you find the exact RGB values for any named color.
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Get a beautiful, hand‑picked color combination instead of purely random. Each palette has a name and copyable hex codes.
Enter color in any CSS format and see all other representations. Live preview. Swatch history.
Generate a range of tints and shades from a single hex color. Ideal for data visualization, UI design systems, and Tailwind custom palette creation. Local tool.
Test if your display supports HDR colors by rendering a gradient in Rec.2020 space. See what you're missing. Canvas based.
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Set a custom accent color for checkboxes, radios, range, and progress. See the browser’s rendering. Copy the CSS.
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
Use <input type='color'> and see its change events and value in hex. Understand the native color picker. Quick demo.
Paste your CSS and get a sorted list of all custom properties defined under :root with their values. Quick audit.
Pick a source color and generate a complete M3 tonal palette with light/dark schemes. Export as CSS custom properties.
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.