What Is an HTML Color and How Do You Write One in Code?

An HTML color is any color value a browser can parse and render. In practice you write one of four things: a hex code like #FF6347, an rgb() or rgba() value, an hsl() value, or one of the 148 color names browsers understand, such as tomato. All four are valid CSS, and the color name is simply a built-in alias for a specific hex value — tomato and #FF6347 produce the same pixel. Use whichever is easiest to read in your code; the browser does not care.

The four ways to write a color

How to read a hex code

A hex color is # followed by three channel pairs in red-green-blue order. Each pair is base-16, running from 00 (0) to FF (255).

Take #FF6347 (tomato):

• FF = red = 255
• 63 = green = 99
• 47 = blue = 71

So #FF6347 is the same color as rgb(255, 99, 71). That is the whole conversion rule: split the six digits into three pairs, convert each pair from hex to decimal, and you have your rgb values. Going the other way, convert each rgb number to a two-digit hex value and concatenate.

Shorthand hex

If each pair has two identical digits, you can collapse it to three. #FF6633 becomes #F63. Both mean red 255, green 102, blue 51. The shorthand only works when both digits in every pair match — #FF6347 cannot be shortened.

Alpha in hex

Modern CSS also accepts eight-digit hex, #RRGGBBAA, where the last pair sets opacity. #FF634780 is tomato at roughly 50% opacity. If you need to support older browsers, rgba() is the safer form for transparency.

Writing colors in CSS

The syntax is the same everywhere a color is accepted — text color, background, borders, shadows:

.alert {
  color: #FF6347;              /* hex */
  background-color: rgb(255, 99, 71);   /* rgb */
  border: 1px solid tomato;    /* color name */
}

.overlay {
  background-color: rgba(255, 99, 71, 0.5);  /* 50% transparent */
}

.hover-state {
  background-color: hsl(9, 100%, 74%);  /* lighter tomato */
}

Input is the value, the action is assigning it to a property, and the expected result is that the element renders in that color. If nothing changes, the usual causes are a missing # on a hex value, a typo in a color name (browsers silently ignore unknown names and fall back to inherited color), or a more specific rule overriding yours.

Color names are not a separate system

A common misconception is that named colors and hex codes are different kinds of color. They are not. The browser ships a lookup table of 148 names, each mapped to one hex value. tomato is defined as #FF6347; darksalmon is #E9967A; mediumblue is #0000CD. Writing the name is identical in effect to writing its hex.

The trade-off is readability versus precision. Names make code self-documenting but only cover 148 colors, and some names are misleading — darkgoldenrod and gold are far apart in hue. For anything beyond quick work, hex or rgb gives you exact control.

Verifying a color before you ship it

Do not trust memory for hex values. A single wrong digit shifts the color noticeably, and it is easy to confuse #FF6347 with #FF6437. Look the value up in a color tool that shows the swatch alongside its rgb, hsl, and nearest named color, then confirm the rendered result in the browser.

Two checks worth running on any color you pick:

• Contrast against white and black. A color that looks fine as a swatch can fail readability as text. Contrast checkers give you the ratio so you can judge whether it passes.
• How it looks to color-blind viewers. Simulators show the same color through different vision types, which catches palettes that rely on red-green distinctions alone.

HexColor.co does both from a single lookup: type a hex code, an rgb value, or a browser color name and you get the conversions, harmonies, shades, contrast figures, and a color-blindness view. It also has a color picker and converter if you are starting from an image or a Pantone/RAL reference rather than a code.

Quick reference

• #RRGGBB — six digits, two per channel, red-green-blue order
• #RGB — shorthand, only when each pair repeats
• #RRGGBBAA — hex with opacity
• rgb(r, g, b) — channels 0–255
• rgba(r, g, b, a) — alpha from 0 to 1
• hsl(h, s%, l%) — hue 0–360, saturation and lightness as percentages
• 148 named colors — browser built-ins, each equal to one hex value

Pick hex for precision and portability, rgb/rgba when you need transparency or channel math, hsl when you want to adjust lightness by hand, and names when readability matters more than exactness.