HEX vs RGB vs HSL: Color Formats Explained

The HEX Color Format

A HEX (hexadecimal) color code is a six-character string prefixed with a hash symbol, like #FF6B2B. The six characters represent the red, green, and blue color channels in three pairs of hexadecimal digits.

Hexadecimal uses a base-16 numbering system with digits 0–9 and letters A–F. Each pair can represent values from 00 (decimal 0) to FF (decimal 255), giving each channel 256 possible values. With three channels there are 256³ = 16,777,216 possible HEX colors.

• #FF6B2B — Red: FF (255), Green: 6B (107), Blue: 2B (43)
• #000000 — pure black (all channels at 0)
• #FFFFFF — pure white (all channels at maximum)
• #FF0000 — pure red

Shorthand notation — when both digits in each pair are the same, you can shorten the code to three characters: #FFA500 cannot be shortened, but #AABBCC becomes #ABC.

Eight-character HEX — some tools and CSS support an 8-digit HEX that includes an alpha channel: #FF6B2BCC where the last two digits control opacity.

HEX codes are the most compact color notation and are universally supported. You'll find them in design tools (Figma, Photoshop, Sketch), CSS stylesheets, and HTML attributes.

The RGB Color Format

RGB stands for Red, Green, Blue — the three primary colors of light. The CSS syntax is rgb(red, green, blue) where each value is a decimal integer from 0 to 255, or a percentage from 0% to 100%.

Examples:

• rgb(255, 107, 43) — the same orange as #FF6B2B
• rgb(0, 0, 0) — black
• rgb(255, 255, 255) — white
• rgb(0, 128, 0) — medium green

RGB is the native format of computer monitors — every pixel is a physical combination of red, green, and blue light sources. Understanding this helps explain why mixing red and green light produces yellow, which is counterintuitive if you're used to mixing paint.

RGBA extends RGB with an alpha channel for transparency: rgba(255, 107, 43, 0.75) is the same orange at 75% opacity. This is the most common way to add transparency in CSS, and is more widely supported than 8-digit HEX.

The HSL Color Format

HSL stands for Hue, Saturation, Lightness. Unlike HEX and RGB, which describe colors in terms of hardware channels, HSL describes colors in terms that are more intuitive for human perception.

• Hue — the pure color, expressed as an angle on the color wheel from 0° to 360°. Red is 0°, green is 120°, blue is 240°.
• Saturation — how vivid the color is, from 0% (grey) to 100% (fully saturated, vivid color).
• Lightness — how light or dark the color is, from 0% (black) to 100% (white), with 50% being the pure color.

The CSS syntax is hsl(hue, saturation%, lightness%). Examples:

• hsl(20, 100%, 58%) — approximately the same orange as #FF6B2B
• hsl(0, 0%, 0%) — black
• hsl(0, 0%, 100%) — white
• hsl(120, 100%, 25%) — dark green

HSLA adds an alpha channel, just like RGBA: hsla(20, 100%, 58%, 0.75).

HEX vs RGB vs HSL: When to Use Each

All three formats describe the same colors — it's purely a matter of workflow preference. Here's a practical guide:

Use HEX when:

• Copying colors from design tools (Figma, Sketch output HEX by default)
• Writing static CSS colors where compactness matters
• Communicating a specific color to another developer or designer
• You don't need transparency

Use RGB / RGBA when:

• You need semi-transparent colors (rgba())
• Performing color math in JavaScript (working with integer channel values)
• The receiving system expects decimal RGB values

Use HSL / HSLA when:

• Creating color themes — adjust only lightness to get tints and shades of the same hue
• Generating color palettes programmatically (e.g., rotating the hue by 30° for complementary colors)
• Darkening or lightening a color without changing its hue
• Building design systems where semantic color adjustments are needed

For example, if your brand color is hsl(210, 80%, 50%), you can create a hover state by changing lightness to 40% and a disabled state at 70% — all with consistent hue and saturation. Doing the same in HEX requires a color calculator.

How to Convert Between Color Formats

Converting HEX to RGB is straightforward arithmetic. Converting RGB to HSL requires a bit more math involving normalization, min/max channel values, and angle calculations. You rarely need to do this manually.

HEX to RGB formula:

1. Split the 6-character HEX into three pairs: RR GG BB
2. Convert each pair from base 16 to base 10
3. Result: rgb(R, G, B)

Example: #1A73E8 → R=1A=26, G=73=115, B=E8=232 → rgb(26, 115, 232)

CSS custom properties tip — you can store HSL components as CSS variables to enable theme switching:

:root {
  --primary-h: 210;
  --primary-s: 80%;
  --primary-l: 50%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

This makes it trivial to change brightness across the entire theme by adjusting a single variable. You can also pair this with the CSS Gradient Generator to create smooth multi-color gradients using HSL.

Other Color Formats Worth Knowing

Beyond HEX, RGB, and HSL, modern CSS and design tools support additional formats:

• Named colors — CSS has 140+ named colors like tomato, steelblue, rebeccapurple. Convenient but limited.
• HWB (Hue, Whiteness, Blackness) — CSS Level 4 format; more intuitive than HSL for some use cases.
• LCH / LAB — perceptually uniform color spaces where equal numerical differences produce equal perceived color differences. Supported in modern CSS via lch().
• OKLCH / OKLAB — improved perceptual color spaces increasingly used in design tools.
• CMYK — used in print design (cyan, magenta, yellow, black). Not a native CSS format.

For day-to-day web development, HEX, RGB, and HSL cover the vast majority of needs. If you work with the Image Color Picker, it returns HEX and RGB values you can paste directly into your stylesheet.

Frequently Asked Questions

Which color format is best for CSS — HEX, RGB, or HSL?

It depends on the use case. HEX is the most compact and is ideal for static colors in stylesheets. RGB is best when you need alpha transparency via rgba(). HSL is best for programmatically adjusting brightness or saturation, and for creating color themes with consistent hue variations.

What does the # in a HEX color code mean?

The # symbol is simply a prefix that tells the browser the following value is a hexadecimal color code. It has no mathematical meaning. The six characters after it represent the red, green, and blue channels in pairs of hexadecimal digits.

What is the difference between RGB and RGBA?

RGB specifies three color channels (red, green, blue) each from 0 to 255. RGBA adds a fourth alpha channel from 0 (fully transparent) to 1 (fully opaque), allowing semi-transparent colors. For example, rgba(255, 0, 0, 0.5) is a half-transparent red.

How do I convert a HEX color to RGB?

Split the HEX code into three pairs of digits (e.g., #FF6B2B becomes FF, 6B, 2B), then convert each pair from hexadecimal to decimal (255, 107, 43). The result is rgb(255, 107, 43). Or use the ToolsBox Color Converter to do this automatically.