HTML Color Codes

The 16 basic HTML colors

These are the original color keywords from HTML 4.01 — the set every browser has understood since the 1990s. They are still valid today and are a subset of the 141 CSS color keywords flagged CSS in the grid above. Click any value to copy it.

How to use HTML color codes

An HTML color code is any value the browser accepts as a CSS color. The three you will use most are a hex code (#FF7F50), an RGB function (rgb(255, 127, 80)) and a color keyword (coral). All three name exactly the same color, so pick whichever your project uses — the format switch above copies any color in any of them. For a color that is not in the list, choose it in the HTML color picker and copy its code in any format.

Inline in HTML

<p style="color: #FF7F50;">Coral text</p>
<div style="background-color: rgb(70, 130, 180);">Steel blue box</div>

In a stylesheet

body    { color: #333333; background: #FAF9F6; }
a       { color: royalblue; }
.button { background: hsl(16, 100%, 66%); border: 1px solid #E0431F; }

As reusable CSS variables

:root {
  --brand: #4B0082;
  --brand-soft: rgb(75 0 130 / 0.12);   /* same color, 12% opacity */
}
.card { border-color: var(--brand); background: var(--brand-soft); }

Hex codes can also be written in a three-digit shorthand when each pair repeats — #FFCC00 becomes #FC0 — and an optional fourth or eighth digit sets transparency: #FF7F5080 is coral at 50% opacity. In RGB and HSL, add a slash and an alpha value, as in rgb(255 127 80 / 0.5).

How hex color codes work

A hex code is three numbers — red, green and blue — each written as two hexadecimal digits from 00 (none) to FF (full, 255 in decimal). #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue; equal amounts of all three give a gray, from #000000 (black) to #FFFFFF (white). That is 256 × 256 × 256 = 16,777,216 possible colors, of which only a few hundred have widely used names.

So most colors you meet in a design will not have a name at all. Type any hex or RGB value into the search box above and this page will show the closest named colors, measured in the perceptual OKLab color space, so you can describe it (“a slightly darker steel blue”) or snap it to a standard keyword. To create an in-between color from two of these codes, blend them in the color mixer. For full conversions — HSV, CMYK, OKLCH — use the color converter, or the dedicated hex to RGB and RGB to hex pages.

Keywords, names and codes

This page lists 245 named colors. The 141 marked CSS are official CSS keywords: you can write them straight into HTML or CSS (color: cornflowerblue) and every browser will understand them. The rest — sage, terracotta, burgundy, champagne and the like — are common design and paint names; browsers do not recognize them as keywords, so use their hex or RGB code instead. The Name copy format handles this for you: it copies the keyword when one exists and falls back to the hex code when it doesn't.

Every color name links to its own page in the color library, with harmonies, tints and shades. For the keyword list as a plain table, see the 140 CSS color names; for ready-made UI systems, the Tailwind, Material Design and web-safe charts. (Looking for the color bands on electronic components instead? See the resistor color code calculator.) To find the colors that go with any of these, or the closest named color to a code you already have, use the color matcher. Before using a color for text, check it against its background in the contrast checker, and to pick a color that isn't listed, use the HTML color picker, which also gives you ready-to-paste HTML and CSS.

HTML color code FAQ