RGB, HEX, HSL Explained: A Practical Guide to Color Formats and Conversion

A designer sends you a color value: #1CB8B0. Your CSS file uses rgb(). The design token system expects HSL. And the marketing team's brand guide lists Pantone references. Suddenly, one teal color has four different representations, and you need to move between them without drifting from the intended shade.

Color formats are not interchangeable labels for the same thing. Each one describes color through a different lens, and understanding the mechanics behind each format makes you faster at picking colors, debugging visual issues, and communicating with designers. Here is how they actually work.

RGB: How Screens See Color

RGB stands for Red, Green, Blue. Every pixel on your screen is a cluster of three tiny lights: one red, one green, one blue. By varying the intensity of each light from 0 (off) to 255 (full brightness), the screen can produce roughly 16.7 million different colors.

rgb(28, 184, 176) means: red at intensity 28 out of 255, green at 184, blue at 176. The result is a medium teal. Because red is very low and green and blue are both high, you get a cool, blue-green tone.

Key characteristics of RGB:

• Additive color model: adding more light makes colors brighter. rgb(255, 255, 255) is white (all lights at maximum). rgb(0, 0, 0) is black (all lights off).
• Three channels, each ranging from 0 to 255
• Total possible combinations: 256 × 256 × 256 = 16,777,216 colors
• Directly maps to how screens render color, so there is no conversion loss for digital displays

When RGB makes sense: JavaScript canvas operations, image processing code, any situation where you are programmatically manipulating color channels. If you need to increase brightness, you raise all three values. If you need to desaturate, you move all three toward their average.

RGBA adds a fourth channel: alpha (opacity). rgba(28, 184, 176, 0.5) is the same teal at 50% transparency. The alpha channel ranges from 0 (fully transparent) to 1 (fully opaque). CSS now also supports rgb(28 184 176 / 50%) using the modern syntax without commas.

HEX: RGB in Compact Notation

HEX colors are not a different color model. They are RGB values written in hexadecimal (base-16) notation. #1CB8B0 is the same color as rgb(28, 184, 176).

Here is how the conversion works:

• 1C in hexadecimal = 1×16 + 12 = 28 in decimal (red)
• B8 in hexadecimal = 11×16 + 8 = 184 in decimal (green)
• B0 in hexadecimal = 11×16 + 0 = 176 in decimal (blue)

Each pair of hex digits represents one color channel. The # prefix is a convention that tells parsers "this is a color value, not a number."

Shorthand notation: When both digits in each pair are the same, you can shorten the code. #AABBCC can be written as #ABC. So #FF0000 (pure red) becomes #F00. But #1CB8B0 cannot be shortened because the digits are not repeated pairs.

The RGB to HEX Converter handles these conversions instantly, including edge cases like very dark colors where the hex values start with zero (which you must include: #0A0B0C, not #A0B0C).

HEX with alpha: Eight-digit hex codes add two digits for transparency. #1CB8B080 is the teal at 50% opacity. 80 in hex is 128 in decimal, which is approximately 50% of the 0-255 range. This format is supported in all modern browsers but some older design tools may not recognize it.

HSL: How Humans Think About Color

RGB and HEX describe color in terms of light physics. HSL describes color in terms of how we perceive it: Hue, Saturation, Lightness. This makes it dramatically easier to work with when you are making design decisions.

hsl(177, 74%, 42%) describes our teal as:

• Hue: 177 degrees on the color wheel (0 is red, 120 is green, 240 is blue, 360 loops back to red). 177 is in the cyan/teal region.
• Saturation: 74% how vivid the color is. 0% is completely gray, 100% is the most vibrant version of that hue.
• Lightness: 42% how light or dark the color is. 0% is black, 100% is white, 50% is the "pure" color.

Why HSL is superior for design work:

• Want a darker version of a color? Just reduce the lightness. In RGB, you have to reduce all three channels proportionally, which is error-prone.
• Want a muted version? Reduce saturation. In RGB, you need to calculate the average and move each channel toward it.
• Want a complementary color? Add 180 to the hue. In RGB, you would need to subtract each channel from 255, which only gives you the complement of the exact color.
• Want to build a consistent color palette? Keep saturation and lightness constant, vary the hue. In RGB, there is no straightforward way to do this.

The Color Converter translates between all three formats instantly. Type any value and see its RGB, HEX, and HSL equivalents side by side.

Side-by-Side Comparison

Property	RGB	HEX	HSL
Representation	Three decimal numbers (0-255)	Six hex digits (00-FF)	Degree + two percentages
Readability	Medium	Low (requires hex fluency)	High (intuitive)
Adjustment ease	Hard (channels interdependent)	Hard (same as RGB)	Easy (independent axes)
CSS support	Full	Full	Full
Best for	Programmatic manipulation	Compact CSS notation	Design work, palettes
Alpha support	rgba() or rgb() with /	8-digit hex	hsla() or hsl() with /

Other Color Formats Worth Knowing

CMYK (Cyan, Magenta, Yellow, Key/Black): The color model for print. CMYK is subtractive: ink absorbs light rather than emitting it. A digital color may look different when printed because the CMYK gamut (range of reproducible colors) is smaller than RGB. If you design for print, always preview in CMYK mode before sending files to the printer.

HWB (Hue, Whiteness, Blackness): A newer CSS format supported since 2022. hwb(177 8% 28%) describes the same teal. The idea is that mixing a hue with white and black is more intuitive than saturation and lightness. Browser support is now universal, but adoption in design tools is still catching up.

LAB and LCH: Perceptually uniform color spaces. In RGB and HSL, mathematically equal steps do not produce visually equal changes. LAB and LCH fix this. lch(67% 40 185) gives consistent perceptual changes when you adjust any axis. CSS now supports lab(), lch(), oklch(), and oklab() functions. If you are building design systems with consistent contrast ratios across colors, these formats are worth learning.

Converting Between Formats

RGB to HEX: Convert each decimal channel to hexadecimal. 28 becomes 1C, 184 becomes B8, 176 becomes B0. Concatenate with a hash: #1CB8B0.

HEX to RGB: Split into pairs, convert each from hex to decimal. #FF6633 becomes rgb(255, 102, 51).

RGB to HSL: This conversion involves more math. Normalize the RGB values to 0-1 range, find the max and min, calculate the hue based on which channel is dominant, derive saturation from the range between max and min, and compute lightness as the average of max and min. The formula is well-defined but tedious to do by hand, which is why the Color Converter exists.

HSL to RGB: Also involves a multi-step calculation. You compute a chroma value from saturation and lightness, find the intermediate values for each channel, and add the lightness offset. Again, not something you want to do manually.

Practical Tips for Working with Color

Use HSL in your CSS. Even if your design specs come in HEX, convert to HSL in your stylesheets. Creating hover states becomes trivial: hsl(177, 74%, 32%) is a darker version of the same teal (just reduced the lightness from 42% to 32%). Creating disabled states is equally easy: hsl(177, 20%, 42%) desaturates it.

Define CSS custom properties in HSL channels. A powerful pattern in modern CSS:

:root {
  --brand-h: 177;
  --brand-s: 74%;
  --brand-l: 42%;
  --brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
  --brand-light: hsl(var(--brand-h), var(--brand-s), 85%);
  --brand-dark: hsl(var(--brand-h), var(--brand-s), 25%);
}

Now your entire color system derives from three variables. Change the hue, and every derivative color updates automatically.

Test your colors for accessibility. WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Our teal (#1CB8B0) on a white background has a contrast ratio of about 2.7:1, which fails for normal text. You would need to darken it to approximately #0D8A83 (lightness around 30%) to meet the 4.5:1 threshold. The Color Picker shows contrast ratios as you adjust colors, so you can find the accessible version without trial and error.

Build gradients with HSL. Gradients between two HSL colors with the same saturation and different hues produce smooth, vibrant transitions. Gradients between two arbitrary HEX or RGB values can pass through muddy grays in the middle. The CSS Gradient Generator lets you build gradients visually and export the CSS code.

Color formats are one of those topics that seems simple until you actually need to work with them. Understanding the mechanics behind each one, knowing which to use in which context, and having the conversion tools at hand removes a whole category of friction from design and development work.