Designers and developers often start with RGB values. The eyedropper tool in your favourite design app picks colors as RGB. Screen color pickers report RGB. Photoshop, Figma, and many other tools display colors as RGB by default. But CSS code, brand guidelines, and design tokens almost always use HEX. The two notations describe the same colors, so converting between them is just a matter of switching how you write the same value.
This article explains how RGB and HEX relate, how to convert from RGB to HEX, and how to use the DevHexLab RGB to HEX tool to do it without any math.
What RGB and HEX Are Both Describing
Every color you see on a screen is a mix of three primary colors of light: red, green, and blue. The amount of each color is what makes the shade. Pure red is full red, no green, no blue. White is full red, full green, full blue. Black is none of any.
RGB and HEX are two notations for writing those amounts.
RGB writes the values as decimal numbers from 0 to 255. So full red is rgb(255, 0, 0). A specific orange might be rgb(255, 87, 51).
HEX writes the same values in hexadecimal (base 16) with two digits per channel. So full red is #FF0000. The same orange is #FF5733.
The two formats hold identical information. There is no information loss when you convert from one to the other. The choice between them is purely about which is easier to read and use in a given context.
How the Conversion Works
To convert one RGB channel to two HEX digits, you write the channel value (0 to 255) in base 16. The way to do this in your head is to divide by 16 to get the first digit and take the remainder for the second digit, using A through F for the values 10 through 15.
For example, the channel value 255 is 15 times 16 plus 15, which in hex is FF. The channel value 87 is 5 times 16 plus 7, which in hex is 57. The channel value 51 is 3 times 16 plus 3, which in hex is 33.
So rgb(255, 87, 51) becomes #FF5733.
You can also leave the math to the converter. Knowing the principle helps when you spot patterns (like #FF being the maximum and #00 being the minimum) but you should never have to do hex arithmetic by hand.
When You Need HEX Specifically
There are several situations where HEX is the right choice over RGB.
When pasting into design tools and brand guidelines
Brand guidelines almost always specify colors in HEX because it is compact and copyable. Design systems usually define color tokens in HEX too. When you want to add a color to a Figma fill, a Sketch swatch, or a brand document, HEX is what is expected.
When writing CSS that does not need opacity
For solid colors, HEX is more concise than RGB. The CSS rule color: #FF5733 is shorter than color: rgb(255, 87, 51) and equally clear once you are used to reading HEX.
When following team conventions
Many teams pick HEX for solid colors and RGBA only when opacity is involved. If your team has this convention, follow it for consistency.
When generating slugs or identifiers
HEX values have no special characters that need escaping, which makes them safe to use as part of an identifier (like a CSS class name or a database key) when needed.
How to Use the DevHexLab RGB to HEX Tool
Open the RGB to HEX tool on DevHexLab. Enter your red, green, and blue values into the three input boxes, each from 0 to 255. You can also paste a full rgb() or rgba() string from your CSS and the tool parses out the values automatically.
The corresponding HEX value appears instantly below the inputs. It always starts with a hash symbol and has six characters in standard form, or eight if your input includes alpha.
If your source RGB has an alpha value, the tool produces an eight digit HEX value that includes the alpha channel at the end. The first six characters are the color and the last two are the alpha. If you want a HEX without alpha (because your CSS handles opacity separately), use the standard six digit output.
Click Copy to grab the HEX value. Paste it into your code, design tool, or document.
Everything happens in your browser. No data is sent to any server.
RGB to HEX in Practice
Picking from a screenshot and saving for CSS
You use a screen picker to grab the color of a button in a competitor's site. The picker reports rgb(31, 41, 55). Paste those values into the RGB to HEX tool and copy the result, #1F2937, into your CSS file.
Translating a Figma color to a brand document
In Figma, your accent color shows as RGB. To document it in your brand guidelines, convert to HEX and paste into the document.
Adding a hover state
Take your primary RGB color, convert to HEX, then create a hover variation by adjusting the value slightly. HEX is the more common format in CSS hover rules.
Auditing inconsistent colors
In an old codebase, the same color might be written as both rgb(59, 130, 246) and #3B82F6 in different files. Convert all RGB values to HEX (or all HEX to RGB) to normalise the codebase to a single format.
Tips for Working with Color Formats
Pick one format per codebase
Mixing HEX, RGB, and HSL in the same codebase makes it harder to spot duplicate colors and harder to maintain a coherent palette. Pick one as the primary format (HEX is most common) and use the others only when needed.
Use RGBA when you need opacity
Even though modern browsers support eight digit HEX with alpha, RGBA is more familiar and more universally recognised. Use HEX for solid colors and RGBA for colors with transparency.
Lowercase or uppercase HEX
Both #ff5733 and #FF5733 are the same color and equally valid. Uppercase is slightly more readable in most fonts. Pick one and be consistent within a file.
Three digit HEX is a shortcut, not a different color
A three digit HEX like #F73 is shorthand for #FF7733. Each single digit is duplicated to make the full pair. Shorthand only works when both digits of each pair are the same. Otherwise use the six digit form.
Frequently Asked Questions
Are RGB and HEX exactly equivalent?
Yes. Any color that can be expressed in one can be expressed in the other. The conversion is lossless in both directions.
Why are some HEX codes shorter than others?
HEX shorthand uses three digits when each pair of the full six digit form happens to have two identical digits. Most HEX codes do not have that property and stay six digits.
Does my browser convert HEX and RGB internally?
Yes. Browsers convert all color notations to the same internal representation before rendering. There is no performance difference between writing a color as HEX, RGB, or HSL.
What about colors outside the sRGB range?
HEX and standard RGB only describe colors in the sRGB color space, which covers most displays. Modern CSS supports wider gamut color functions like display-p3 and rec2020 for displays that can show more colors. The DevHexLab tools focus on sRGB because it covers nearly every web and design use case.
Convert Without Thinking
RGB and HEX are two views of the same color. You should never need to convert in your head. Open the DevHexLab RGB to HEX tool, paste your RGB, and copy the HEX. Save your attention for the design decisions that actually matter.