Color Converter

All three represent the same set of displayable colors — they're just different notations. HEX (#3b82f6) is compact and common in code. RGB (59, 130, 246) maps directly to display hardware channels. HSL (217, 91%, 60%) is the most human-intuitive — you can mentally adjust hue, saturation, and lightness independently. The conversion between them is lossless (for colors in the sRGB gamut).

HSL is the best format for generating color variations programmatically. To make a color 20% lighter, just increase the L value by 20. To create a muted version, decrease S. With HEX or RGB, the same operation requires math across all three channels. CSS custom properties and color-mix() also work naturally with HSL.

It's a prefix that tells CSS the following string is a hex color value. Without it, the browser wouldn't know whether '3b82f6' is a color or some other identifier. The # itself is not part of the color code — the actual hex value is the 6 (or 3) characters that follow.

Use rgba() or hsla() — the 4th value is alpha (0 = fully transparent, 1 = fully opaque). Example: rgba(59, 130, 246, 0.5) is the blue at 50% opacity. In modern CSS you can also use hex with alpha: #3b82f680 (the last two hex digits are the alpha channel).

HEX, RGB, and HSL all operate within the sRGB color space, which covers about 35% of visible colors. Modern displays support wider gamuts (P3, Rec. 2020). CSS Color Level 4 introduces display-p3 and oklch() for wide-gamut colors. For most web work, sRGB (HEX/RGB/HSL) is sufficient and universally supported.