ToolWrenIf you have written any CSS you have seen colours written two ways: #3b82f6 and rgb(59, 130, 246). They look completely different but describe the exact same colour. Here is how they relate.
RGB: three numbers
RGB describes a colour as three channels — Red, Green and Blue — each from 0 to 255. rgb(59, 130, 246) means 59 red, 130 green, 246 blue. More of a channel means more of that light; rgb(255,255,255) is white and rgb(0,0,0) is black.
HEX: the same numbers in base-16
A HEX code is just those same three numbers written in hexadecimal (base 16). #3b82f6 breaks into 3b, 82, f6 — which are 59, 130 and 246 in decimal. So HEX and RGB are two notations for one colour. Convert instantly with our HEX ⇄ RGB converter.
What about HSL?
HSL (Hue, Saturation, Lightness) describes the same colours in a way humans find more intuitive — pick a hue on the colour wheel, then adjust how vivid and how light it is. It is great for generating tints and shades. Our colour converter shows HEX, RGB, HSL and CMYK side by side for any colour.
Adding transparency (alpha)
Both notations support an alpha (opacity) channel: rgba(59,130,246,0.5) or an 8-digit HEX like #3b82f680. The HEX ⇄ RGB tool handles alpha and gives you ready-to-paste CSS.
Don't forget contrast
Whichever notation you use, check that text remains readable. Run your foreground and background through the WCAG contrast checker to confirm it passes accessibility guidelines, and build a full scheme with the palette generator.