Why the same colour has four different-looking values
HEX (#3b82f6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)) all describe the identical colour — they just encode it differently. HEX and RGB store raw red/green/blue channel values; HSL stores hue, saturation and lightness, which is often more intuitive for tweaking a colour by hand (e.g. darkening by lowering lightness) without recalculating three separate channel values.
When to reach for HSL over HEX
If you’re building a colour palette or theme system, HSL makes it trivial to generate consistent shades and tints of the same hue — keep hue and saturation fixed and vary lightness. HEX and RGB are more common in design handoffs and CSS written by hand, since most design tools default to HEX.
The 147 named CSS colours
CSS supports 147 standard named colours (rebeccapurple, cornflowerblue, and so on) that map to exact HEX values under the hood. The converter recognises all of them and converts freely between a name and its HEX/RGB/HSL equivalents.
Why use UtilityApps for this
Conversion happens instantly in your browser with no signup — nothing you type is sent to a server.