Color Code Converter

Color Code Guide: HEX, RGB, and HSL in Practice

Every color on screen is a mix of red, green, and blue light. The three common notations — HEX, RGB, HSL — are just different coordinate systems for the same colors, and knowing when to use each one makes design and CSS work faster.

1. HEX: Compact and Universal

#3b82f6 means R=3b (59), G=82 (130), B=f6 (246) in hexadecimal. It's the shortest form, ubiquitous in design tools, and safe everywhere CSS is accepted.

2. RGB: Explicit Channels

rgb(59, 130, 246) shows each channel as 0–255. Use it when you need to reason about channel values directly or add transparency with rgba().

3. HSL: Made for Humans

hsl(217, 91%, 60%) reads as "a blue hue, highly saturated, medium lightness." Building a palette? Keep hue fixed and step lightness. Need a hover state? Drop lightness by 10%. This is why design systems increasingly define tokens in HSL.