HEX, RGB, and HSL: A Designer's Guide to Color Codes
If you've ever copied a color from a design tool and wondered why it shows up as #3B82F6 in one place, rgb(59, 130, 246) in another, and hsl(217, 91%, 60%) in a third — you're not alone. These are all the same blue, expressed in three different color systems. Each one has its strengths, and knowing when to use which can save you a lot of back-and-forth.
What Is HEX?
HEX (hexadecimal) is the most common color format on the web. A HEX color like #FF5733 is made up of three pairs of characters, each representing the red, green, and blue channels on a scale of 00 (none) to FF (maximum). HEX is compact, copy-paste friendly, and universally supported in HTML and CSS. Its main weakness is that it's not human-readable — you can't look at #4A90E2 and immediately know it's a medium blue. For that, you need to decode it mentally or use a converter.
What Is RGB?
RGB (Red, Green, Blue) describes a color by specifying how much of each primary light color to mix, on a scale of 0 to 255. rgb(255, 0, 0) is pure red. rgb(0, 0, 0) is black. rgb(255, 255, 255) is white. RGB is slightly more readable than HEX for developers because you can tell at a glance whether a channel is dominant. It also supports an alpha channel via rgba(), making it the go-to for semi-transparent colors in CSS.
What Is HSL?
HSL (Hue, Saturation, Lightness) is the most intuitive format for designers. Hue is the color angle on a wheel (0° = red, 120° = green, 240° = blue). Saturation controls how vivid or muted the color is, from 0% (gray) to 100% (full color). Lightness controls brightness, from 0% (black) to 100% (white). The beauty of HSL is that it's easy to modify systematically. Want a lighter shade of your brand color? Just increase the lightness by 10%. Want a muted version? Drop the saturation. This makes HSL invaluable for building design systems and color palettes.
When to Use Each Format
Use HEX when copying colors from design tools like Figma or working with static CSS values. It's compact and universally supported. Use RGB/RGBA when you need transparency, or when working with canvas, WebGL, or CSS animations that manipulate color channels programmatically. Use HSL when building color palettes, creating hover/active states, or working in CSS where you want to express relationships between shades. Many modern design systems define colors in HSL precisely because the values communicate intent so clearly.
How to Convert Between Formats
The math behind color conversion isn't trivial — converting from RGB to HSL, for instance, involves finding the max and min channel values, then calculating the hue angle and normalizing lightness. In practice, nobody does this by hand. Our Color Converter lets you paste any HEX, RGB, or HSL value and instantly see all three representations. It also shows a live preview so you can confirm you're working with the right color. No sign-up, no server, no data sent anywhere — just instant conversion in your browser.
A Note on Color Spaces and Browsers
One subtlety worth knowing: HEX, RGB, and HSL all describe colors in the sRGB color space, which is the standard for the web and most screens. Modern CSS now supports wider color spaces like Display P3 via oklch() and color(display-p3 ...), which can display more vivid colors on wide-gamut screens. For most everyday web work, however, HEX, RGB, and HSL remain the right tools — and understanding all three will make you a more confident designer or developer.