HEX to RGB Explained: How Colour Codes Actually Work
A hex code is just three numbers written in base 16. Once you can read it, converting between colour formats stops feeling like magic.
Quick answer
#3B82F6 is three pairs of hexadecimal digits: 3B for red, 82 for green, F6 for blue. Each pair ranges from 00 to FF, which is 0 to 255 in decimal. So #3B82F6 is rgb(59, 130, 246) — a mid blue with very little red and a lot of blue.
Reading a hex code
#3B82F6 is three pairs of hexadecimal digits: 3B for red, 82 for green, F6 for blue. Each pair ranges from 00 to FF, which is 0 to 255 in decimal. So #3B82F6 is rgb(59, 130, 246) — a mid blue with very little red and a lot of blue.
Three-digit shorthand like #F0A simply doubles each digit, expanding to #FF00AA.
The eight-digit form
An 8-digit hex code adds a fourth pair for the alpha channel: #3B82F680 is the same blue at 50% opacity, because 80 in hexadecimal is 128, roughly half of 255. This is equivalent to rgba(59, 130, 246, 0.5).
Why HSL is often easier to work with
HSL describes a colour as hue (position on the colour wheel), saturation (how vivid) and lightness (how bright). That maps to how designers think: to make a hover state you lower the lightness by 10%, without touching the hue. Generating tints, shades and dark-mode variants from one brand colour is far simpler in HSL than in hex.
Rounding and round-trips
HSL values are usually rounded to whole degrees and percentages, so converting hex to HSL and back can shift a channel by one or two units. That difference is invisible to the eye but can cause a mismatch if you are comparing values against a design spec character by character.
Tools mentioned in this guide
FAQ
Which colour format should I store in my design tokens?
HSL is easiest for generating variants, while hex is the most universally supported. Many teams store HSL channels and output hex or rgb() at build time.
Is #FFF the same as #FFFFFF?
Yes. Three-digit shorthand doubles each digit, so #FFF expands to #FFFFFF — pure white.