Reviewed and updated by the ToolBlur editorial team on July 31, 2026.
Color Formats Explained: HEX vs RGB vs HSL
HEX, RGB and HSL all describe the same colors in different ways. Here is what each one means and when to use it in your designs.
If you have ever styled a website, you have met color codes like #4f46e5. But that is only one of three common ways to describe a color on screen. Knowing all three makes you faster and more flexible.
HEX — the web classic
A HEX code is a six-digit value like #4f46e5, where each pair represents red, green and blue. It is compact and universally supported, which is why it is the most common format in CSS and design tools.
RGB — how screens actually work
RGB describes a color as three numbers from 0–255 for red, green and blue, e.g. rgb(79, 70, 229). It maps directly to how a screen mixes light, and its cousin RGBA adds transparency.
HSL — the designer's favourite
HSL stands for Hue, Saturation and Lightness — for example hsl(243, 75%, 59%). It is the most intuitive format for humans: to make a color lighter you just raise the lightness, and to shift it you change the hue. That makes building color palettes far easier.
Converting between them
You rarely need to convert by hand. A color converter shows the HEX, RGB and HSL values of any color side by side, and a gradient generator lets you blend two of them into ready-to-copy CSS.
Which should you use?
Use HEX for quick, fixed brand colors; RGB (or RGBA) when you need transparency; and HSL when you want to tweak or generate related shades. They all produce the same colors — pick whichever makes your current task easier.
The same color in three notations
Consider the ToolBlur purple #7c3aed. In RGB it is rgb(124, 58, 237). In HSL it is approximately hsl(263, 82%, 58%). These are not three different colors; they are three ways to describe the same output in the sRGB color space.
HEX groups red, green and blue into hexadecimal pairs. RGB exposes those channels as numbers from 0 to 255. HSL rearranges the idea into hue, saturation and lightness, which often makes design adjustments easier. If you want a darker button, changing HSL lightness is more intuitive than manually reducing three RGB channels.
Alpha and transparency
Modern CSS can add transparency with formats such as rgb(124 58 237 / 0.5) or eight-digit HEX like #7c3aed80. Alpha changes how the color blends with the background, so a transparent foreground has no single final appearance. Test it on the actual light and dark surfaces used by your design.
Common conversion mistakes
- Do not round intermediate values too aggressively when converting repeatedly.
- Remember that printed CMYK colors and screen RGB colors use different models.
- Check contrast after choosing colors; matching a brand palette does not guarantee readable text.
- Keep one canonical token in your design system instead of mixing nearly identical values.
Build an accessible palette
Use the converter to obtain the format your codebase needs, then test text and background combinations with a contrast checker. Reserve color for meaning only when another cue—such as a label or icon—communicates the same state. This helps users with color-vision differences and keeps interfaces understandable in grayscale or bright sunlight.
How hexadecimal pairs become RGB
In six-digit HEX, the first pair is red, the second green and the third blue. Each pair ranges from 00 to ff, equivalent to 0–255 in decimal. For #7c3aed, 7c becomes 124, 3a becomes 58 and ed becomes 237. That is why the equivalent RGB value is rgb(124, 58, 237).
Three-digit HEX is shorthand: #abc expands to #aabbcc. It cannot represent every six-digit color, only values where each pair repeats the same digit.
How HSL helps build variations
Hue is an angle around the color wheel, saturation describes color intensity and lightness moves between black and white. To create hover and pressed states, keep hue mostly stable and adjust lightness carefully. Lowering saturation can make a muted background without changing the color family.
HSL is convenient, but equal lightness values do not guarantee equal perceived brightness. Yellow often appears brighter than blue at the same numeric lightness. Always inspect the result and test contrast rather than trusting the numbers alone.
Color spaces and browser output
Most familiar HEX and RGB values describe sRGB. Newer CSS can represent wider-gamut colors on supported displays, but those colors may be mapped differently on ordinary screens. If consistency matters, provide a sensible sRGB fallback and test on more than one device.
Contrast is a relationship
A color does not have an accessibility score by itself; contrast depends on foreground and background together. Normal text generally needs stronger contrast than large bold text. Interactive states also need visible focus indicators and should not rely on color alone.
Example palette workflow
- Choose a brand base color and save it as a design token.
- Create lighter and darker candidates for surfaces and states.
- Test real text sizes against every intended background.
- Check hover, focus, disabled, error and dark-mode states.
- Document the approved combinations so future pages remain consistent.
Converting formats is only the mechanical step. A maintainable palette connects each value to a purpose—such as primary action, subtle surface or destructive warning—and verifies that the combination remains understandable.
Frequently asked questions
Does capitalization change a HEX color?
No. #7C3AED and #7c3aed represent the same value. Teams often choose lowercase or uppercase as a formatting convention.
Why does the same color look different on two screens?
Display calibration, brightness, color profile, ambient light and panel technology affect perception. Exact numeric values improve consistency but cannot make every physical display identical.
Can HSL represent every RGB color?
Standard CSS HSL and RGB are alternate coordinates for colors in the same sRGB space, so conversion is possible. Rounding can create small differences during repeated conversions.
What does the fourth value mean?
It is alpha, or opacity. Zero is fully transparent and one fully opaque. The visible result depends on the background beneath it.
Which format should a design system store?
Choose one canonical format that fits the workflow, then generate alternatives when needed. Consistent semantic tokens matter more than whether the source is HEX, RGB or HSL.
Can a color converter test accessibility?
Conversion alone cannot. Accessibility requires comparing foreground and background contrast and checking focus, states and non-color cues.