HEX to RGB: how to convert color codes

Open the Color Picker

A HEX color such as #ff5733 is just three numbers written in base 16: two digits for red, two for green and two for blue. Convert each pair to an ordinary number between 0 and 255 and you have the RGB value, here rgb(255, 87, 51). HSL describes the same color as a hue angle, a saturation percentage and a lightness percentage, here hsl(11, 100%, 60%).

The free Color Picker shows all three formats side by side for any color you choose, each with its own Copy button, and it runs entirely in your browser. The rest of this page shows how the conversion works so you can check a value or do it without a tool.

Convert HEX to RGB by hand

Split the six digits into three pairs and convert each pair from base 16. In base 16 the digits run 0 to 9 and then a (10) to f (15). The first digit of a pair is worth 16 times its value and the second digit is worth its own value.

Worked example for #ff5733: ff is 15 x 16 + 15 = 255 (red), 57 is 5 x 16 + 7 = 87 (green), 33 is 3 x 16 + 3 = 51 (blue). So #ff5733 is rgb(255, 87, 51).

A three-digit code is shorthand that doubles each digit: #f53 means #ff5533, and #fff means #ffffff (white). An eight-digit code such as #ff573380 adds a fourth pair for transparency (alpha); 80 is 128, roughly 50% opacity.

Convert RGB to HEX

Go the other way: divide each number by 16. The whole part is the first digit and the remainder is the second. For rgb(26, 115, 232): 26 is 1 remainder 10, so 1a; 115 is 7 remainder 3, so 73; 232 is 14 remainder 8, so e8. The result is #1a73e8. Upper and lower case mean the same thing, so #1A73E8 is identical.

Common colors in HEX, RGB and HSL

These values match what the Color Picker shows for each color.

  • White: #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%).
  • Black: #000000, rgb(0, 0, 0), hsl(0, 0%, 0%).
  • Gray: #808080, rgb(128, 128, 128), hsl(0, 0%, 50%).
  • Red: #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%).
  • Green (pure): #00ff00, rgb(0, 255, 0), hsl(120, 100%, 50%).
  • Blue: #0000ff, rgb(0, 0, 255), hsl(240, 100%, 50%).
  • Orange: #ffa500, rgb(255, 165, 0), hsl(39, 100%, 50%).
  • Indigo (the picker's default): #6366f1, rgb(99, 102, 241), hsl(239, 84%, 67%).

When to use HEX, RGB or HSL

  • HEX is the shortest and the most common in CSS, design tools and brand guides.
  • RGB is handy when you need transparency in CSS, for example rgb(255 87 51 / 50%), or when a program asks for separate red, green and blue numbers.
  • HSL is easiest to adjust by eye: keep the hue and saturation and change only the lightness to get a darker or lighter shade of the same color.

What the Color Picker does and does not do

You choose a color with your browser's color dialog, or with the Eyedropper button in Chrome and Edge on desktop, and the tool fills in the HEX, RGB and HSL boxes. The boxes are read-only, so to convert a code you already have, type it into the browser's color dialog where it offers a HEX field (Chrome and Edge do). HSL values are rounded to whole numbers, so converting HSL back can be off by one in a channel. Nothing is uploaded.

Get the RGB value of any color

  1. Open the Color Picker and click the color swatch.
  2. Pick a color, or type a HEX code into the dialog if your browser offers that field.
  3. Copy the RGB (or HSL) value with the Copy button next to it.

Related tools and guides

FAQ

What is #ff5733 in RGB?
rgb(255, 87, 51). ff is 255, 57 is 87 and 33 is 51.
How do I convert HEX to RGB without a tool?
Split the code into three pairs and convert each from base 16: first digit times 16 plus the second digit, where a to f stand for 10 to 15.
What does a 3-digit HEX code mean?
Each digit is doubled, so #f53 is #ff5533 and #fff is #ffffff.
Is HEX case sensitive?
No. #FF5733 and #ff5733 are the same color.
Can I type a HEX code into the Color Picker?
The HEX, RGB and HSL boxes are read-only. Click the swatch and type the code into your browser's color dialog; Chrome and Edge show a HEX field there.
Is my color data sent anywhere?
No. The conversion runs in your browser.