About the RGB to HEX Converter
This RGB to HEX converter takes three channel values between 0 and 255 and returns the hexadecimal code you can paste straight into a stylesheet, a design file or a brand document. Alongside the hex it shows the HSL equivalent and, usefully, works out whether black or white text will be more readable on that colour, so you find out immediately whether the value you just typed can carry a label. An uppercase toggle matches whichever convention your codebase follows, and a live swatch confirms you have entered what you thought you had.
How to use the RGB to HEX Converter
- 1
Enter the Red, Green and Blue values, each between 0 and 255.
- 2
Tick Uppercase output if your project writes hex codes in capitals.
- 3
Read the HEX code from the Values panel, alongside the HSL equivalent.
- 4
Check the readable-text recommendation, then copy the CSS snippet if you need it.
What people use it for
Converting a colour picked from a photograph
Eyedropper tools in image editors nearly always report RGB. Type the three numbers here to get the hex code your CSS or design file actually wants.
Translating print or brand guidelines
Brand documents often specify RGB alongside CMYK and Pantone but omit hex entirely, leaving web implementers to convert by hand every time.
Reading a colour out of code
Canvas, OpenGL and many charting libraries work in channel values. Converting to hex makes the value searchable and comparable against your design tokens.
Deciding on label colour for a swatch
The readable-text line tells you at a glance whether black or white text sits better on the colour, which is exactly the decision a category chip or a tag needs.
Why each channel stops at 255
One channel is stored in eight bits, and eight bits express 2 to the power of 8, or 256, distinct states — numbered 0 through 255. Three such channels give 24-bit colour, which is 16,777,216 possible values and the reason people call it truecolour: the count comfortably exceeds the roughly ten million shades human vision can discriminate, so banding in a smooth gradient comes from the encoding rather than from the eye running out of resolution. Values outside 0 to 255 are not an error in CSS; browsers clamp them, so rgb(300, -20, 128) renders as rgb(255, 0, 128). Modern CSS also accepts percentages, where 100 percent means 255, and floating-point numbers, which are rounded on the way to an eight-bit buffer. Wide-gamut displays are pushing past this: the color() function with display-p3 or rec2020 uses floating-point components covering a larger volume of visible colour than sRGB can express, and a hex code cannot represent those at all.
Converting back the other way
Going from RGB to hex means writing each channel as a two-digit base-16 number and concatenating them. Divide the channel by 16 for the first digit and take the remainder for the second, mapping 10 through 15 to a through f. Red 79 gives 79 divided by 16 as 4 remainder 15, so 4f; green 70 gives 4 remainder 6, so 46; blue 229 gives 14 remainder 5, so e5 — producing #4f46e5. The detail that catches people out is padding: a channel under 16 produces a single digit and must be padded with a leading zero, so 5 becomes 05, not 5. Miss that and the string is seven characters and silently invalid. For an alpha channel, multiply the 0-to-1 alpha by 255, round, and convert the same way, which makes 0.5 come out as 7f or 80 depending on rounding direction.
Tips
- Channel values are clamped rather than rejected, so a stray 300 quietly becomes 255.
- Modern rgb() takes a slash for alpha and accepts custom properties, which a hex code cannot do.
- The readable-text suggestion is a starting point; confirm the final pairing with a contrast checker.