Web Color Basics: HEX, RGB, HSL Conversion, Palettes, and Contrast

"The color I set looks different from what I imagined." "The text is too faint to read." When building a website, color is a common place to stumble. The shortcut to handling color freely is to first understand how color is expressed as numbers. This article organizes, for first-time learners, the meaning and relationships of HEX, RGB, and HSL, plus opacity and the idea of contrast that protects readability.

Why Understanding Web Color Matters

Every color shown on screen is ultimately specified by numbers. The same "red" is written in code as #FF0000 or rgb(255, 0, 0), and a small difference in the numbers becomes a visible difference. Knowing how color works makes the following smoother:

• Reproduce the intended color accurately: match the colors in your design mockup and your code.
• Fine-tune easily: express "a bit brighter" or "slightly more muted" as numbers.
• Guarantee readability: choose colors with the contrast between background and text in mind.

There are several color notations, but the two families used daily on the web are RGB (and its hexadecimal form, HEX) and HSL. Both describe the same color from different angles, so they convert to one another.

RGB and HEX: Building Color from Light

RGB builds color by mixing the three primary colors of light: Red, Green, and Blue. Each component is specified in 256 steps from 0 to 255, and the three combine to form a color. If all three are 0 you get black; if all are 255 you get white. The more light you add, the brighter it gets, which is why this is called additive color mixing.

HEX (hexadecimal color code) rewrites those RGB values in base 16. In the form #RRGGBB, each pair of digits from the start corresponds to red, green, and blue. For example, 255 for red is FF in hex, so pure red is #FF0000. It helps to remember that decimal 0 to 255 corresponds to hex 00 to FF.

HEX also has a three-digit shorthand usable when each color is a repeated pair of digits. #FFFFFF becomes #FFF. Because HEX and RGB point to exactly the same color and only look different, you can use whichever suits the situation.

Converting between hex and RGB by hand is tedious. With the Color Code Converter, you just enter HEX, RGB, or HSL and it instantly converts to the other notations. Everything runs in your browser, so you can check color values comfortably as you work.

HSL: Color the Way Humans Perceive It

RGB is easy for computers to handle but poor for intuitive adjustments like "a bit more vivid" or "slightly darker." That is where HSL helps. HSL expresses color with three components:

• H (Hue): the kind of color, as an angle from 0 to 360 degrees. 0 is red, 120 is green, and 240 is blue, connected in a ring.
• S (Saturation): the vividness, from 0 to 100%. 0% is gray, 100% is most vivid.
• L (Lightness): the brightness, from 0 to 100%. 0% is black, 100% is white, and 50% is standard.

The advantage of HSL is that you can change brightness or vividness while keeping the same hue. When making a button hover color, for instance, HSL lets you intuitively lower only the lightness while keeping hue and saturation. It is also well suited to creating variations of related colors.

hsl(0, 100%, 50%) → pure red. Lower L to 30% for a dark red, lower S for a muted red.

Because RGB/HEX and HSL convert to one another, an effective approach is to "think in HSL when choosing a color and write HEX in code." You can check conversions between notations all at once with the Color Code Converter.

Opacity (Alpha) and Layered Color

In addition to RGB or HSL, you can specify opacity (an alpha value). Alpha ranges from 0 (fully transparent) to 1 (fully opaque) and is written like rgba(0, 0, 0, 0.5). HSL supports the same via hsla().

HEX can express alpha too. In the form #RRGGBBAA, the last two digits correspond to opacity, so #000000FF is opaque black and #00000080 is roughly 50% translucent black.

Alpha is useful in many situations:

• Overlays: place a translucent black over an image to make white text on top readable.
• Shadows and highlights: create natural shadows that blend with the background.
• Layering: make overlapping elements look soft.

One caution: a translucent color looks different depending on the background. The same translucent color gives a completely different impression over white than over black. Especially when using transparency for text color, contrast tends to fall short depending on the background, so take care.

Contrast Ratio and Accessible Color

An often-overlooked aspect of choosing color is readability (accessibility). When the brightness difference between background and text is small, people with low vision or anyone in bright outdoor light may not be able to read it. The measure that quantifies this is the contrast ratio.

Contrast ratio ranges from 1:1 (no difference) to 21:1 (black and white). WCAG, the international web accessibility guidelines, sets the following criteria:

For most sites, aiming first for AA at 4.5:1 is a good rule of thumb. Faint gray text, or same-hue text on a highly saturated background, may look stylish yet often falls short on contrast.

You cannot judge whether your colors meet the criteria by eye alone. Enter the background and text colors into the Color Contrast Checker and it shows the contrast ratio and WCAG pass/fail on the spot. Checking early in the design saves you from major rework later.

The Basics of Building a Palette

Once you understand how color works, the next question is how to combine multiple colors. There are classic approaches to color schemes, and they are easiest to grasp using the HSL hue circle as a base.

1. Analogous colors: group colors that sit next to each other on the wheel. They feel cohesive and calm.
2. Complementary colors: combine colors directly opposite (about 180 degrees apart). They set each other off and add contrast.
3. Triadic colors: three colors evenly spaced on the wheel (about 120 degrees apart). Balanced and lively.

The trick to a cohesive palette in practice is to limit the number of hues. A common structure assigns roles to about three colors: a base color (background and whitespace), a main color (the site's keynote), and an accent color (buttons and emphasis). Preparing variations of each color by changing lightness or saturation keeps consistency while widening your range of expression.

When building a scheme from scratch feels hard, the Color Palette Generator helps. It can automatically produce harmonious schemes from a base color, so a good flow is to use it as a starting point and then verify readability with the Color Contrast Checker.

Color is expressed by numbers, RGB, HEX, and HSL, each describing the same color from a different angle. First master what the notations mean and how they convert, then control layering with opacity and readability with contrast ratio. Understanding the mechanics and pairing it with tools brings you closer to color schemes that are both attractive and usable.