If you've ever stared at a design file and been told to use #1E3A5F but your CSS uses rgb() values, or if you've wondered why some developers prefer HSL while others stick to HEX, this guide is for you. We cover the three dominant CSS color formats in depth — what they mean, their strengths and weaknesses, and how to convert between them accurately.
HEX Colors (#RRGGBB)
HEX colors (short for hexadecimal) express each of red, green, and blue as a two-digit hexadecimal number from 00 to FF. #000000 is black (all channels at 0), #FFFFFF is white (all channels at maximum), and #FF0000 is pure red.
Strengths of HEX: Compact, universally supported in all CSS versions, widely used in design tools like Figma, Adobe XD, and Canva. Easy to copy-paste from design files into code.
Limitations: Not human-readable. Looking at #4F46E5 and immediately knowing it's an indigo-blue requires experience. Hard to mentally adjust — if you want a slightly lighter version, you need to calculate the change mathematically.
HEX also supports an optional two-digit alpha channel: #RRGGBBAA. For example, #FF000080 is a 50%-transparent red. Support for this 8-digit format is excellent in modern browsers.
RGB Colors (rgb(R, G, B))
RGB directly expresses the red, green, and blue channels as decimal integers from 0 to 255. The same indigo blue as above would be rgb(79, 70, 229). With the alpha variant (rgba()), transparency is a fourth value from 0 (invisible) to 1 (fully opaque): rgba(79, 70, 229, 0.5).
Strengths of RGB: Easier to parse mentally than HEX if you know the color model. Directly maps to how display hardware works. Can be dynamically generated in JavaScript by constructing the rgb() string with variables.
Limitations: Like HEX, it's still not intuitive to see RGB values and know if a color is saturated or muted, warm or cool. Adjusting lightness while preserving hue requires recalculating all three channels.
HSL Colors (hsl(H, S%, L%))
HSL stands for Hue, Saturation, and Lightness. It was designed to be more human-readable than RGB or HEX:
- Hue (0–360): The "pure color" on a color wheel. 0 = red, 120 = green, 240 = blue.
- Saturation (0–100%): How vivid the color is. 0% = completely grey, 100% = full color.
- Lightness (0–100%): How light or dark. 0% = black, 50% = the "true" color, 100% = white.
Our indigo blue becomes approximately hsl(243, 75%, 59%). The power of HSL becomes clear when creating color palettes: if you want a lighter version of the same color, simply increase the L value. Want a muted, desaturated version? Lower the S value. This is something you can't do intuitively with HEX or RGB.
Best practice in modern CSS: Define your brand colors in HSL and use CSS custom properties (variables) to create consistent, theme-able palettes. For example:
:root {
--primary-hue: 243;
--primary: hsl(var(--primary-hue), 75%, 59%);
--primary-light: hsl(var(--primary-hue), 75%, 75%);
--primary-dark: hsl(var(--primary-hue), 75%, 40%);
}Converting Between Formats
To convert HEX to RGB: split the hex string into three pairs, convert each pair from base-16 to base-10. #4F46E5 → R: 0x4F = 79, G: 0x46 = 70, B: 0xE5 = 229 → rgb(79, 70, 229).
Converting RGB to HSL involves a series of normalization steps that are tedious to do by hand. Instead, use the Toolskuy Color Converter, which instantly converts between HEX, RGB, HSL, and CMYK with a live color preview.
Which Format Should You Use?
- Use HEX when copying colors from design tools or working with fixed brand color palettes.
- Use RGB/RGBA when you need to dynamically manipulate colors in JavaScript.
- Use HSL when building design systems, theme files, or dark mode implementations where you need predictable, human-adjustable colors.