Guide to HTML color codes: Master hex codes and color pickers

The building blocks of HTML color

In the digital world, color is treated as data. When you select a shade, you’re essentially providing a system with a recipe for light. Understanding how these recipes are written allows you to troubleshoot design issues and communicate more effectively with developers.

• Digital displays use light to create color rather than ink or pigment.
• Codes ensure that the red you see on your phone is the same red seen on a laptop.
• Most design software integrates these codes directly into the interface.
• Learning these systems opens up a palette of over 16 million possible combinations.
• Standardization makes it easy to share palettes between different creative tools.

Primary types of HTML color codes

While there are several ways to define color, most web projects rely on two primary systems: hex codes and RGB. These models are closely related, as they both describe how much red, green, and blue light should be mixed together.

• Hexadecimal codes use a hash symbol followed by six characters to define color.
• The RGB model uses three numbers to represent the intensity of red, green, and blue light.
• RGB is an additive model, meaning adding all colors together creates white light.
• Hex codes are more concise and are generally the preferred format for CSS and HTML.
• Both systems are interchangeable and can be converted with simple design tools.

What are hex codes

A hex code is a short, alphanumeric expression of computer generated color. It consists of three pairs of characters, each representing the intensity of one primary color of light. These codes are highly efficient for coding because they pack a lot of information into a very small string of text.

• The code always starts with a hash symbol to indicate it’s a hexadecimal value.
• Values range from 0 –9 and then from a–f to represent intensity.
• The first two characters control red, the middle two control green, and the last two control blue.
• A value of 00 represents zero intensity, while ff represents maximum brightness.
• Pure black is represented by #000000 and pure white is represented by #ffffff.

Examples of hex code colors

Here are some examples of hex code colors and their corresponding RGB values in Adobe Color:

To create a basic red hex code, we use the highest intensity of red light for the red section of the code, or #FF0000.

To create a basic green hex code, we use the highest intensity of green light for the green section of the code, or #00FF00.

To create a basic blue hex code, we use the highest intensity of blue light for the blue section of the code, or #0000FF.

You’ll notice in these examples that the RGB values reflect only the color of light applied.

Exploring the RGB color model

The RGB color model is the foundation of almost all electronic displays. It mimics how the human eye perceives light by combining different levels of red, green, and blue. In HTML, this is written as a functional expression that defines each color channel individually.

• Values for each channel are set on a scale from 0–255.
• The format is written as RGB followed by the three values in parentheses.
• RGB (255, 0, 0) creates a pure, bright red by turning the red light all the way up.
• Setting all three values to the same number results in a shade of gray.
• This model is particularly useful when you need to adjust transparency using RGB.

Other specialized HTML color codes

While hex and RGB are the industry standards, other models exist for specific use cases. These alternative systems can sometimes be more intuitive for designers who think in terms of traditional color theory or printing.

• HSL stands for hue, saturation, and lightness, which feels more natural to many artists.
• CMYK is used primarily for print designs involving cyan, magenta, yellow, and black.
• Lab color is designed to be perceptually uniform, mimicking how humans see color differences.
• HWB focuses on hue, whiteness, and blackness to adjust the tint and shade of a color.
• Most modern HTML color picker tools allow you to toggle between these various models.