HTML Color Codes Chart: HEX, RGB and Color Names to Copy

HTML Color Codes Chart: Over 600 Colors Organized to Copy

This HTML color codes chart brings together on one page what is usually scattered across several websites: the 139 CSS named colors grouped by family, the Tailwind CSS shade palette, pastel, metallic, earth tone and neon colors, and the 216 web safe colors. That adds up to more than 600 swatches, each showing its HEX code, with its RGB and HSL values one click away.

We organized it around the way people actually look for a color. Sometimes you know the name (navy, coral, lavender), sometimes a client has sent you a code, and sometimes all you have is a photo or a logo. So you can type a name, a code such as #FF7F50 or a family such as "blue" or "pastel" into the search box, and show a single group with the filters.

Click any color and its code is copied in the format you chose (HEX, RGB or HSL), and a card opens with every value, including CMYK and the CSS name when there is one. It works for web design, style sheets, email templates, presentations, Canva, Figma, Word or any program that accepts color codes.

What Are HTML Color Codes and How to Read Them

A color code describes a color with numbers so that a computer always displays it the same way. HTML and CSS mainly use four notations: hex codes, RGB, HSL and color names. The first three describe exactly the same colors, so you can switch between them without losing anything.

Hex Color Codes: The #RRGGBB Format

A hex code starts with a hash sign followed by six base-16 digits (0 to 9 and A to F). You read them in pairs: the first pair is the amount of red, the second is green and the third is blue. Each pair runs from 00 (none) to FF (the maximum, 255 in decimal). So #FF0000 is pure red, #000000 is black and #FFFFFF is white.

With 256 values per channel you get 256 x 256 x 256 = 16,777,216 possible colors. There is also a three-digit shorthand in which each digit is doubled: #F60 equals #FF6600. And CSS accepts an eight-digit version, #RRGGBBAA, in which the last two digits set the opacity.

RGB Color Codes: Red, Green and Blue from 0 to 255

RGB says the same thing as a hex code, but in decimal: rgb(255, 0, 0) is the same red as #FF0000. It is the format most design and video editing programs ask for, and the easiest to read at a glance: the higher the three numbers, the lighter the color. White in RGB is rgb(255, 255, 255) and black is rgb(0, 0, 0).

HSL Color: Hue, Saturation and Lightness

HSL describes color the way a person would: hue is an angle on the color wheel (0° is red, 120° green and 240° blue), saturation is how vivid it is and lightness is how light or dark it is. It is very handy for building variations: keep the hue, change only the lightness, and you get a consistent range for buttons, backgrounds and borders.

HTML and CSS Color Names: From 16 to 148

Besides numeric codes, browsers understand words such as red, tomato or steelblue. The first version of CSS defined only 16 basic colors; CSS 2.1 added orange, and level 3 of the color specification brought in the long list of X11 colors that browsers were already using. Level 4 added rebeccapurple (#663399), named in memory of Rebecca Meyer, the daughter of CSS pioneer Eric Meyer.

Today there are 148 color names, which map to 139 different colors because some are synonyms: aqua and cyan, fuchsia and magenta, and the two spellings of gray, gray and grey, in seven colors. In the chart each color appears once, with its alias next to it. The official list is in the W3C CSS Color Module Level 4 specification.

Names are always written in English with no spaces, and CSS does not care about capital letters: SteelBlue and steelblue work the same. Each swatch shows the CSS name you can paste straight into your code, plus its alias when it has one.

RGB vs CMYK: Which Colors to Use on Screen and in Print

RGB is an additive model: a screen mixes red, green and blue light, and all three at full intensity make white. CMYK is subtractive: a printer layers cyan, magenta, yellow and black inks on paper, and each ink takes light away. That is why the same color never looks identical on a monitor and on paper, and why some very saturated screen colors, such as certain electric greens or blues, cannot be reproduced with ink.

The rule of thumb is simple: for websites, social media, presentations and video, work in HEX or RGB; for brochures, business cards, signs or packaging, prepare your files in CMYK with the color profile your print shop gives you. The CMYK value shown by the picker is an approximate mathematical conversion, useful as a starting point, but it does not replace a color proof.

If you are building a brand identity, define a screen version and a print version of each color from day one. It is part of good graphic design: a logo has to look just as good on a website, on a T-shirt and on a billboard.

Color Picker from Image: Find the Color of a Photo or Website

It is one of the most common needs: you have a logo, a product photo or a screenshot of a website and you need the exact code of a color. The tool gives you two ways to get it without installing anything.

Online Color Picker with an Eyedropper

In Chrome, Edge and other supported desktop browsers you will see an Eyedropper button. Press it, the cursor turns into a magnifier, and you can pick the color of any point on your screen, even in another window or an open program. The code is copied instantly and the picker updates with all its values. If your browser does not support it, the button does not appear.

Image Color Picker That Never Uploads Your File

With Color from an image you choose a photo or screenshot from your device and click the point you want. The image opens inside your browser and is never sent to a server, so you can use it even with confidential material. A tip: in photos, neighboring pixels vary a lot because of light and compression, so try a few points in the area and keep the one that best represents the color.

WCAG Color Contrast: AA and AAA Levels Explained

A beautiful color is not much use if the text on top of it cannot be read. The W3C Web Content Accessibility Guidelines (WCAG) measure color contrast as a ratio between the luminance of the text and that of the background, from 1:1 (the same color) to 21:1 (black on white). WCAG 2.2 sets these minimums:

• Level AA: at least 4.5:1 for normal text and 3:1 for large text (18 point and up, or 14 point bold).
• Level AAA: at least 7:1 for normal text and 4.5:1 for large text.
• Icons and borders: at least 3:1 against adjacent colors for user interface components (buttons, form fields) and for graphics needed to understand the content (success criterion 1.4.11, level AA).

Logos, purely decorative text and text in disabled controls are exempt. Besides helping people with low vision, good contrast makes a website easier to read in sunlight or on lower-quality screens.

Contrast Checker for Text and Background Colors

Right below the picker there is a contrast checker for any two colors. Choose the text color and the background color with their color pickers or by typing a hex code, or press the dropper button, "Use the picked color", to bring in the one selected above: a swatch from the chart, a color you grabbed with the eyedropper or one taken from an image. The preview shows large text and a normal paragraph in that combination, next to the contrast ratio and a pass or fail for each level: AA and AAA for normal text and for large text, plus icons and borders. "Swap colors" flips the preview; the ratio stays the same, because it does not depend on which color is in front.

The picker above also calculates, as you go, the contrast of the chosen color with white text and with black text. It is the quickest way to know whether a button in that color needs light or dark lettering.

Contrast Ratio: How It Is Calculated and Why It Is Never Rounded Up

The ratio compares the relative luminance of both colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 belongs to the lighter one. Thresholds are not rounded: gray #777777 on white gives 4.47:1 and misses AA for normal text, while #767676 gives 4.54:1 and passes. That is why the checker shows two decimals without rounding up. Pure red #FF0000 on white reaches only 3.99:1, fine for a large heading but not for a paragraph. You will find the full explanation in the W3C guide to minimum contrast.

Pastel, Metallic, Earth Tone and Neon Color Codes

On top of the standard CSS colors, the tool includes four popular groups that have no official CSS name. Their codes are the most widely used references for each tone, not a standard: if you work with a brand, its style guide comes first.

Pastel Colors

These are tones with high lightness and low saturation, such as pastel pink #FFD1DC or baby blue #89CFF0. They work well for backgrounds, illustrations, invitations and brands that want a soft look. Watch the text: on a pastel background you will almost always need dark lettering to reach good contrast.

Gold, Silver and Bronze Hex Codes

A screen cannot shine like metal, so metallic colors are flat approximations. Two gold hex codes are the most common: metallic gold #D4AF37, more muted and realistic, and the CSS gold, #FFD700, which is much more yellow. Silver in HTML is silver, #C0C0C0, and bronze is usually represented as #CD7F32. To suggest shine, blend them in gradients with a lighter and a darker tone.

Earth Tones and Neon Colors

Earth tones such as terracotta #E2725B, ochre #CC7722 or burnt sienna #E97451 recall natural materials and suit websites about interior design, food or rural tourism. At the opposite end are neon colors, such as neon green #39FF14: they grab attention on buttons and details, but they tire the eye on large areas and have very little contrast with white.

Web Safe Colors and the Tailwind Color Palette

Web safe colors were born when many monitors could only display 256 colors. To make a color look the same on any computer, designers used only six values per channel (00, 33, 66, 99, CC and FF): 6 x 6 x 6 = 216 colors. Today any screen shows millions of colors, but this palette is still useful as a tidy grid and for retro-style projects.

The Tailwind CSS palette is the modern approach: 22 colors, each in 11 shades numbered from 50 (almost white) to 950 (almost black). The HEX values in this chart are those of Tailwind CSS 3; version 4 defines its colors in the OKLCH format, with slightly more vivid tones. Even if you do not use Tailwind, it is an excellent reference for building a gray scale or a full range from your brand color.

How to Change Text and Background Color in HTML and CSS

Once you have copied a code, just paste it into the right property of your style sheet. The four formats are interchangeable:

• Text color: color: #1E90FF;
• Background color: background-color: rgb(30, 144, 255);
• Border: border: 2px solid hsl(210, 100%, 56%);
• By name: color: dodgerblue;

All four examples produce the same blue: the HSL value is rounded and is off by one RGB unit, which the eye cannot tell apart. In HTML you can also write it inside a style attribute, as in <p style="color: #1E90FF">, but on a professional website it is better to define colors once as CSS variables (--brand-color: #1E90FF;) and reuse them across the site. That way, if your brand color ever changes, you update it in one place. In WordPress, Divi, Elementor, Canva or Figma you just paste the HEX code into the color field.

A Free Tool by DigiAcción, a Digital Marketing Agency in Andorra

This HTML color codes chart was created by DigiAcción, a digital marketing agency in Andorra based in La Massana. We work with companies in Andorra, Spain and other countries on web design, SEO, GEO (AI search optimization), Google Ads, Meta Ads, video production, graphic design and online stores.

Choosing and applying colors is part of our daily work, and we wanted a tool with everything at hand: well-organized colors, the picker, the contrast checker and the eyedropper on the same page. It is free, needs no sign-up, has nothing to install and runs in your browser on both computer and phone. If you find it useful, we have more free tools, such as our quotation marks and writing symbols to copy.