Design · 4 min read
HEX, RGB, and HSL: Color Formats in CSS
CSS lets you write a color several ways, and each format has a purpose. Knowing which to use makes building and tweaking a palette much easier.
This guide explains HEX, RGB, and HSL and when to reach for each.
Try it yourself with the related tool.
Convert color formats →Advertisement
HEX and RGB
HEX (#3b82f6) is compact and the most common in CSS and design handoffs. RGB describes the red, green, and blue channels directly (rgb(59, 130, 246)), which is handy when you need channel values or an alpha channel. Both store an exact color but are awkward to adjust by eye.
HSL: built for tweaking
HSL describes a color by hue, saturation, and lightness. That makes it easy to make a color lighter, darker, or more muted by changing one number while keeping the others fixed — exactly what you want when building shades and hover states.
Building a palette
A common workflow is to store colors as HEX but adjust them in HSL. To create a scale of tints and shades, keep the hue and saturation and step the lightness up and down. This produces coherent, related colors instead of guesses.
Do not forget contrast
Whatever format you use, check that text has enough contrast against its background. A color that looks fine on your screen may be hard to read for others, so verify it against the WCAG thresholds.