HEX to RGB Color Converter

Why do colours have so many different formats?

Ask a designer for a brand colour and you might get #2563eb. Ask a developer who is writing a stylesheet and they might want rgb(37, 99, 235). Ask someone adjusting the shade in a design tool and they may prefer hsl(221, 83%, 53%). All three describe exactly the same blue. The formats exist because each one is convenient for a different job, and moving between them is a daily task for anyone who builds or styles web pages, presentations, apps or documents.

This guide explains how hexadecimal colour codes are built, how the converter turns them into RGB and HSL, how to check the maths yourself, and a few general ideas about colour contrast and accessibility that make your choices more readable for everyone.

What is a HEX colour code?

A HEX colour is a hash sign followed by hexadecimal digits. Hexadecimal is a base 16 counting system that uses the digits 0 to 9 and the letters A to F, where A is 10, B is 11, and so on up to F, which is 15. A full colour code has six digits, written as three pairs: #RRGGBB. The first pair is the amount of red, the second is green and the third is blue. Letter case does not matter, so #2563EB and #2563eb are identical.

Screens create colour by mixing red, green and blue light. Each channel gets one byte, a value from 0 to 255, and two hexadecimal digits are exactly enough to express that range, since the largest pair, FF, equals 15 x 16 + 15 = 255. A value of 0 means none of that light, and 255 means full strength.

How is a pair of hex digits converted to a number?

For a pair of digits, multiply the first by 16 and add the second. Take the code #2563eb:

• Red is 25 in hex: 2 x 16 + 5 = 37.
• Green is 63 in hex: 6 x 16 + 3 = 99.
• Blue is eb in hex: e is 14 and b is 11, so 14 x 16 + 11 = 235.

Therefore #2563eb is rgb(37, 99, 235). The high blue value and low red value are why it looks like a strong, slightly deep blue.

What is the three digit shorthand?

When each pair consists of two identical digits, CSS allows a shorter form. #fff is shorthand for #ffffff, and #0f0 expands to #00ff00. The converter does this by doubling each digit. So #f60 becomes #ff6600, which is rgb(255, 102, 0). The shorthand only works for colours whose pairs repeat, so #2563eb has no short version. The tool accepts both three and six digit codes, with or without the leading hash.

How does the converter calculate HSL?

HSL stands for hue, saturation and lightness, and it describes colour in a way that matches how people think about it.

• Hue is the position on the colour wheel in degrees: 0 is red, 120 is green, 240 is blue, and values in between blend neighbouring colours.
• Saturation is how vivid the colour is, from 0 percent (grey) to 100 percent (pure, intense colour).
• Lightness runs from 0 percent (black) through 50 percent (the pure colour) to 100 percent (white).

The conversion starts by dividing each RGB value by 255 to get fractions between 0 and 1. It finds the largest and smallest of the three. Lightness is the average of the two. Saturation depends on the gap between them relative to lightness, and hue depends on which channel is largest. Taking rgb(37, 99, 235): the fractions are about 0.145, 0.388 and 0.922. Lightness is (0.922 + 0.145) / 2, about 0.533, or 53 percent. The gap is 0.777, and dividing by 1 minus the absolute value of (2 x 0.533 - 1) gives a saturation of about 0.832, or 83 percent. Blue is the largest channel, which places the hue in the blue region, at roughly 221 degrees. The result is hsl(221, 83%, 53%). The tool rounds to whole numbers, so tiny differences from other software are possible.

How do you use the converter?

1. Enter a HEX code, such as #2563eb or f60.
2. Press Convert.
3. Check the colour preview bar to confirm it is the colour you expected.
4. Read the RGB and HSL values and copy whichever format your project needs.

If you see the message asking for a valid HEX code, the input probably has an invalid character or the wrong number of digits. Only 3 or 6 digits are accepted.

What do some worked examples look like?

HEX	RGB	HSL
#2563eb	rgb(37, 99, 235)	hsl(221, 83%, 53%)
#ff6600 (or #f60)	rgb(255, 102, 0)	hsl(24, 100%, 50%)
#336699	rgb(51, 102, 153)	hsl(210, 50%, 40%)
#1a1a1a	rgb(26, 26, 26)	hsl(0, 0%, 10%)

Check the third row by hand: 33 in hex is 3 x 16 + 3 = 51, 66 is 6 x 16 + 6 = 102, and 99 is 9 x 16 + 9 = 153. The smallest channel fraction is 0.2 and the largest is 0.6, giving lightness 0.4 and saturation 0.4 / 0.8 = 50 percent. Notice also the last row: when all three channels are equal, the colour is a neutral grey, so saturation is 0 and the hue is meaningless (shown as 0). Its lightness is 26 / 255, about 10 percent.

Why is HSL useful for building palettes?

Because the three values are separate ideas, HSL makes systematic adjustments easy. Want a darker hover state for a button? Keep the hue and saturation and reduce lightness by 8 to 10 points. Want a soft background tint? Raise lightness to 95 percent. Want a muted version? Lower saturation. Doing the same with raw RGB or HEX means changing all three channels in a coordinated way, which is hard to do by eye. Many designers convert a brand HEX to HSL, create a family of tints and shades by editing lightness, and then convert back.

What should you know about contrast and accessibility?

A colour that looks great on a design board can be unreadable for some people when used for text. Contrast is the difference in brightness between text and its background. Low contrast, such as light grey text on white, is hard to read for many users, including people with low vision, people on dim or glare-affected screens, and people who are simply tired. Accessibility guidelines for the web set minimum contrast ratios, and a general rule of thumb is to pair dark text with a light background, or the reverse, and to avoid mid tone on mid tone combinations. Do not rely on colour alone to convey meaning either. A red error message should also include an icon or words, because some people cannot distinguish red from green. This tool shows a preview and converts values, but it does not measure contrast ratios, so use a dedicated contrast checker for that.

What mistakes should you avoid?

• Forgetting the length rule. Four or five digit codes are not valid for this tool.
• Judging colour on one screen. Displays vary in brightness and calibration, so test important colours on more than one device.
• Using rounded HSL as the master value. Rounding means converting back may land one unit off. Keep the original HEX as your source of truth.

Who is this tool for?

Web developers use it to translate design specs into CSS. Designers use it to move values between tools. Bloggers and small business owners use it to match a brand colour in a website builder that accepts only RGB or only HEX. Students learning about digital colour and number systems can use it to check their hand calculations.

Is my input private?

Yes. The conversion runs entirely in your browser using simple arithmetic. No colour codes or other data are sent to a server.

What are the limitations?

The tool converts only HEX to RGB and HSL. It does not accept eight digit HEX codes with an alpha (transparency) channel, named colours such as "navy", or reverse conversions. Values are rounded to whole numbers. It does not calculate contrast ratios, and the preview depends on your screen's colour accuracy.

Frequently asked questions

What is #2563eb in RGB?

It is rgb(37, 99, 235), because 25 in hex is 37, 63 is 99 and eb is 235.

Does the hash sign matter?

In CSS it is required, but the converter accepts codes with or without it. Add it back when you paste the code into a stylesheet.

Are uppercase and lowercase hex codes different?

No. #FFAA00 and #ffaa00 are the same colour. Pick one style and use it consistently in your code.

What does the shorthand #fff mean?

It expands to #ffffff, which is white. Each digit is doubled to form the full six digit code.

Why is the hue 0 for grey colours?

When red, green and blue are equal there is no dominant colour, so hue has no meaning. Tools conventionally display 0.

Can I convert transparency values?

Not with this tool. It handles opaque three and six digit HEX colours only.

Why might another tool show a slightly different HSL value?

Different tools round at different stages. A difference of one point in a value is normal and usually invisible to the eye.

In short

HEX, RGB and HSL are three views of the same colour, and moving between them is just arithmetic. Keep your original HEX, use HSL when you want to tweak shades, and check contrast before using a colour for text. If you are building a page, the Font Generator, the Percentage Calculator for adjusting lightness steps, and the Lorem Ipsum Generator for placeholder text are handy companions, and the QR Code Generator helps when you want a branded code. Browse all of our free tools for more.