Hex to RGB and HSL: Copy CSS Color Values
Published July 18, 2026By Samson PG
Turn
Hex to RGB expands #RRGGBB (or shorthand #RGB) into red, green, and blue channels 0–255. HSL rewrites the same color as hue, saturation, and lightness — often easier for tweaking UI themes. CSS accepts rgb(), rgba(), hsl(), and hex interchangeably in modern browsers.
Formats you will see
| Form | Example | Notes |
|---|---|---|
| Hex 6 | #336699 |
Most common |
| Hex 3 | #369 |
Expands to #336699 |
| Hex 8 | #33669980 |
Alpha in last byte |
| rgb | rgb(51, 102, 153) |
Same color |
| hsl | hsl(210 50% 40%) |
Modern space-separated syntax |
Workflow
- Open TryDevSnip Hex to RGB.
- Paste a hex from Figma, a brand guide, or DevTools.
- Copy
rgb/hslinto your stylesheet. - Need channel math in hex? Pair with the Number Base Converter.
Privacy one-liner: conversion runs in your browser; not uploaded to our servers for processing.
Design tips
- Prefer CSS variables for palette tokens (
--color-brand). - Keep contrast in mind — converting format does not fix inaccessible pairs.
- Document whether alpha is 0–1 or 0–255 when handing off to engineers.
FAQ
Is #fff the same as #ffffff?
Yes — each digit is duplicated.
Why does HSL look different in older CSS?
Legacy hsl(210, 50%, 40%) used commas; newer syntax allows spaces and / for alpha.
Can I convert RGB back to hex?
Yes — most converters are bidirectional. Round-trips should match unless you change precision.
Does hex include color profile data?
No — hex is just channel values in sRGB as used by CSS, not a full ICC profile.