Three Ways to Describe the Same Color
The color #3B82F6 is also rgb(59, 130, 246) and hsl(217, 91%, 60%). All three notations describe the exact same shade of blue, but each representation serves a different purpose in web development and design. Understanding when to use each format makes your CSS more maintainable, your design decisions more intuitive, and your color palettes more consistent.
Every color displayed on a screen is produced by mixing red, green, and blue light at different intensities. This is the RGB color model — the physical basis for all digital color. HEX, RGB, and HSL are simply different ways of expressing positions within this color space, each optimized for different tasks.
HEX: The Developer Default
HEX color codes are the most common format in web development. A HEX code like #FF6384 is a six-digit hexadecimal number where the first two digits represent red intensity (FF = 255), the middle two represent green (63 = 99), and the last two represent blue (84 = 132). Each channel ranges from 00 (no intensity) to FF (maximum intensity), giving 256 levels per channel and 16.7 million possible colors.
HEX codes are compact, easy to copy-paste, and universally recognized by every CSS engine, design tool, and color picker. When designers share brand guidelines, they almost always include HEX codes. When you inspect an element in browser DevTools, colors are typically shown in HEX by default.
Shorthand HEX codes use three digits when each pair is a repeated character: #FF6633 can be written as #F63. Modern CSS also supports 8-digit HEX codes for transparency: #FF638480 is the same blue at 50% opacity (80 in hex is 128 in decimal, which is 50% of 255).
The weakness of HEX is that it is not human-readable. Looking at #3B82F6, you cannot intuitively tell what color it is or how to make it lighter, darker, or more muted without a tool. This is where HSL excels.
RGB: The Programmatic Format
RGB notation — rgb(59, 130, 246) — expresses the same red, green, and blue channels as HEX but in decimal numbers from 0 to 255. It is more readable than HEX (you can see that blue is dominant at 246 while red is minimal at 59) and is the native format for most programming languages, game engines, and graphics APIs.
CSS rgba() adds an alpha channel for transparency: rgba(59, 130, 246, 0.5) is the same blue at 50% opacity. This is particularly useful for overlays, shadows, and glassmorphism effects where you need precise transparency control.
Modern CSS now supports the rgb() function with an optional alpha parameter using slash notation: rgb(59 130 246 / 50%). This is gradually replacing the separate rgba() function, though both remain fully supported.
RGB is the best format for programmatic color manipulation — calculating gradients, interpolating between colors, applying brightness adjustments, or any situation where you need to perform arithmetic on color values. Most color manipulation libraries work internally in RGB, converting to and from other formats for input and output.
HSL: The Designer's Choice
HSL — hsl(217, 91%, 60%) — represents color as Hue, Saturation, and Lightness. This maps directly to how humans think about color. Hue is the color itself, expressed as a degree on the color wheel: 0° is red, 120° is green, 240° is blue, and 360° wraps back to red. Saturation is how vivid the color is, from 0% (gray) to 100% (fully saturated). Lightness is how bright or dark, from 0% (black) to 100% (white), with 50% being the "normal" pure color.
The power of HSL is intuitive manipulation. Want a lighter version of your brand blue? Increase the L value: hsl(217, 91%, 75%) gives a lighter tint. Want a muted, pastel version? Decrease saturation: hsl(217, 40%, 60%). Want the complementary color? Add 180 to the hue: hsl(37, 91%, 60%) gives you the opposite — a warm orange. None of these adjustments are intuitive in HEX or RGB.
This makes HSL ideal for building color systems. Start with a base brand color, then derive an entire palette by varying lightness and saturation: hover states are 5-10% lighter, disabled states are 50% less saturated, backgrounds are 90-95% lightness, text on colored backgrounds is 15-20% lightness. The hue stays constant, ensuring every derived color is harmoniously related to the base.
Choosing the Right Format
In practice, most professional codebases use a mix of formats, each in its natural context. Design tokens and brand color definitions use HEX because designers provide them that way and they are the most compact. Dynamic styles, hover effects, and theme variations use HSL because manipulation is intuitive. Programmatic color calculations in JavaScript use RGB because arithmetic is straightforward.
CSS custom properties (variables) are a natural place for HSL because you can define a color once and derive variants throughout your stylesheet. Define your brand color as three HSL components — hue, saturation, and lightness as separate variables — and every derived color becomes a simple calc() expression. This is how modern design systems like Tailwind CSS handle color internally.
For accessibility, the most important color relationship is contrast ratio — the brightness difference between text and background colors. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. HSL lightness gives a rough indication of contrast, but actual contrast ratios must be calculated using the relative luminance formula, which uses RGB values. Tools like WebAIM's Contrast Checker handle this automatically.
Convert Colors Instantly
Our Color Picker shows any color simultaneously in HEX, RGB, and HSL formats. Pick a color visually or enter any value in one format, and the other formats update instantly. Copy the format you need with a single click — perfect for moving between design tools and code editors.