CSS gives you five ways to write the same color. That might seem redundant, but each format has a specific use case, and knowing when to reach for which one can simplify your stylesheet significantly.
The Formats
Hex (#RRGGBB)
The most common format in the wild. Each pair of hex digits represents a color channel — red, green, blue — from 00 (0) to FF (255).
``css
color: #2f855a; / full 6-digit hex /
color: #fff; / 3-digit shorthand — same as #ffffff /
color: #2f855a80; / 8-digit: last two digits are alpha (50% opacity) /
`
When to use it: Copying colors from design tools (Figma, Sketch), matching brand colors, or anywhere the exact value matters. Hex is compact and universally supported.
Drawback: Not human-readable. #2f855a tells you nothing about what the color looks like until you paste it into a tool.
RGB and RGBA (rgb() / rgba())
Red, green, blue as integers (0–255) or percentages. RGBA adds an alpha channel for transparency.
<code>css
<p>color: rgb(47, 133, 90);</p>
<p>background: rgba(47, 133, 90, 0.5); /<em> 50% opacity </em>/</p>
</code>
Modern CSS allows a single rgb() function with an optional slash for alpha:
<code>css
<p>color: rgb(47 133 90 / 50%); /<em> same as rgba, modern syntax </em>/</p>
</code>
When to use it: When you need transparency. Also readable for people who think in RGB. Useful for generating colors programmatically with JavaScript:
<code>js
<p>const color = </code>rgb(${r}, ${g}, ${b})<code>;</p>
</code>
HSL and HSLA (hsl() / hsla())
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). This is the format that actually makes sense to humans.
<code>css
<p>color: hsl(145, 48%, 35%); /<em> green </em>/</p>
<p>color: hsl(145 48% 80%); /<em> lighter version — just increase L </em>/</p>
<p>color: hsl(145 48% 35% / 0.5); /<em> 50% opacity </em>/</p>
</code>
When to use it: Any time you need to create color variations from a single base. Adjust only the lightness to get shades; adjust only the saturation to get muted/vivid variants; rotate the hue by 180° for a complementary color. This is extremely difficult to do in hex or RGB.
<code>css
<p>/<em> A complete tonal palette from one hue </em>/</p>
<p>--brand-100: hsl(145, 48%, 95%);</p>
<p>--brand-300: hsl(145, 48%, 70%);</p>
<p>--brand-500: hsl(145, 48%, 50%);</p>
<p>--brand-700: hsl(145, 48%, 30%);</p>
<p>--brand-900: hsl(145, 48%, 10%);</p>
</code>
HWB (hwb())
Hue, Whiteness, Blackness. A newer addition to CSS (all modern browsers support it). Similar to HSL in that the hue stays constant while you adjust the mix of white and black.
<code>css
<p>color: hwb(145 20% 30%);</p>
</code>
Less commonly used, but intuitive if you think about colors as "this hue + some white paint + some black paint." Worth knowing, but HSL covers most of the same use cases with wider tool support.
Named Colors
CSS has 148 named colors — tomato, cornflowerblue, rebeccapurple. They are useful for prototyping and readable in code, but you can't tweak them (you'd have to switch to hex/HSL to adjust tomato).
<code>css
<p>background: aliceblue;</p>
<p>border: 1px solid cornflowerblue;</p>
</code>
Use named colors in development or design mockups. Replace with precise values before shipping.
Practical Guide: Which Format to Use Where
| Situation | Format |
|-----------|--------|
| Brand/design system color | Hex |
| Transparency / overlay | rgb() with alpha, or hsl() with alpha |
| Color variations from one base | HSL |
| Generated colors in JavaScript | rgb() string template |
| Prototyping / mockups | Named colors |
| Dark mode palette | HSL (easiest to create tonal variants) |
CSS Custom Properties + HSL: A Practical Pattern
The most maintainable way to build a color system is to define your base color in HSL as separate custom properties, then compose from them:
`css
:root {
--brand-h: 145;
--brand-s: 48%;
--brand-light: hsl(var(--brand-h), var(--brand-s), 90%);
--brand-mid: hsl(var(--brand-h), var(--brand-s), 50%);
--brand-dark: hsl(var(--brand-h), var(--brand-s), 25%);
--brand-muted: hsl(var(--brand-h), 20%, 50%);
}
`
Changing --brand-h and --brand-s instantly reshemes your entire UI. The lightness variants (light, mid, dark`) stay consistent no matter what the base color is.
Color Format Conversion
Switching between formats manually is tedious and error-prone. If you need to convert hex to HSL or check how a color looks with different lightness values, SnappyTools Color Picker shows hex, RGB, and HSL simultaneously and lets you generate gradient variations in one click. The gradient generator lets you build CSS gradients visually and copy the code directly.
Summary
- Hex: precise, compact, paste from design tools
- RGB: transparency, JavaScript generation
- HSL: systematic palettes, dark mode, accessible design
- HWB: emerging, similar to HSL
- Named: prototyping only
For most projects, a combination of hex (for brand values from design tools) and HSL (for building tonal variants and accessible color systems) covers everything you need.
Originally published at https://snappytools.app/color-picker/