Color Converter

What the converter does

The tool shows one color in three formats: HEX, RGB and HSL. Change any of them and the others follow. You can also click the Color Picker to choose a color with your browser's own color window. The large bar at the top shows the current color. A checked pattern shows through it when the color is see-through.

• HEX — a code like #FF5733. Upper or lower case both work, and the # sign is optional. Codes with 3, 4, 6 or 8 digits are accepted.
• R, G, B — red, green and blue, each a whole number from 0 to 255.
• Opacity % — how solid the color is, from 0 (fully see-through) to 100 (solid). It starts at 100.
• H, S%, L% — hue from 0 to 360, saturation and lightness from 0 to 100. The tool shows these as whole numbers.

Under the boxes, one line shows the color as CSS in all three formats. The three Copy buttons give you the same text. Copy HEX gives the full code in lower case, like #ff5733. Copy RGB gives rgb(255,87,51). Copy HSL gives hsl(11,100%,60%). When opacity is below 100%, you get #ff573380, rgba(255,87,51,0.5) and hsla(11,100%,60%,0.5) instead.

One color, step by step

Let's follow #FF5733, a bright orange-red, through each format.

HEX to RGB

A HEX code is three pairs of hex digits: red, green, blue. Each pair is a number from 00 to FF, which is 0 to 255. The first digit counts sixteens, and A to F mean 10 to 15.

RGB to HSL

First divide each value by 255, so they run from 0 to 1: red 1, green 0.341, blue 0.2. The largest is 1 and the smallest is 0.2.

The tool gives the same answer. Type #FF5733 and you will see R 255, G 87, B 51 and H 11, S 100, L 60.

Why the way back is not always exact

Now type 11, 100 and 60 into the H, S and L boxes. The tool works out RGB again and gets rgb(255, 88, 51), or #ff5833. Green is 88, not 87. The real hue was 10.6°, and the tool rounded it to 11. There are 16,777,216 RGB colors. We counted the colors that whole-number HSL values can make with this tool: only about 2 million of them. So if you need one exact color, keep the HEX or RGB value as your main copy. When you type in the HEX or RGB boxes, the RGB values stay exact. Only typing in the H, S or L boxes works RGB out again from the rounded numbers.

Short HEX codes like #abc

A 3-digit code is a short way to write a 6-digit one. Each digit is doubled: #abc means #aabbcc, which is rgb(170, 187, 204) and hsl(210, 25%, 73%). #fff is white and #000 is black. The tool reads 3-digit codes and fills in the RGB and HSL boxes. When you leave the HEX box, it writes the code out in full as #aabbcc, and Copy HEX copies that full form. A 4-digit code like #f008 works the same way, with the last digit for opacity.

A few things to know when you type a code:

• The # sign is optional. ff5733 and #ff5733 give the same color.
• While a code is not complete, such as #ff573 with only 5 digits, the other boxes keep the last good color. A short note tells you what is missing. A letter that is not a HEX digit, such as g, is named in the note.
• The small Color Picker only understands solid 6-digit colors. The tool always gives it the full 6-digit code, so it matches the preview. It cannot show opacity.

Transparency (opacity)

CSS also allows 8-digit HEX codes, where the last pair is the opacity. The tool reads that last pair and shows it in the Opacity % box. In #ff573380, 80 is 128 out of 255, which is about 50%. So the tool shows Opacity 50 and gives rgba(255,87,51,0.5) and hsla(11,100%,60%,0.5). You can also go the other way: type 50 in Opacity % and the HEX code gets 80 at the end.

The opacity is shown as a whole percent, and in rgba() with two decimal places. That is a little rounded. 128 out of 255 is really 50.2%. Browsers turn 0.5 back into 128, so the color looks the same.

Why HSL is handy for lighter and darker shades

In RGB, making a color lighter means changing all three numbers. In HSL you keep the hue and saturation and change only the lightness. Here are shades of our orange-red made that way in this tool:

The other two numbers are useful too. Lower the saturation to get a softer color: hsl(11, 50%, 60%) is #cc7966, and at 0% you get plain gray, #999999. Add 180 to the hue to get the opposite color on the color wheel: hsl(191, 100%, 60%) is #33daff, a light blue.

Lightness is not the same as contrast

The same L value does not mean the same brightness to the eye. Pure yellow hsl(60, 100%, 50%) and pure blue hsl(240, 100%, 50%) both have 50% lightness. But on a white background, yellow has a contrast ratio of only 1.07 to 1, and blue has 8.59 to 1. The WCAG accessibility guidelines ask for at least 4.5 to 1 for normal text and 3 to 1 for large text. Our #FF5733 on white is 3.15 to 1: fine for a large heading, too low for body text. This tool does not check contrast, so use a contrast checker before you pick text colors.

Values out of range

The R, G and B boxes take whole numbers from 0 to 255. If you type something else, the tool uses the nearest allowed value and tells you. For example, 300 in the R box gives a note that says Using 255, and 12.8 is rounded to 13. When you leave the box, it shows the value that was used. Opacity works the same way from 0 to 100, H from 0 to 360, and S and L from 0 to 100. If a box is empty, the other boxes keep the last good color until you type a number.