Colour Code Converter (HEX, RGB, HSL)
Convert colour codes between HEX, RGB and HSL, a whole palette at a time
Your data stays with you. Conversion happens inside the browser; nothing is sent to a server.
Did this tool do the job?
Thanks, your feedback came through.
How it works
Write one colour per line; each line is recognised on its own, so a list can mix HEX, RGB and HSL freely. HEX is accepted in the six-character form (#2F6FED) and in the three-character short form (#2F6), and the leading hash is optional. For RGB, write rgb(154, 52, 18) or just the three numbers separated by commas or spaces; a channel outside the 0-255 range is rejected rather than quietly trimmed, so a typo shows up instead of returning the wrong colour. HSL expects hue in degrees from 0 to 360 with saturation and lightness as percentages, and the rgba() and hsla() spellings are read too, though the transparency value is not carried into the output. Every colour that is read successfully appears as a live swatch beside its HEX label, so you can see what you converted rather than trusting the numbers. Any line that cannot be read is marked in the output, which tells you exactly which one to fix.
This tool is also known as hex to rgb, rgb to hex, color code converter, colour code converter, hex to hsl, convert color codes, rgb to hsl.
What is HEX colour code?
A HEX code writes the red, green and blue components of a colour in base 16, as six characters after a hash: #9A3412, for example. The first pair carries red, the middle pair green, the last pair blue, and a three-character shorthand such as #F00 is read by doubling each character. Because it is short, unambiguous and easy to copy, it has become the default colour language of CSS, of design tools and of brand guidelines — most colours you are handed by a designer arrive in this form.
What is RGB?
RGB describes a colour the way a screen actually produces it: as the intensity of red, green and blue light, each on a scale from 0 to 255. The notation rgb(154, 52, 18) states all three channels openly, which makes it easy to see what raising or lowering one of them does to the result. It carries exactly the same information as a HEX code — only the number base differs — so the choice between them is practical rather than technical. Reach for RGB when code has to do arithmetic on the channels.
What is HSL?
HSL describes a colour through three components closer to how people perceive it: hue (the position on the colour wheel, 0 to 360 degrees), saturation and lightness. Producing a lighter, darker or more muted version of the same colour is a matter of changing one number, which is why designers reach for HSL when building a palette or deriving a theme. CSS supports the hsl() notation directly, so a value read here can be pasted into a stylesheet without further conversion.
Are HEX and RGB the same colour?
Yes — HEX and RGB are two spellings of the same information: #9A3412 and rgb(154, 52, 18) describe exactly the same colour, because hexadecimal 9A is decimal 154. Choosing between them is a question of where the value is going, not of what it means. HSL is different in kind: it describes the same colour through hue, saturation and lightness rather than three light channels. Because those values are rounded to whole numbers for readability, a round trip through HSL can come back a unit or two off. The colour still looks identical on screen; the code no longer matches character for character, which matters when the code itself is the thing being specified.
Which format for which job?
All three notations can carry the same colour; what decides between them is where the value is going. For a single value pasted into a stylesheet, HEX is the shortest and the most widely recognised.
If you are doing arithmetic on the channels, RGB puts the three numbers in front of you. If you are deriving a lighter or darker member of the same family, HSL lets you change one number instead of three.
- HEX → short, standard in CSS and design tools
- RGB → when you need the channels separately
- HSL → for building a tone family and light or dark variants
Why a value comes back one unit off
HSL values are fractional; they are rounded to whole numbers so the output stays readable. Convert a HEX code to HSL and back and you may see a difference of one or two units in a channel.
The shift is invisible on screen, but it is real. When a code has to stay exactly as issued — a brand colour, a value written into a design specification — keep the HEX as your source of truth and treat the HSL reading as derived from it.
Frequently asked questions
How do I convert a HEX code to RGB?
Write the code in the left pane and set the output format to RGB. The result appears in the right pane as you type, with a swatch beside it showing the colour itself.
Can I convert several colours at once?
Yes. Put one colour per line. The whole list is converted in a single pass and stays in the same order, so a palette comes back as a palette.
Is the short HEX form supported?
Yes. A three-character code such as #2F6 is expanded by doubling each character, which is exactly how a browser reads it. The leading hash is optional here as well.
Why is my colour marked as unrecognised?
Usually a channel is out of range or a bracket is missing. RGB channels must sit between 0 and 255, hue between 0 and 360, and saturation and lightness between 0 and 100. Lines that fail are listed so you can correct one instead of rechecking all of them.