How Hex Color Codes Work

The RGB color model

On screens, color is usually described with RGB: three numbers for red, green, and blue. Each channel ranges from 0 (no contribution) to 255 (maximum intensity). RGB is additive: combining full red, green, and blue produces white; setting all channels to zero yields black. This matches how typical displays emit light from subpixels.

When you choose a color in a design tool, you are often editing the same three numbers, whether they are shown as decimals (0–255), percentages, or encoded another way. Hexadecimal is simply a compact way to write those same 8-bit channel values.

sRGB and real-world displays

On the web, CSS hex colors almost always assume the sRGB color space: a standard gamut agreed for monitors, laptops, and phones. The hex triplet describes a point inside that gamut, not every color a high-end OLED can physically emit. Newer CSS features such as color(display-p3 1 0.4 0) expose wider gamuts, but legacy hex remains the default interchange format.

Because screens differ in calibration, ambient light, and panel technology, two devices may render the same hex slightly differently. Designers often soft-proof on multiple devices and use hardware calibration when color-critical work flows to print or broadcast. For typical UI work, consistent hex tokens in a design system matter more than chasing absolute perceptual perfection on every handset.

Hex notation in CSS

In CSS, a six-digit hex color looks like #RRGGBB. Each pair of characters is one channel: red, then green, then blue. The digits use base 16, so valid symbols are 0–9 and A–F (case does not matter to browsers).

The key mapping to remember is that two hex digits represent eight bits, which spans 0 through 255 in decimal. For example, FF is fifteen sixteens plus fifteen ones, which equals 255. 00 is zero. Therefore #FF0000 is full red with no green or blue: the same color as rgb(255, 0, 0).

Understanding hex as base 16 helps when you read minified stylesheets or copy colors from logs. If you are learning number bases in programming, hex for colors is one of the most common real-world applications.

Shorthand and eight-digit hex

When each channel is a repeated digit, CSS allows a three-digit shorthand: #RGB expands to #RRGGBB. For instance, #F0A means #FF00AA. This saves typing and keeps stylesheets readable.

Modern browsers also support #RRGGBBAA, where the final pair encodes alpha (opacity). Full opacity is FF; fully transparent is 00. There is a four-digit shorthand #RGBA when each quartet repeats. Alpha in hex is convenient when you want a single token for color plus transparency without switching to rgba().

Named colors and HSL as an alternative

CSS includes a large set of named colors such as tomato, rebeccapurple, and CanvasText (the last follows system theme colors). Names are easy to remember for demos, but designs that must stay on-brand usually rely on explicit hex or RGB values from a palette.

HSL (hue, saturation, lightness) expresses the same gamut differently. Designers often reach for HSL when they want to lighten or darken a brand color systematically, because they can hold hue steady and adjust lightness. You can convert mentally between models with tools, but the underlying values still map to RGB for rendering.

Contrast and accessibility

Choosing colors is not only about taste. Text must remain readable for users with low vision or color-vision differences. Contrast ratio compares the relative luminance of text and background. The Web Content Accessibility Guidelines (WCAG) specify minimum ratios for normal and large text; aiming for higher than the minimum improves readability in bright sunlight and on lower-quality displays.

Do not rely on color alone to convey meaning; add icons, labels, or patterns. When you pick a hex foreground and background, test the pair with a contrast checker. Slightly tweaking hex channels can preserve brand feel while meeting AA or AAA thresholds.

Remember that opacity and backdrop blur change effective contrast: semi-transparent text over busy photography may pass a simple hex pair check in isolation but fail for users once imagery loads. Test states holistically—hover, focus, disabled, and dark mode if you ship theme variants.

Common hex values