Why #3B82F6 Looks Different on Every Screen: The Complete HEX, RGB & HSL Color Conversion Guide

It starts the same way every time. Your designer drops a Figma link, and the primary button is #3B82F6. You copy it into your CSS file — but then the backend engineer asks for the RGB value because their CSS-in-JS library works differently. And the marketing team wants the HSL version for the brand guidelines doc. Same color, three different requests, three different formats. This guide sorts all of that out.

HEX, RGB, and HSL: What's Actually Different?

All three formats describe the same thing — a color on screen — but they use different mental models to do it. HEX uses hexadecimal shorthand that web browsers have understood since the 1990s. RGB talks to you in the language of light, mixing red, green, and blue at different intensities. HSL thinks like a painter: what hue is it, how vivid is it, how light or dark?

Understanding HEX: The Web Standard

HEX (hexadecimal) is the lingua franca of web color. It packs three 8-bit values — red, green, blue — into six characters after the hash symbol. Each pair of characters represents one channel from 00 (none) to FF (full intensity). So #3B82F6 breaks down as: red = 3B (59 in decimal), green = 82 (130), blue = F6 (246).

You'll also see shorthand HEX like #FFF or #03F — these expand by doubling each digit (#FFFFFF, #0033FF). It's the same color, just fewer characters. One thing HEX cannot natively express is transparency. For that, you need 8-digit HEX like #3B82F6CC, or you switch to RGBA.

RGB: The Format CSS Engineers Actually Prefer

RGB stands for Red, Green, Blue — each channel runs from 0 to 255, giving you 16.7 million possible combinations. In CSS, it looks like rgb(59, 130, 246). The advantage over HEX is that it's easier to manipulate programmatically. Want to reduce the red channel by 20? Just subtract from the first number. Want to fade a color in JavaScript? RGBA makes that trivial: rgba(59, 130, 246, 0.5) is 50% transparent.

/* HEX — clean, compact */
.button { background: #3B82F6; }

/* RGB — easy to animate */
.button { background: rgb(59, 130, 246); }

/* RGBA — transparent overlay */
.overlay { background: rgba(59, 130, 246, 0.15); }

/* CSS custom property with HSL — most maintainable */
:root { --brand-hue: 217; }
.button { background: hsl(var(--brand-hue), 91%, 60%); }
.button:hover { background: hsl(var(--brand-hue), 91%, 50%); }

HSL: The Format Designers Wish Everyone Used

HSL (Hue, Saturation, Lightness) is the most human-readable color format. Hue is a number from 0 to 360 representing position on the color wheel — 0 is red, 120 is green, 240 is blue. Saturation controls how vivid the color is (0% is grayscale, 100% is full color). Lightness controls how light or dark it is (0% is black, 100% is white, 50% is the 'true' color).

This structure makes HSL incredibly powerful for design systems. Want a lighter version of your brand blue? Keep hue and saturation the same, bump lightness to 80%. Want a hover state that's slightly darker? Drop lightness by 10 points. No hex math, no guessing — just intuitive adjustments.

How to Convert Between HEX, RGB, and HSL

HEX to RGB conversion is straightforward: split the six characters into three pairs, convert each from base-16 to base-10. #3B82F6 → (0x3B, 0x82, 0xF6) → (59, 130, 246). RGB to HSL is more involved — you need to normalize the values, find the min and max, then calculate hue angle, saturation, and lightness through a series of conditional formulas. Most developers don't do this by hand, and they shouldn't.

Building a Color Palette That Actually Works

A professional color palette needs more than a primary color. You need a full range of shades for backgrounds, borders, text, and interactive states. The cleanest way to do this is with HSL — fix your hue and saturation, then generate a scale of lightness values from 95% (very light background) down to 20% (very dark text).

• 50: hsl(217, 91%, 97%) — page background, very light tint
• 100: hsl(217, 91%, 93%) — card backgrounds, subtle fills
• 200: hsl(217, 91%, 85%) — borders, dividers
• 300: hsl(217, 91%, 75%) — disabled states, placeholder text
• 400: hsl(217, 91%, 65%) — secondary actions, less prominent elements
• 500: hsl(217, 91%, 60%) — primary brand color (#3B82F6 equivalent)
• 600: hsl(217, 91%, 50%) — hover states, active states
• 700: hsl(217, 91%, 40%) — pressed states, strong emphasis
• 800: hsl(217, 91%, 30%) — dark backgrounds, inverted text
• 900: hsl(217, 91%, 20%) — maximum contrast, dark mode primary

When to Use Which Format in Real Projects

In practice, the format you use depends on context. Design handoff documents and HTML attributes work best with HEX — it's compact and universally understood. CSS custom properties and Tailwind config files pair well with HSL because you can construct dynamic values from component variables. JavaScript color manipulation is cleanest with RGB or RGBA numbers. And for SVG fill attributes or email HTML, HEX is still the safest choice.