HTML Color Codes Explained: Most Used Hex Codes

Why color codes matter more than they look

I have spent enough time staring at CSS and terminal output to know that a color is rarely just decoration. The same value can identify a button, separate a warning from a success message, or make text readable enough to use at 3 a.m. A few characters in a stylesheet can carry a surprising amount of meaning.

HTML itself does not define most color formats. CSS does. The browser receives a value such as #3498DB, rgb(52 152 219), or hsl(204 70% 53%) and uses it to paint an element on the screen.

What are HTML color codes used for?

If I need to reuse a dark blue navigation bar on another page, a value such as #123B5D is more reliable than choosing “a slightly lighter blue” by eye. Designers, frontend developers, and content editors can work from the same value. That removes a surprising amount of guesswork.

CSS lets you define colors by name, with hexadecimal notation, or through functions such as rgb() and hsl(). You do not need the newest syntax for every project. A small, consistent palette is usually easier to maintain.

• Web interfaces: Backgrounds, text, borders, and buttons.
• Graphic design: Consistent brand colors across files.
• Terminal and log output: Separating errors, warnings, and successful operations.
• Print work: Choosing an appropriate ink-based color representation.
• Accessibility: Measuring the contrast between text and its background.

The color formats you will meet most often

HEX, RGB, and HSL describe light-based colors on screens. CMYK describes ink components for printing. That distinction matters: a bright orange that looks good in a browser may appear much duller on paper.

How a HEX color code works

HEX is short for hexadecimal. In the familiar six-character form, the first two characters represent red, the next two green, and the final two blue. You can read #RRGGBB like this:

• RR: The red channel.
• GG: The green channel.
• BB: The blue channel.

Each channel ranges from 00 to FF. 00 means that the channel is off, while FF means it is at full intensity. That gives us #000000 for black, #FFFFFF for white, and #FF0000 for pure red.

body {
  background-color: #f4f6f8;
  color: #1f2933;
}

.button-primary {
  background-color: #2563eb;
  color: #ffffff;
}

This creates a light gray background, dark text, and a blue button with white text. I would still check the button contrast rather than trusting my eyes. A color can look pleasant and remain difficult to read.

Three-character HEX values

CSS allows some HEX values to be shortened. Each character in the #RGB form is repeated to produce the six-character value, so #369 is the same as #336699.

The short form is handy for quick experiments. For brand colors, I usually keep the full six-character value because someone reading the stylesheet can identify it more easily at a glance.

RGB and RGBA in CSS

RGB combines red, green, and blue channels. Each channel is normally written from 0 to 255: rgb(255, 0, 0) is red, rgb(0, 0, 0) is black, and rgb(255, 255, 255) is white.

.notice {
  background-color: rgb(255, 243, 205);
  color: rgb(102, 77, 3);
}

.overlay {
  background-color: rgba(0, 0, 0, 0.65);
}

The fourth value in rgba() is the alpha channel. 0 is fully transparent and 1 is fully opaque, so 0.65 applies a black layer at 65% opacity.

If you need to convert HEX to RGB, a conversion tool is perfectly reasonable. Knowing the basic calculation still helps when debugging. For example, #336699 becomes rgb(51, 102, 153): hexadecimal 33 is 51 in decimal, 66 is 102, and 99 is 153.

Understanding HSL

HSL describes a color using three properties that often feel more natural when I am building a palette:

• Hue: The color angle, from 0 to 360 degrees.
• Saturation: The intensity of the color, written as a percentage.
• Lightness: How light or dark the color is, also written as a percentage.

In hsl(210, 60%, 50%), 210 degrees gives a blue-toned hue, with 60% saturation and 50% lightness. To make a paler version of the same hue, reduce saturation instead of changing the hue itself.

:root {
  --brand: hsl(210, 70%, 45%);
  --brand-light: hsl(210, 70%, 92%);
  --brand-dark: hsl(210, 70%, 25%);
}

.card {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-dark);
}

HSL works well with CSS custom properties when you need light and dark variants of the same brand color. I use this approach in dashboards: the hue stays fixed while lightness changes in a controlled way.

HEX, RGB, and HSL: what is the difference?

All three can define colors for a screen. The difference is how they express the color. HEX is compact and portable, so it appears frequently in stylesheets, design files, and brand guides. RGB exposes the three color channels directly. HSL makes hue, saturation, and lightness easier to adjust independently.

There is no single best format. HEX suits a fixed brand value, HSL is convenient for a dynamic theme, and RGB may be a better fit for image-processing code. You can mix them in one stylesheet, but a team convention reduces maintenance work.

CSS named colors

CSS recognizes a set of colors by their English names. Common examples include red, blue, green, black, white, gray, and transparent. Names such as cornflowerblue, rebeccapurple, and tomato are valid too.

.success {
  color: white;
  background-color: seagreen;
}

.warning {
  color: #664d03;
  background-color: gold;
}

Named colors are readable during a quick experiment. In a larger project, though, it becomes hard to remember which blue lightblue actually means. I prefer custom properties and explicit values in production stylesheets.

When CMYK is the right choice

CMYK uses cyan, magenta, yellow, and key, which normally means black. Screens emit light through RGB channels; printers put ink on paper. A direct RGB-to-CMYK conversion therefore cannot guarantee that the printed result will look identical.

For a print file, check the color profile used by your design application, the printer’s requirements, and the paper type. For a logo or another color-sensitive job, sending the file without seeing a proof is risky.

ANSI color codes in a terminal

Terminal colors are a different layer from web colors. ANSI escape sequences tell the terminal to change text color or formatting. In Bash, you can print red and green messages like this:

printf '33[31mError33[0mn'
printf '33[32mSuccess33[0mn'

31 selects red, 32 selects green, and 0 resets the formatting. Do not forget the reset. I once missed those two characters in a maintenance script, and the rest of my SSH session looked like an error report even though the server was fine.

if systemctl is-active --quiet nginx; then
  printf '33[32mnginx is running33[0mn'
else
  printf '33[31mnginx is not running33[0mn'
fi

Color should not carry the entire meaning. Write “running” and “not running” as text as well, so the output remains useful when colors are disabled or difficult to distinguish.

Contrast is part of the implementation

A color that looks attractive is not automatically readable. Thin white text on a light gray background may look elegant in a design tool and become tiring for real users. WCAG 2.2 commonly uses an AA target of at least 4.5:1 for normal text and 3:1 for large text.

Do not try to judge those ratios by eye. Use a contrast checker, then test normal, hover, focus, and disabled states separately. Error messages should not rely on red alone; add text, an icon, or another clear indicator.

1. Measure normal text against its background.
2. Test button text separately.
3. Check that links are distinguishable by more than color alone, such as with an underline.
4. Verify that keyboard focus remains visible.
5. Repeat the checks for the dark theme.

Finding and converting a color code

The quickest way to find a color on a website is to open your browser’s developer tools. Select the element and inspect color, background-color, and border-color in the Styles or Computed panel. The browser will usually show the value as HEX, RGB, or HSL.

If you are converting colors at the command line, check which color space the tool expects. RGB and HSL can be converted mathematically, while CMYK results depend on the selected color profile. Writing the same color in another format is not the same as guaranteeing an identical printed result.

.modal-backdrop {
  background-color: rgb(0 0 0 / 65%);
}

This modern syntax is supported by current browsers. For a project with older browser requirements, check the target environment before replacing the older notation.

Common mistakes with color codes

• Copying a HEX value incorrectly: #1A2B3C and #1A2C3B can be difficult to distinguish by eye.
• Treating RGB and CMYK as interchangeable: One is screen-oriented and the other is print-oriented.
• Skipping contrast testing: A design decision is not an accessibility test.
• Ignoring transparency layers: An RGBA or HSLA value looks different depending on the surface underneath it.
• Defining colors only by name: Names such as gray can be ambiguous within a team.
• Leaving dark mode until the end: A color that works on white may disappear on a dark background.

When you change a color, do not check only the homepage. Open error, success, warning, loading, hover, and focus states too. My terminal script mistake was small, but the lesson was not: color is part of status information, not just decoration. If you provide no text equivalent, the information disappears when the color does.

For the relationship between page titles and HTML markup, see What Is a Title Tag and Why Is It Important?. If you are building colored maintenance output in Bash, What Is Bash Scripting? A Guide to Linux Automation is a useful companion.

Choosing a format for a website

For a fixed brand color, start with HEX. If you need light and dark variations, HSL is often easier to work with. Use RGBA or modern RGB syntax for transparent layers. For print work, agree on the CMYK profile with the designer and printer.

My practical rule is simple: make the value easy for the next person to read where it is written. Define a few CSS custom properties, name colors according to their purpose, and run the contrast checks again after every meaningful change.

Frequently asked questions

Sources

• W3C CSS Color Module Level 4 — w3.org
• W3C Web Content Accessibility Guidelines 2.2 — w3.org
• MDN CSS Colors — developer.mozilla.org