RGB to HEX Converter

How to Convert RGB to HEX by Hand

Going from RGB to HEX is the reverse trip: you take three decimal channel values, each between 0 and 255, and rewrite each one as a two digit base 16 number. Stick the three results together, add a hash in front, and you have a HEX code.

The steps:

1. Take the red value and divide by 16. The whole number is the first hex digit, the remainder is the second.
2. Do the same for green, then blue. Values 10 through 15 are written as A through F.
3. Concatenate the three two digit results in red, green, blue order.
4. Add a leading hash to finish the code.

Worked example: rgb(255, 87, 51)

Always Pad to Two Digits

The one thing people get wrong is dropping a leading zero. Every channel must become exactly two hex characters. A red value of 5 converts to 05, not 5, because a HEX code is read in fixed pairs. If you wrote #553 instead of #050503 the browser would read it as a completely different color, or as an invalid shorthand. When a channel converts to a single digit, pad it with a leading zero before joining the pairs.

Why Designers and CSS Prefer HEX

If RGB gives you the raw numbers, why convert back to HEX at all? Convenience. A HEX code is a single compact token, seven characters including the hash, that you can copy, paste, and share without commas, spaces, or a function wrapper. Design tools, style guides, and CSS variables almost all default to HEX because one string is easier to pass around than three separate numbers. It also reads cleanly in a diff and slots straight into a color swatch. RGB earns its keep when you are doing math on the channels, but for storing and communicating a fixed color, HEX is the tidier choice, which is why it remains the lingua franca of web color.

Named Color Reference

CSS ships with a set of keyword colors you can write by name instead of a code. They map to exact HEX and RGB values, so the table below is handy when you want to sanity check a conversion or reach for a familiar color without opening a picker.