RGB & HEX Colour Converter
Convert between RGB, HEX and HSL — type in any field or drag sliders to see instant updates with step-by-step mathematical working.
#3B82F6
rgb(59, 130, 246)
hsl(217°, 91%, 60%)
3-digit shorthand also supported (e.g. F00 → FF0000)
Step-by-step solution
RGB & HEX Colour Converter Explained
Core concepts, classroom applications, and plain-English explanations for all audiences.
Where you'll actually use this
Every colour on a website or app is defined by a code. #FF6600 is a bright orange. RGB(255, 102, 0) is the same colour written differently. Graphic designers switching between Photoshop and CSS need to translate between these formats constantly. Social media brand guidelines list exact hex codes to ensure logo colours match precisely everywhere.
Worked example
"You're coding a website and want a red button (#FF3300). What are the RGB values?"
#FF3300 → split into pairs: FF, 33, 00
FF (hex) = 15×16 + 15 = 255 (red)
33 (hex) = 3×16 + 3 = 51 (green)
00 (hex) = 0 (blue)
Result: RGB(255, 51, 0) — a bright red-orange
Each hex pair goes from 00 (no intensity) to FF (full intensity). 16 digits: 0–9, then A=10, B=11, C=12, D=13, E=14, F=15.
Key colour codes to recognise
- → #000000 = black, #FFFFFF = white: All channels at zero = no light = black. All at maximum = full light = white.
- → #FF0000 = pure red, #00FF00 = pure green, #0000FF = pure blue: The primary colours of light — additive mixing, not paint.
Common mistake
Thinking hex uses 0–16. Hex is base 16 (0–15 per digit). Each pair of hex digits gives 256 values (00–FF), which is why each of R, G, B ranges from 0 to 255.
RGB, HEX, and HSL Colour Converter
Our colour converter is an essential tool for anyone working with digital colours, from GCSE Computer Science students learning about colour representation to professional web developers and graphic designers. It allows you to seamlessly convert colours between three common formats: RGB, Hexadecimal (HEX), and HSL.
Input your colour in any of the three formats, and our tool will instantly provide the equivalent values in the others. See your chosen colour come to life with a live preview swatch, and for those curious about the underlying maths, we provide a step-by-step breakdown of how hexadecimal conversions are performed using repeated division by 16. Understand, convert, and apply colours with confidence.
Common mistakes to avoid
- Using '0-100' for RGB values:RGB channels (Red, Green, Blue) are 8-bit values, meaning they range from 0 to 255, not 0 to 100. Using 0-100 will result in incorrect or unexpected colours. Always use values between 0 and 255 for each RGB channel. For example, pure red is RGB(255, 0, 0).
- Forgetting the '#' symbol in Hex codes:The '#' symbol is crucial for identifying a string as a hexadecimal colour code in many contexts, especially in web development (CSS, HTML). Without it, the code might be interpreted as a regular string or number. Always prefix your 6-digit hexadecimal colour code with a hash symbol, e.g., #FF0000, not FF0000.
- Confusing HSL with HSV/HSB:While HSL (Hue, Saturation, Lightness) and HSV/HSB (Hue, Saturation, Value/Brightness) are similar, they calculate 'lightness' or 'brightness' differently. This means the same H, S values can produce different colours depending on whether L or V/B is used. Be aware of the specific colour model you are using. HSL is often preferred for its intuitive adjustment of lightness, while HSV/HSB is sometimes used in graphics software for its direct correlation to colour mixing.
Questions students ask
What is the difference between RGB and HEX?
What does HSL stand for and why is it useful?
Why do hex colour codes use letters A to F?
What is the range of each RGB channel?
How do I convert a hex code to RGB by hand?
1. Split the hex code: For #A3C1AD, you get A3 (Red), C1 (Green), AD (Blue).
2. Convert each pair: Each hex digit's value is multiplied by its place value (16^1 for the first digit, 16^0 for the second).
Red (A3): (A 16^1) + (3 16^0) = (10 16) + (3 * 1) = 160 + 3 = 163
Green (C1): (C 16^1) + (1 16^0) = (12 16) + (1 * 1) = 192 + 1 = 193
Blue (AD): (A 16^1) + (D 16^0) = (10 16) + (13 * 1) = 160 + 13 = 173
3. Combine the results: The RGB value for #A3C1AD is RGB(163, 193, 173).