HEX, RGB & HSL — Color Codes Explained and Converted
`#8B5CF6` and `rgb(139, 92, 246)` are the same colour wearing two outfits — and both hide the information your eye actually processes: what hue is this, how saturated, how light? Colour formats are three different filing systems for the same perception, and fluently converting between them is a small superpower: reading a brand colour’s personality from its hex, adjusting palettes predictably, and fixing the "looks washed out on dark mode" problem in seconds.
The three filing systems
| Format | Model | Reads as | Best for |
|---|---|---|---|
| HEX | RGB in base 16 | #8B5CF6 | CSS, design handoff, copy-paste culture |
| RGB | Additive light | rgb(139, 92, 246) | Code, alpha blending, pixel-level work |
| HSL | Perceptual | hsl(259°, 90%, 66%) | Humans adjusting colour |
HEX and RGB are the same information in different notation — three bytes for red, green and blue light, each 0–255 (00–FF). #8B5CF6 is 8B=139 red, 5C=92 green, F6=246 blue. Screens literally mix these three lights; that is why RGB has no "yellow" channel — yellow is red plus green at full blast.
Why HSL is the one humans should use
RGB answers what the hardware does; HSL answers what you perceive. Hue is the colour itself as a wheel position in degrees — 0° red, 120° green, 240° blue. Saturation is intensity — 0% grey, 100% full colour. Lightness runs black–colour–white. The practical magic: perceptual operations become single-slider edits. "Darken for dark mode" is lightness down — in RGB you would be guessing three numbers. "Same colour, calmer" is saturation down. "Accent variant for hover" is lightness up 5%.
How conversion works (the two-minute version)
HEX ↔ RGB is base conversion: split the hex into three pairs and translate each from base 16 to base 10. RGB → HSL: find the max and min of the three channels — lightness is their average; saturation measures the gap between them relative to lightness; hue is determined by which channel wins and the spacing of the other two. The arithmetic is illuminating exactly once; after that, instant conversion is what tools are for.
- Open the toolGo to namansoni.in/color-converter — completely free, no sign-up, everything runs locally in your browser.
- Pick or enter a colourType a HEX code, enter RGB values, or use the picker on your own screen content.
- Read every format at onceThe converter shows HEX, RGB and HSL simultaneously — changes in any one instantly re-derive the others.
- Adjust in HSL, ship in HEXTune hue, saturation and lightness like a human, then copy the HEX for CSS and design tools.
Recipes worth memorising
- Dark-mode variant: same hue, same saturation, lightness 60% → 25–30%. Nothing else moves.
- Hover state: lightness +5%. Pressed: −5%. Subtle and reliable.
- Tint for backgrounds: saturation −20%, lightness +20% of your brand colour.
- Accessibility check: lightness steps alone do not guarantee contrast — verify text/background pairs against WCAG contrast ratios, especially under 60% lightness.
- Desaturated neutrals: brand hue at 8–15% saturation gives "grey" that quietly matches your palette instead of clashing with it.
Frequently asked questions
What is a HEX colour code?
HEX encodes a colour as three bytes of red, green and blue light in base 16: #8B5CF6 is 8B (139) red, 5C (92) green, F6 (246) blue. Each pair runs 00 (none) to FF (255, maximum). It is exactly the same information as rgb(139, 92, 246) in hexadecimal clothing — the format CSS and design tools standardised on for copy-paste convenience.
How do I convert HEX to RGB?
Split the hex into three pairs and translate each from base 16: #8B5CF6 → 8B=139, 5C=92, F6=246, giving rgb(139, 92, 246). Or open namansoni.in/color-converter and see HEX, RGB and HSL update together as you type or pick.
Why do designers prefer HSL?
HSL mirrors perception: hue (the colour as wheel position), saturation (intensity), lightness (black to white). Perceptual tasks become single-slider edits — dark-mode variants are lightness down, calmer versions are saturation down, hover states are lightness up. The same adjustments in RGB require guessing three interdependent numbers.
What is the difference between RGB and HSL?
RGB describes what the hardware emits — the mixture of red, green and blue light — which is ideal for code and pixel work. HSL describes what you perceive — hue, saturation, lightness — which is ideal for choosing and adjusting colours. They represent the same colours; they just answer different questions.
How do I make a colour lighter or darker for dark mode?
In HSL, keep hue and saturation fixed and move lightness only: a 60% lightness brand colour becomes a dark-mode-safe 25–30%, or a hover state at 65%. Because hue never moves, the colour is unmistakably still yours. Verify text contrast against WCAG ratios afterward — lightness alone does not guarantee legibility.