Type a HEX color code and get RGB, RGBA and HSL at once, or switch direction to turn RGB numbers back into HEX, with a live swatch and one tap copy buttons.
Runs in your browser. Nothing you type is sent anywhere.
This hex to rgb converter is for web designers, developers and anyone moving colors between CSS, design apps and code. It reads 3, 4, 6 and 8 digit HEX codes and gives you RGB, RGBA and HSL, and it also turns RGB values back into HEX, with a preview so you can see the color.
How Do I Convert a HEX Color to RGB?
Split the HEX code into three pairs and convert each pair from base 16 to a number from 0 to 255. For #0B7A75, 0B is 11, 7A is 122 and 75 is 117, so the RGB value is rgb(11, 122, 117). A short code like #F80 doubles each digit to #FF8800, which is rgb(255, 136, 0).
How Do You Convert HEX to RGB?
To convert HEX to RGB, split the six digit code into three pairs and turn each pair from base 16 into a number from 0 to 255.
0B = 0 × 16 + 11 = 11
7A = 7 × 16 + 10 = 122
75 = 7 × 16 + 5 = 117
so #0B7A75 = rgb(11, 122, 117)
Hexadecimal is base 16: after 0 to 9 it counts A = 10, B = 11, up to F = 15. Each pair can hold 256 values, 00 to FF, which matches the 0 to 255 range of each RGB channel in the sRGB color space used by the web. Going the other way, from RGB back to HEX, you divide each number by 16: the whole part is the first digit and the remainder is the second, so 122 ÷ 16 = 7 remainder 10, which is 7A.
What Do 3, 4 and 8 Digit HEX Codes Mean?
A 3 digit code is shorthand where each digit is doubled, a 4 digit code adds an alpha digit to that, and an 8 digit code adds a two digit alpha pair to the normal six.
So #F80 means #FF8800, which is rgb(255, 136, 0). The alpha channel sets opacity: 00 is fully clear and FF is fully solid. In #0B7A7580, the 80 is 128 out of 255, about 50% opaque, so it becomes rgba(11, 122, 117, 0.5). These forms are all defined in the W3C CSS Color Module Level 4, and all current browsers support them.
| HEX | RGB or RGBA | HSL |
|---|---|---|
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #F80 | rgb(255, 136, 0) | hsl(32, 100%, 50%) |
| #0B7A7580 | rgba(11, 122, 117, 0.5) | hsla(177, 83%, 26%, 0.5) |
What Is HSL and Why Use It?
HSL describes a color by hue (its angle on a color wheel, 0 to 360°), saturation (how strong it is) and lightness (how close to white or black), which makes it easier to tweak by hand than HEX or RGB.
To make a lighter shade of #0B7A75, you only raise the last number of hsl(177, 83%, 26%), for example to 40%. Lightness is the average of the largest and smallest RGB channel as a share of 255. If you keep a long list of brand colors, the case converter switches every HEX code to uppercase or lowercase at once, and remove duplicate lines clears out repeated codes.
Worked Example
A developer copies the brand teal #0B7A75 from a style guide. The tool shows rgb(11, 122, 117) and hsl(177, 83%, 26%). She needs a 50% see-through overlay, so she types #0B7A7580 and gets rgba(11, 122, 117, 0.5). Then she switches to RGB to HEX, types 255, 136 and 0 from a chart library, and gets #FF8800, with the note that its short form is #F80. Typing #0B7A7G shows a friendly error, because G is not a hexadecimal digit.
How Do You Use the HEX to RGB Converter?
Choose the direction
Tap HEX to RGB or RGB to HEX. Your current color carries over.
Enter the color
Type a HEX code with or without #, use the color picker, or type red, green, blue and alpha.
Read the result
The swatch and big line show the converted color, with a note on short codes or alpha.
Copy HEX, RGB or HSL
The boxes list every format. Tap a copy button to paste it into CSS or a design app.
Frequently Asked Questions
Is #FFF the same as #FFFFFF?
Yes. In a 3 digit HEX code each digit is doubled, so #FFF becomes #FFFFFF, which is rgb(255, 255, 255), pure white. Likewise #F80 is #FF8800 and #000 is black.
How do I convert RGB back to HEX?
Divide each channel by 16. The whole number is the first HEX digit and the remainder is the second. For 255, 136, 0: 255 is FF, 136 is 88 and 0 is 00, giving #FF8800.
What does the last pair in an 8 digit HEX code do?
It is the alpha, or opacity, from 00 (clear) to FF (solid). 80 is 128 out of 255, about 50%. So #0B7A7580 is rgba(11, 122, 117, 0.5) in CSS.
Is HEX case sensitive?
No. #0b7a75 and #0B7A75 are the same color. Browsers and design apps accept both. This tool shows uppercase so the digits are easy to read and compare.
Why does my HSL value differ by 1 from another tool?
HSL values are rounded to whole numbers, and tools round at different steps. For #0B7A75 the exact hue is about 177.3°, so one tool may show 177 and another 178. The color is the same.
Do RGB values have to be whole numbers?
In HEX they must, because each pair holds a whole number from 0 to 255. If you type a decimal such as 122.6 in RGB to HEX mode, the tool rounds it to 123 and tells you.
Sources and Further Reading
- W3C: CSS Color Module Level 4, hex color notation
- MDN Web Docs: hex-color CSS data type
- W3C: CSS Color Module Level 4, HSL colors
Related Tools
Last reviewed: October 2026