Hex to RGB and HSL: Copy CSS Color Values

Q: Why does HSL look different in older CSS?

Legacy hsl(210, 50%, 40%) used commas; newer syntax allows spaces and / for alpha.

Published July 18, 2026By Samson PG

Quick answer

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 / hsl into 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.

Converting hex to RGB by hand

A hex colour is just three bytes written in base 16. Each pair is one channel, 00–FF, which is 0–255 in decimal:

#3A6EA5
  3A -> (3 x 16) + 10 = 58   red
  6E -> (6 x 16) + 14 = 110  green
  A5 -> (10 x 16) + 5 = 165  blue

rgb(58, 110, 165)

Shorthand hex expands by doubling each digit, not by padding with zeros: #3AF is #33AAFF, not #03A0F0. That is why #FFF is pure white — FF FF FF.

Why HSL is easier to work with

RGB says how much light of each primary; HSL says hue, saturation, lightness. The values map to how people actually describe colour, which makes edits predictable:

Same hue, different lightness gives you a tint/shade ramp for hover states, borders, and disabled text — all guaranteed to stay in the same colour family.
Dropping saturation produces muted variants that still belong to the palette.
Rotating hue by a fixed amount generates complementary or triadic accents.

Doing any of that in hex means recomputing three channels and hoping the result still looks related. In HSL you change one number.

Alpha, and the eight-digit form

Modern CSS accepts an alpha channel in hex as a fourth pair: #3A6EA5CC is the same colour at 80% opacity, since CC is 204 of 255. The functional forms take a 0–1 value — rgb(58 110 165 / 80%) — which is easier to read in review.

One practical caution: a semi-transparent colour composites against whatever sits behind it, so a value that passes contrast on white can fail on a dark surface. Check contrast against the actual background, not the swatch.