Hex, RGB and HSL colours explained
Three ways to write the same colour, and when each one is the right tool.
If you have ever picked a colour in a design tool and seen a code like #3B82F6, you have met the hex colour system. Web and app design runs on a handful of colour formats — hex, RGB, and HSL — and knowing how they relate makes choosing, adjusting, and matching colours far easier. This guide explains each format, how to convert between them, and when each is the right tool.
Colour codes are the shared language of digital design, and understanding them turns colour from something you pick by trial and error into something you can reason about and control. Once you know how hex, RGB, and HSL relate, you can copy a colour from one place, adjust it precisely in another, build a harmonious palette from scratch, and make sure your text stays readable against its background. None of it requires artistic talent — it is a small amount of structure that makes every colour decision easier and more deliberate.
What a hex colour actually is
A hex colour code is a compact way of writing an RGB colour. The six characters after the hash break into three pairs — red, green, and blue — each pair being a two-digit hexadecimal (base-16) number from 00 to FF. So #FF0000 is full red, no green, no blue; #00FF00 is pure green; #0000FF is pure blue. FF in hex equals 255 in decimal, which is why each channel runs 0–255. An advanced colour converter translates between hex, RGB, and HSL instantly, but the structure is simple once you see the three pairs.
Reading hexadecimal
Hexadecimal counts using sixteen digits: 0–9 then A–F, where A is 10, B is 11, up to F which is 15. A two-digit hex number therefore ranges from 00 (zero) to FF (255). The pair works like decimal but in sixteens: the left digit is "sixteens" and the right is "units", so B4 is (11 × 16) + 4 = 180. You rarely need to do this by hand, but understanding it explains why colours look the way they do — #808080 is a mid grey because 80 in hex is 128, half of 255, applied equally to all three channels.
RGB: the same colour, written differently
RGB expresses the identical information as three decimal numbers from 0 to 255, like rgb(59, 130, 246). This is exactly the same colour as #3B82F6 — hex and RGB are two notations for one underlying value. To convert hex to RGB, split into pairs and convert each from base 16 to base 10: 3B is 59, 82 is 130, F6 is 246. To go back, convert each decimal channel to a two-digit hex. RGB is often easier to reason about because the numbers are familiar decimals, which is why it is common in code that manipulates colour.
HSL: the format designers think in
HSL — hue, saturation, lightness — describes colour the way people actually perceive it, which makes it the most intuitive format for adjusting a colour. Hue is the position on the colour wheel from 0 to 360 degrees (0 is red, 120 green, 240 blue). Saturation is how vivid the colour is, from grey (0%) to full intensity (100%). Lightness runs from black (0%) through the pure colour (50%) to white (100%). The power of HSL is that you can make a colour lighter without changing its hue, or more muted without shifting it — adjustments that are awkward in hex or RGB but natural in HSL.
Why you would convert between them
Each format shines in a different situation. Hex is compact and dominates web and design tools, so it is what you copy and paste. RGB is convenient in code and when working with transparency (RGBA adds an alpha channel). HSL is best for building colour schemes and making systematic adjustments — darkening a colour for a hover state, or generating a palette by rotating the hue. Fluently converting between them means you can pick in one format and work in whichever is easiest for the task. A converter that shows all three at once lets you switch mental models without recalculating.
Building colour schemes
HSL makes colour theory practical. A complementary scheme takes two hues 180 degrees apart. An analogous scheme uses hues close together (within about 30 degrees) for a harmonious feel. A triadic scheme spaces three hues 120 degrees apart. Because these relationships are just hue arithmetic, HSL lets you construct them deliberately rather than by trial and error. Once you have your hues, converting them to hex gives you the codes to drop into your design.
Accessibility and contrast
Colour choices are not only aesthetic — text must have enough contrast against its background to be readable, and accessibility guidelines set minimum contrast ratios. Lightness (the L in HSL) is the biggest driver of contrast, so pairing a dark colour with a light one is the reliable way to stay readable. When you adjust a palette, keeping an eye on the lightness difference between text and background matters as much as the hue. Getting this right benefits every reader, not only those with visual impairments.
Shorthand and edge cases
You will sometimes see three-digit hex codes like #F00. This is shorthand where each digit is doubled, so #F00 expands to #FF0000 (red) and #FFF to #FFFFFF (white). It only works when both digits of each pair are the same. Codes may also carry a fourth pair for alpha (opacity), as in #FF000080 for half-transparent red. Knowing these variants stops shorthand from looking like a mistake.
Quick answers to common questions
What does #FF0000 mean? Full red, no green, no blue — FF is 255, the maximum for a channel.
How do I convert hex to RGB? Split into three pairs and convert each from base 16 to base 10: #3B82F6 becomes rgb(59, 130, 246).
When should I use HSL? When adjusting a colour — HSL lets you change lightness or saturation without shifting the hue.
What is a three-digit hex code? Shorthand where each digit doubles: #F00 means #FF0000.
The bottom line
Hex, RGB, and HSL are three ways of writing the same colours: hex for copying and pasting, RGB for code, HSL for adjusting and building schemes. Hex is just RGB in base 16, split into three pairs. Learn to move between them and you can pick a colour anywhere and work with it comfortably — and a converter makes the switching instant while a contrast check keeps your text readable.
Related tools
- Advanced Colour Converter — Convert between HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLAB, OKLCH and XYZ with a live preview.
- Data Encoding Converter — Convert text between Base64, hexadecimal, binary, URL encoding and Unicode escapes.