Color Picker & Converter

The Complete Guide to CSS Color Formats: HEX, RGB, HSL, and More

Color is one of the most powerful tools in a designer's or developer's toolkit, yet the multiple color format systems used in CSS — HEX, RGB, RGBA, HSL, HSLA, and now color() — are a constant source of confusion. Understanding when to use each format, why they exist, and how they relate to each other is essential for any professional building for the web. Our free Color Picker and Converter lets you instantly translate between all major color formats with a single click.

How Computers Represent Color: The RGB Model

At the hardware level, every display monitor produces color by combining three primary colors of light: Red, Green, and Blue (RGB). Each pixel on your screen is made up of three tiny sub-pixels, one for each color channel. By varying the brightness of each sub-pixel independently, the monitor can produce millions of distinct colors.

In standard 8-bit displays (the overwhelming majority of consumer screens), each color channel is represented by a value from 0 (off/dark) to 255 (maximum intensity). This gives us 256 × 256 × 256 = 16,777,216 possible colors, commonly called "24-bit true color" or "16.7 million colors."

HEX Color Codes (#RRGGBB)

The hexadecimal color format is the most common way to write colors in CSS and design tools. A HEX code is simply the RGB values written in base-16 (hexadecimal) notation:

• #FF0000 = Red (R=255, G=0, B=0)
• #00FF00 = Green (R=0, G=255, B=0)
• #0000FF = Blue (R=0, G=0, B=255)
• #FFFFFF = White (R=255, G=255, B=255)
• #000000 = Black (R=0, G=0, B=0)

Each pair of hex digits represents one color channel. FF in hex = 255 in decimal. 00 in hex = 0 in decimal. When both digits in a channel pair are identical (e.g., #RRGGBB → #RGB), the HEX code can be shortened to 3 digits: #FF6600 → #F60.

HEX with Alpha: The 8-digit format #RRGGBBAA adds an alpha (opacity) channel. #FF000080 is 50% transparent red. This is supported in all modern browsers.

RGB Color Notation (rgb() and rgba())

The CSS rgb() function expresses the same color model in a more human-readable decimal notation:

color: rgb(255, 0, 0);        /* Solid red */
color: rgba(255, 0, 0, 0.5);  /* 50% transparent red */

The alpha value in rgba() ranges from 0 (fully transparent) to 1 (fully opaque). In modern CSS, the syntax rgb(255 0 0 / 50%) is also valid and merges rgb() and rgba() into a single function.

When to prefer RGB over HEX: Use rgb() when you need to dynamically manipulate color channel values in JavaScript, or when you are creating colors from CSS custom properties with calc() functions.

HSL Color Notation (hsl() and hsla())

HSL stands for Hue, Saturation, Lightness. It is a cylindrical representation of the RGB color model that maps much more closely to how humans perceive and describe color:

color: hsl(0, 100%, 50%);       /* Pure red */
color: hsl(120, 100%, 50%);     /* Pure green */
color: hsl(240, 100%, 50%);     /* Pure blue */
color: hsl(0, 100%, 50%, 0.5);  /* 50% transparent red */

• Hue (0–360°): The color angle on the color wheel. 0° and 360° are red, 120° is green, 240° is blue.
• Saturation (0%–100%): How vibrant or "colorful" the color is. 0% is completely gray; 100% is the most vivid version of the hue.
• Lightness (0%–100%): How light or dark the color is. 0% is always black; 100% is always white; 50% is the "pure" hue color.

Why HSL is Powerful for Design Systems

HSL is the preferred format for design systems and component libraries because it makes color manipulation intuitive:

• To create a lighter shade: increase the Lightness value (hsl(220, 80%, 60%) → hsl(220, 80%, 80%))
• To create a darker shade: decrease the Lightness value
• To desaturate (make more muted): decrease the Saturation value
• To create a complementary color: add 180° to the Hue value

This is impossible to do intuitively with HEX or RGB values. CSS custom properties and HSL together are the foundation of modern dark-mode-compatible design systems.

CSS Custom Properties (Variables)

The most powerful modern pattern combines HSL with CSS custom properties to build fully themeable design systems:

:root {
--color-primary-h: 220;
--color-primary-s: 80%;
--color-primary-l: 55%;
--color-primary: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-l)
);
}

This pattern allows you to programmatically generate entire color palettes (light/dark shades) from a single hue value, making dark mode trivially simple to implement.

Use our free Color Picker and Converter to translate between HEX, RGB, HSL, and CSS variable formats instantly — perfect for designers, developers, and anyone working with web color.