Color Converter
Convert between HEX, RGB and HSL.
Show detailsHide details
Designers and developers constantly move colours between formats — a hex code from a brand guide, RGB values for CSS, or HSL for tweaking lightness. Type any one format and this converter fills in the other two, with a live colour preview.
Loading calculator...
How to Convert Colour Codes — The Quick Answer
RGB gives each channel a value from 0–255. HEX is those same three values written in base-16 (two digits each). HSL re-expresses the colour as hue (0–360°), saturation, and lightness — handy for making a colour lighter or darker.
Shortcut
#RRGGBB = hex of the R, G, B channels (each 0–255)
Fact-Checking Claims You May Have Seen Online
HEX and RGB are different colours
False
They're the same colour in two notations. #FF8800 means red 255, green 136, blue 0 — rgb(255, 136, 0). HEX is simply RGB written in base 16.
One colour, three formats
| Colour | HEX | RGB | HSL |
|---|---|---|---|
| Blue | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
Each hex pair is one channel in base 16: 00 is 0, FF is 255. So #3B82F6 splits into 3B = 59 (red), 82 = 130 (green), and F6 = 246 (blue) — exactly rgb(59, 130, 246).
How It Works
The Method
How the three formats relate
Formula
HEX #RRGGBB → each pair is a base-16 channel (00 = 0, FF = 255) RGB → red, green, blue each 0–255 HSL → hue (0–360°), saturation (0–100%), lightness (0–100%)
Variables
Why hex uses letters
Hexadecimal counts 0–9 then A–F (where A = 10, F = 15). Two hex digits cover 0–255, matching one RGB channel — so a 6-digit hex code is exactly three RGB values in shorthand.
Hue, saturation, lightness
HSL rearranges the same colour: hue is the position on the colour wheel (0–360°), saturation the intensity, and lightness how light or dark. Adjusting just the L value lightens or darkens a colour while keeping its hue — useful in CSS and design tools.
Note: All three formats describe the same set of colours in the sRGB space. For print, colours are usually converted to CMYK, which is a different model and not covered here.
Last updated: October 5, 2026
Creators
Computer Scientist & Developer Tools Author
Reviewers
Technical Reviewer
Table of Contents
Quick Facts
Related Tools
Privacy Guaranteed
Your data never leaves your browser. All calculations are 100% private.
Frequently Asked Questions
How do I convert HEX to RGB?
Split the 6-digit hex code into three pairs and read each as a base-16 number. #3B82F6 becomes 3B = 59, 82 = 130, F6 = 246, giving rgb(59, 130, 246). This converter does it instantly as you type.
What is the difference between RGB and HSL?
Both describe the same colours. RGB says how much red, green, and blue to mix (0–255 each). HSL describes the colour as a hue around a wheel (0–360°), a saturation, and a lightness. HSL is easier for humans to tweak — to lighten a colour you raise its lightness and keep everything else the same.
Why does hex use letters like A–F?
Because it's base 16, not base 10. Each position counts 0–9 and then A–F (for 10–15). Two hex digits span 0–255, exactly the range of one RGB channel — which is why colours are written as six hex digits, two per channel.
Can I enter a 3-digit hex code like #F80?
Yes — 3-digit shorthand is expanded by doubling each digit, so #F80 becomes #FF8800. Many design tools accept both, and this converter handles the shorthand too.