How to Name Colors in Web Design: Naming Rules That Make Colors Easy to Manage

When a web design team calls the same blue “main blue,” “booking-button blue,” and “color 6,” it becomes difficult to tell which value should change. Giving colors names that describe what they are used for, not just what they look like, makes the palette easier to share and maintain. This article explains a practical naming approach using a meeting-room booking website as an example.

Separate names for color appearance from names for interface roles

There are two useful kinds of color names. One describes the color family or shade, such as blue-600 or neutral-100. The number is a label chosen within a color scale; it is not a measurement of brightness. The other describes the color’s job in the interface, such as color-text-main for body text or color-action-primary for the main action.

With a role-based name, the booking button can change from blue to another color while keeping the name color-action-primary. A name such as blue-button, by contrast, becomes misleading after a color change. Larger sites may maintain both an appearance-based palette and a mapping of role names to it. On a small site, starting with role names alone may be sufficient.

Choose a consistent word order and format. For example, use lowercase words separated by hyphens, then put the prefix color before the affected element and its role. primary alone could refer to text or a button, so include a category such as text-main or action-primary. This is a suggested team convention, not a universal naming standard required for every website.

An example color-name map for a room-booking page

Imagine a page where visitors search for available meeting rooms and select one to book. A HEX code specifies a web color using hexadecimal characters. The following table keeps the name, actual color, and place of use together so the whole team can refer to the same source of information.

The pale page background ■#F3F6FA and white cards ■#FFFFFF have a contrast ratio of approximately 1.08:1. That subtle difference may not provide a sufficient boundary when a card needs to be clearly identified. For essential card or input-field outlines, use ■#74879A. It has a contrast ratio of approximately 3.70:1 against white ■#FFFFFF and 3.41:1 against the pale page background ■#F3F6FA.

On white cards ■#FFFFFF, the main text color ■#243447 has a contrast ratio of approximately 12.67:1, while muted supporting text ■#536476 has approximately 6.08:1. The “Book” button pairs a ■#205C8E fill with white ■#FFFFFF text, giving approximately 7.04:1. Never assume a color works for text simply because it looks dark; check it against the background on which it appears.

Notice that the card surface and button text both use ■#FFFFFF, but their names are color-surface-card and color-action-on-primary. They happen to share a value today, but the roles are different. Keeping separate names allows one to change without unintentionally changing the other.

Keep the naming system small and recheck combinations after changes

Avoid vague names such as nice-blue and color1, or names that no longer match how a color is used. Before adding a new color, check whether an existing text, surface, action, or border role already fits. Too many near-duplicate roles make the design harder to maintain.

In a shared color table, record the name, HEX code, purpose, neighboring background, and screens that use it. CSS (Cascading Style Sheets, the language that controls a web page’s appearance) also offers custom properties for reusing named values. A custom property can be named --color-action-primary and referenced with var(--color-action-primary). Naming a property does not, however, make its color combinations automatically accessible.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text generally needs a contrast ratio of at least 4.5:1, and qualifying large text at least 3:1. Essential non-text information, including some user-interface boundaries, may also require 3:1 against adjacent colors. The measurements given here are for opaque solid-color pairs and do not establish compliance for an entire page.

HueRoll can help you inspect HEX codes and lighter or darker color suggestions. It does not directly check arbitrary custom color pairs or automatically determine AA or AAA conformance. Whenever a named value changes, verify the actual foreground/background combinations separately instead of relying on the name.