In this article
Colour on a screen has one truth and several spellings. A brand guide gives you a HEX code, a stylesheet may want rgb(), a design tool shows HSB, and the person who says “just make it a bit lighter” is really talking about HSL. Mixing them up is where mistakes start: a missing digit, a percentage sign in the wrong place, a code that looks right but is a different colour. This guide explains how each format is built, so you can convert in your head when you must and with a tool when you can.
How a screen colour is stored
Every pixel mixes three lights: red, green and blue. Each light has 256 levels, from 0 (off) to 255 (full). Three channels with 256 levels each give 256 × 256 × 256 = 16,777,216 possible colours. Every format on this page is just a different way of writing those three numbers, or a different way of looking at them.
Black is 0, 0, 0 and white is 255, 255, 255. Pure red is 255, 0, 0. Every grey has the same number in all three channels.
Convert between HEX and RGB by hand
HEX is base 16, where the digits run 0 to 9 and then A to F for 10 to 15. Each channel is a pair of digits. To read a pair, multiply the first digit by 16 and add the second.
| Channel | HEX pair | Working | Value |
|---|---|---|---|
| Red | 63 | 6 × 16 + 3 | 99 |
| Green | 66 | 6 × 16 + 6 | 102 |
| Blue | F1 | 15 × 16 + 1 | 241 |
So #6366F1 is rgb(99, 102, 241). Case does not matter: #6366f1 is the same colour.
To go the other way, divide each number by 16. The whole part is the first digit and the remainder is the second. Take green 87 from rgb(255, 87, 51): 87 ÷ 16 is 5 remainder 7, so the pair is 57. Red 255 is 15 remainder 15, which is FF, and blue 51 is 3 remainder 3, which is 33. That gives #FF5733. If base 16 is new to you, our guide to counting in bases 2, 10 and 16 explains why it is used.
How to use the Color Converter
- Open the Color Converter.
- Pick a colour with the colour box, or type a HEX code in the field. The page starts with #6366F1.
- Read the rows: HEX, RGB, RGBA, HSL, HSLA and HSV.
- Press Copy next to the one you need. The button turns green and says “Copied”.
The same colour, six ways
Here is one colour, #FF5733, as the tool writes it. Notice that the first four rows carry the same information, and the last two describe the colour from a different angle.
| Format | How the tool writes it | What it means |
|---|---|---|
| HEX | #FF5733 | Three pairs: red, green, blue |
| RGB | rgb(255, 87, 51) | The same three numbers, in decimal |
| RGBA | rgba(255, 87, 51, 1) | RGB plus opacity. 1 is solid, 0 is invisible |
| HSL | hsl(11, 100%, 60%) | Hue 11 degrees, fully saturated, 60 percent light |
| HSLA | hsla(11, 100%, 60%, 1) | HSL plus opacity |
| HSV | hsv(11, 80%, 100%) | Hue, saturation and value, as many design tools show it |
The tool always writes 1 for opacity. To make a colour half see-through, change the last number to 0.5 yourself.
HSL: the format made for shades
HEX and RGB tell you how much of each light to mix, which is hard to picture. HSL describes the colour the way people talk about it. Hue is the position on the colour wheel, in degrees. Saturation is how vivid it is, from grey at 0 percent to full colour at 100. Lightness runs from black at 0 percent through the pure colour at 50 to white at 100.
Pure red is hue 0, yellow 60, green 120, cyan 180, blue 240 and magenta 300. The tool confirms each of these. Our starting purple sits at 239, just short of pure blue.
The practical gain is in shades. To make a hover colour darker or a background lighter, keep the hue and the saturation and change only the lightness. Starting from the tool’s default, hsl(239, 84%, 67%):
| Lightness | HSL | Same colour as RGB |
|---|---|---|
| 80 percent (lighter) | hsl(239, 84%, 80%) | rgb(161, 163, 247) |
| 67 percent (the original) | hsl(239, 84%, 67%) | rgb(100, 103, 242) |
| 50 percent (richer) | hsl(239, 84%, 50%) | rgb(20, 24, 235) |
| 35 percent (darker) | hsl(239, 84%, 35%) | rgb(14, 17, 164) |
Doing the same by editing a HEX code would mean changing three numbers at once and guessing. For a ready-made ladder of shades, use the Color Shades Generator.
- Exact: this is the HEX code you started with
- Safe to share as the brand colour
- HSL is shown in whole numbers
- Each channel lands one step higher
- Invisible to the eye, but not identical
Converting HEX to HSL and back through whole-number values can shift a channel by one. Treat the first HEX code as the master and convert from it every time.
HSL against HSV
The converter shows HSV as well. It looks like HSL, but its third number, value, means brightness. At 100 percent value the colour is as bright as it can be, but it is not necessarily light: pure red is hsv(0, 100%, 100%) and hsl(0, 100%, 50%). Many colour pickers in image editors use this model, under the name HSB. If a design tool and a stylesheet seem to disagree about “saturation”, this is usually why.
| Colour | HEX | RGB | HSL | HSV |
|---|---|---|---|---|
| Pure red | #FF0000 | 255, 0, 0 | 0, 100%, 50% | 0, 100%, 100% |
| Pure blue | #0000FF | 0, 0, 255 | 240, 100%, 50% | 240, 100%, 100% |
| Orange | #FFA500 | 255, 165, 0 | 39, 100%, 50% | 39, 100%, 100% |
| Mid grey | #808080 | 128, 128, 128 | 0, 0%, 50% | 0, 0%, 50% |
| White | #FFFFFF | 255, 255, 255 | 0, 0%, 100% | 0, 0%, 100% |
Greys have no hue, so the tool shows 0. When red, green and blue are equal, the hue number carries no meaning.
Which format should you use?
Browsers understand all of these in CSS, so the choice is about how easy the code is to read and change, not about how it looks.
Common mistakes
- Dropping the hash or a digit.
#6366Fis five digits and is not a valid colour. A valid code has six digits, or three in shorthand. - Copying HSV numbers into CSS hsl(). The two models share a name for two of their numbers but not their meaning.
- Forgetting the percent signs. In hsl(), saturation and lightness take percentages, while the hue is plain degrees.
- Matching colours by eye. Two codes that differ by a few steps look identical on one screen and different on another. Compare the numbers instead.
- Trusting a colour name. CSS has only about 140 named colours, so most colours have no standard name.
Related checks for a colour you have chosen
Once you have the right code, check that text on top of it can be read. The Contrast Checker gives the ratio, and our guide on the contrast ratio explains the targets. To lift a colour out of a photo or logo, use the Image Color Extractor. For a set of colours that go well together, try the Color Palette Generator, and for a quick pick the Color Picker. If your logo is an SVG that you now need as a picture, see how to convert SVG to PNG.
Questions people ask
How do I convert HEX to RGB?
Split the six-digit code into three pairs and turn each pair into a number from 0 to 255 by multiplying the first digit by 16 and adding the second. For #6366F1 that gives 99, 102 and 241. The Color Converter does it instantly and shows RGB, HSL and more.
hex color code ko rgb mein kaise badle?
Color Converter kholiye, colour chuniye ya HEX code likhiye jaise #6366F1. Neeche RGB, HSL aur baaki formats dikhenge, aur Copy dabane se copy ho jayenge. Haath se karna ho to har pair ko 16 se guna karke jodiye.
What is the difference between HSL and HSV?
Both use hue and saturation, but the third number differs. In HSL it is lightness, where 100 percent is white. In HSV it is value, where 100 percent is the brightest version of the colour. The same colour has different saturation numbers in the two.
How many colours can HEX codes represent?
A six-digit HEX code has 256 levels for each of red, green and blue, so 256 × 256 × 256 = 16,777,216 colours.
Does the Color Converter accept RGB or HSL input?
No. It starts from a HEX code, typed or picked with the colour box, and shows the other formats. To start from RGB or HSL, convert by hand or pick the colour visually.
Why does my colour change by one step after converting back?
HSL values are shown as whole numbers, so some precision is rounded away. Converting back can move a channel by one, for example from 99, 102, 241 to 100, 103, 242. Keep the original HEX code as the master.
What does the last number in rgba() and hsla() mean?
It is opacity, from 0 (fully transparent) to 1 (fully solid). The converter writes 1. Change it to 0.5 for a half see-through colour.
How do I make a colour lighter or darker?
Convert it to HSL and change only the lightness number, keeping hue and saturation the same. Higher lightness is lighter and lower is darker. The Color Shades Generator builds a whole ladder for you.