CSS Colors Explained: HEX, RGB, HSL and Modern Color Functions

Category: Web Development · Published: 2026-08-03

CSS colors are the visual building blocks of web development. Over the years, the way web browsers process and display color has evolved dramatically.

1. How CSS Represents Colors

When you define a color in CSS, the browser converts it into electrical signals that light up the Red, Green, and Blue subpixels of your device screen. Today, there are several color models supported in modern browsers, each offering different advantages for developers.

2. HEX Colors

Hexadecimal (HEX) is the oldest and most popular color code format on the web. It represents colors as base-16 values. Syntax: #RRGGBB[AA] Each channel (Red, Green, Blue) uses a two-character hex value from 00 (0) to FF (255). Example: #FF5CAA represents a bright pink color. Modern browsers also support 8-digit HEX codes, where the last two digits define the opacity (Alpha): #FF5CAA80 translates to bright pink with 50% opacity.

3. RGB and RGBA

The RGB model represents colors as decimal values from 0 to 255. Old syntax: rgb(255, 92, 170) and rgba(255, 92, 170, 0.5). Modern syntax (CSS Color Level 4): rgb(255 92 170 / 50%). The modern syntax uses spaces to separate channels and a slash for the opacity, creating cleaner code that aligns with other modern CSS specs.

4. HSL and HSLA

HSL stands for Hue, Saturation, and Lightness. It represents colors on a cylinder wheel, making it far more intuitive to edit than HEX or RGB. Modern syntax: hsl(328deg 100% 68% / 50%)

• Hue: The angle on the color wheel (0-360). 0 is red, 120 is green, 240 is blue.
• Saturation: The color intensity (0% gray, 100% pure hue).
• Lightness: The amount of white/black (0% black, 50% normal, 100% white).

HSL makes adjusting hover states simple. You can easily create a darker hover variant by just decreasing the lightness value.

5. Modern CSS Color Functions

Modern CSS introduces dynamic APIs for manipulating colors at runtime. The most powerful is color-mix():

6. CSS Gradients

Gradients transition smoothly between multiple colors. You can build linear and radial gradients in CSS using our CSS Gradient Generator. Here is an example of linear gradients:

7. CSS Custom Properties

By saving your colors in CSS variables, you can modify themes instantly using JavaScript:

8. Choosing the Right Color Format

Use this guideline to pick your color formats:

• Use HEX: For sharing color values quickly, copying from design apps, or static single colors.
• Use HSL: For design systems where you need to build custom scales or hover states manually.
• Use OKLCH: For wide-gamut Display P3 rendering and uniform brightness across variations.

9. Frequently Asked Questions