HEX, RGB and HSL: Choosing the Right Color Format for CSS and Design Handoff
What each color format means, how to convert between them by hand and by tool, and which one makes themes, hover states and accessibility checks easier to maintain.
Published October 21, 2026 · By Sudip Bhowmick
A designer sends a brand color as a HEX code, the style guide lists it in RGB, and the CSS you need to write would be much easier to maintain in HSL. All three describe the same color, but each format suits different jobs. Knowing how they relate lets you convert confidently and choose the format that keeps your stylesheet readable.
HEX: Compact and Universal
A HEX color such as #1E88E5 is three pairs of base 16 digits for red, green and blue. 1E is the red amount, 88 is green and E5 is blue, each from 00 (none) to FF (full). When all three pairs repeat a digit, it can be shortened, so #FFAA00 becomes #FA0.
HEX is the most common format in design tools and brand guidelines, which makes it the usual way colors are handed over. Its weakness is that you cannot easily tell what a value looks like or how to make it a little lighter by reading it.
RGB: The Same Channels in Decimal
RGB writes the same three channels as decimal numbers from 0 to 255, for example rgb(30, 136, 229). It is easier to calculate with, and it supports an alpha channel for transparency through rgba or the modern slash syntax. If you need to blend a color with a background in code, RGB is the natural choice.
HSL: Built for Humans
HSL describes a color by hue (an angle on the color wheel from 0 to 360), saturation and lightness. It matches how people think: keep the hue, then make it paler or darker.
- ▸Hover state: reduce lightness by a few percent.
- ▸Disabled state: reduce saturation.
- ▸A whole palette: keep hue and saturation fixed, then step the lightness from light to dark.
- ▸Dark mode: adjust lightness values rather than inventing new colors.
Storing a brand hue in a CSS custom property and varying only lightness produces consistent shades with very little effort.
Converting Between Formats
To convert HEX to RGB by hand, turn each pair into decimal: E5 is 14 times 16 plus 5, which is 229. To go from RGB to HSL you need a short formula involving the largest and smallest channel, so most people use a tool. Paste any value into the Color Converter to see HEX, RGB and HSL together and copy the one you need.
Small rounding differences are normal when converting to HSL and back. If an exact brand value matters, keep the original HEX as the source of truth.
Do Not Forget Contrast
Whatever format you choose, check text against its background. Body text normally needs a contrast ratio of at least 4.5 to 1 to be readable by people with low vision. Adjusting lightness in HSL is the quickest way to fix a color that fails the check without changing its character.
Conclusion
Use HEX when you receive or share a brand color, RGB when you calculate or blend, and HSL when you build themes, states and palettes. They are three views of one color, so converting costs nothing. Pick the format that makes your next change easiest.
Free Tool
Open the Color Converter