If you have ever copied a colour from a design file into a stylesheet, you have met this confusion: one place gives you #7C3AED, another rgb(124, 58, 237), a third hsl(262, 83%, 58%). Three different-looking codes — all the same purple.
That is the whole secret: HEX, RGB and HSL are not three kinds of colour, but three notations for the same colour. The question is never “which one is correct?” It is “which one makes the next edit easiest?”
The short answer: one colour, three spellings
Every screen colour is red, green and blue light mixed together. RGB writes those three amounts directly, HEX writes the same amounts in hexadecimal (base 16), and HSL rearranges them into three human-friendly ideas: which colour, how vivid, and how light or dark.
Converting between them changes the spelling, not the colour — a converter re-expresses the colour you already have, it does not invent a new shade.
What RGB actually is
RGB stands for red, green and blue, and each channel runs from 0 to 255:
rgb(255, 0, 0)is pure red,rgb(0, 255, 0)is pure green,rgb(0, 0, 255)is pure blue.rgb(0, 0, 0)is black, because no light is added at all;rgb(255, 255, 255)is white, because all three lights are at full strength.- Equal amounts of all three make grey —
rgb(128, 128, 128)is a medium grey.
Screens make colour by adding light — an additive model, the opposite of mixing paint, where adding colours tends to darken the result.
RGB is the native language of the screen: a tool reading a colour out of an image or a canvas usually reports RGB, because that is what the pixels store. Its weakness is readability. Looking at rgb(124, 58, 237), can you tell it is purple, let alone how to make it lighter? RGB gives you the ingredients precisely, but not in words a person would use.
What HEX actually is
HEX is RGB wearing a shorter costume. A HEX code is the same three channel values, written in hexadecimal — base 16, using the digits 0–9 and the letters A–F — with a # in front. Each channel gets exactly two hexadecimal digits, covering the same 0–255 range as RGB. So #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.
To read a HEX code, split it into three pairs after the # — red, green, blue. In #7C3AED, 7C, 3A and ED are the red, green and blue channels: the same numbers RGB writes as 124, 58 and 237.
Two conveniences: the three-digit shorthand, where #7733EE shortens to #73E because each digit is doubled, and eight-digit HEX, where a fourth pair adds transparency — #7C3AED80 is the same purple at roughly half opacity.
HEX is the format you will see most often in stylesheets, brand guides and design tools, because it is compact, easy to copy and unambiguous. Its weakness is the same as RGB’s, only worse — nobody looks at #2F855A and knows how much lighter it should be.
What HSL actually is
HSL stands for hue, saturation and lightness, and it is the format built around how people talk about colour:
- Hue is which colour, as an angle from 0 to 360 degrees around the colour wheel. Red sits at 0 degrees, green at 120, blue at 240, and the wheel wraps back to red at 360.
- Saturation is how vivid the colour is, from 0% to 100%. At 0%, no colour is left at all — you get grey. At 100%, the colour is as vivid as it can be.
- Lightness is how light or dark the colour is, from 0% to 100%. At 0% you get black and at 100% you get white, whatever the hue and saturation are.
So hsl(262, 83%, 58%) reads as “a purple (262 degrees), quite vivid (83% saturation), a little past halfway to white (58% lightness)”. Where RGB and HEX answer “what are the ingredients?”, HSL answers “what does it look like, and how do I change it?”
The payoff is in making variants. For a lighter hover state, keep hue and saturation where they are and raise the lightness: hsl(262, 83%, 68%) is the same purple, lighter. For a muted disabled state, drop the saturation. In RGB or HEX, either edit means recalculating three channels; in HSL, it means changing one number.
HSL has one honest limitation: lightness is not perceived brightness. A yellow at 50% lightness looks much brighter than a blue at 50% lightness, because eyes are more sensitive to some wavelengths than others. HSL lightness is a useful knob, not a brightness meter — for exact perceived brightness, use a contrast checker.
Worked example: one purple, three notations
Here is the same purple — the vivid purple used as an accent across this site — all three ways:
- HEX:
#7C3AED - RGB:
rgb(124, 58, 237) - HSL:
hsl(262, 83%, 58%)
Pair by pair, 7C in hexadecimal is 124 in decimal, 3A is 58, and ED is 237 — exactly the RGB numbers. The HSL version says the same thing differently: hue 262 degrees is purple, 83% saturation is strong rather than washed out, and 58% lightness is just past the middle of the dark-to-light range.
Now make a hover state. In HSL you change one number: base hsl(262, 83%, 58%), lighter hover hsl(262, 83%, 68%) — same purple, ten points lighter, and anyone reading the stylesheet can see the intent. In HEX, the same edit gives two unrelated-looking codes with no visible relationship. That readability gap is the whole case for HSL in design systems.
Which format for which job
There is no universally best format, only a best format for the edit in front of you:
- Use HEX for storing and sharing. Brand tokens, style guides, design handoff and documentation — anywhere a colour must be copied exactly. It is the most compact spelling, and what design tools export by default.
- Use RGB when you are working with channel values directly — colours read from an image or canvas, colours produced by code, or any case where a tool hands you RGB numbers.
- Use HSL when you are adjusting a colour by eye — hover and disabled states, tints and shades, theme palettes from a single base hue. HSL makes the intent visible in the code itself.
Do not pick a format because it looks more professional: the professional choice is the one the next person to edit the file will understand fastest.
Transparency in all three
Each format has a way to say “this colour, but see-through”: an alpha value from 0 (fully transparent) to 1 (fully opaque).
- RGB:
rgba(124, 58, 237, 0.5), or in modern CSS,rgb(124 58 237 / 50%). - HEX:
#7C3AED80— the same purple with an alpha pair appended (80in hexadecimal is 128 out of 255, roughly 50%). - HSL:
hsla(262, 83%, 58%, 0.5), or in modern CSS,hsl(262 83% 58% / 50%).
Alpha is not part of the colour; it is how much of what sits underneath shows through. If transparency is the main thing you need, RGBA is usually clearest, because the opacity sits in plain sight as a decimal rather than hidden in a final HEX pair.
Two conversion traps
Converting is safe in principle, but rounding can shift a channel by a digit: HSL values are usually shown as whole numbers, and converting back from those rounded numbers can move a channel one step. The difference is invisible to the eye, but for exact brand tokens, convert once and store the result.
The second trap is the lightness illusion: equal HSL lightness does not mean equal perceived brightness across hues, so a scale built by stepping lightness evenly will look uneven — yellows jump out, blues recede. Check the result by eye, and with a contrast checker for text.
Where CMYK fits — and why this converter does not do it
CMYK — cyan, magenta, yellow and key (black) — is the colour model of print, where inks subtract light rather than adding it. It is a genuinely different model, not a fourth spelling of the same colour: a vivid screen purple may have no exact ink equivalent, and screen-to-print conversion is always approximate.
CSS does not support CMYK as a colour function, and the converter on this site does not convert to or from CMYK either — it handles HEX, RGB and HSL only, the screen and CSS formats. If you are preparing work for a printer, you need a print-focused tool and should expect some colours to shift from screen to paper. For anything that ends up on a screen, HEX, RGB and HSL are the complete set.
Try it: the Color Converter on Manage My Tools
The fastest way to make this concrete is to convert a colour yourself. The Color Converter on Manage My Tools takes a colour in any one format and returns the other two, with a live preview swatch so you can see exactly which colour you are copying.
Enter #7C3AED and you will get back the RGB and HSL values used in this article; enter an rgb() value from a screenshot tool for the HEX token your style guide wants; nudge an hsl() lightness value up or down for the lighter or darker variant in all three notations.
Three honest limits, stated on the tool page itself: it converts one colour at a time, so it will not build a palette (the Color Tools category has a separate Palette Generator that works from a base colour); it does not handle CMYK or Pantone; and it runs entirely in your browser, so the colour you type is never sent to a server. Out-of-range numbers are clamped to the nearest valid value with a note, and three-digit HEX codes expand to six digits automatically. To see every tool on the site, browse all tools.
The notation you choose will not change your colour — only how fast you, and the next person to read your code, understand it. Store it in HEX, adjust it in HSL, and let RGB do the talking when the machine hands you numbers.
Frequently asked questions
Are HEX and RGB the same thing?
Not the same notation, but the same information: HEX is the RGB channel values written in base 16, and every HEX code has an exact RGB equivalent.
Why does my converted colour shift by one digit?
Usually rounding: HSL values are typically displayed as whole numbers, and converting back can move a channel by one step. Invisible in practice; for exact brand tokens, convert once and store the result.
Does HSL lightness mean the same brightness for every hue?
No. Lightness is a position on the dark-to-light scale for that hue, not perceived brightness — yellow at 50% lightness looks brighter than blue at 50%. Check scales by eye, and use a contrast checker for text.
Can I convert a colour to CMYK here?
No. The Color Converter handles HEX, RGB and HSL only, the screen and CSS formats. CMYK is a print model and needs a print-focused tool, and screen-to-print conversion is always approximate.