RGB to HEX Converter

The RGB, HEX, and HSL converter encodes decimal red, green, and blue channel values into the six-digit #RRGGBB color code used in CSS, design tokens, SVG, many component libraries, and style guides. This direction starts with visible channel intensities such as RGB 51, 102, 255 and produces a compact web color such as #3366FF. If you are reading a hex value from a stylesheet and want to inspect its channels, use the HEX to RGB converter instead.

RGB values are easy to adjust by eye because each number shows how much red, green, or blue light is present. HEX values are easy to store in code because each channel becomes a two-character byte. The calculator bridges those needs: enter validated 0-to-255 integer channels, and it returns the CSS-ready hex string plus complete RGB and HSL representations and channel details.

Encoding RGB bytes as hex pairs

Each RGB channel is an 8-bit value. In decimal, that range is 0 through 255. In hexadecimal, the same range is 00 through FF. The first hex digit tells how many groups of 16 are in the channel; the second digit is the remainder. That is why decimal 255 becomes FF:

$255 = 15 \cdot 16 + 15$

Because 15 is written as F in hexadecimal, the pair is FF. Decimal 51 becomes 33 because:

$51 = 3 \cdot 16 + 3$

The full CSS pattern is red pair, green pair, blue pair:

$\text{RGB}(r,\ g,\ b) \rightarrow \#RRGGBB$

This is encoding, not color correction. The channel values stay the same; only their notation changes. For broader number-base work, try the decimal to hexadecimal converter. The binary calculator shows the byte logic behind 0-to-255 channels, and the digital storage converter helps with other byte-based quantities.

Formula

For a channel value c from 0 to 255:

$\text{first hex digit} = \left\lfloor \frac{c}{16} \right\rfloor$

$\text{second hex digit} = c - 16 \cdot \left\lfloor \frac{c}{16} \right\rfloor$

Convert those two values to hexadecimal symbols and pad with a leading zero when needed. Then concatenate channels in RGB order:

$\text{HEX} = \#\text{hex2}(\text{red})\text{hex2}(\text{green})\text{hex2}(\text{blue})$

The calculator’s RGB to HEX mode requires integer inputs. That means 51.5 is invalid on this page even though some color APIs can handle percentages or floating-point channels in other formats.

Example

Leave the direction set to RGB to HEX and use the defaults: red 51, green 102, and blue 255. The channel conversions are:

$51 = 3 \cdot 16 + 3 \rightarrow 33_{16}$

$102 = 6 \cdot 16 + 6 \rightarrow 66_{16}$

$255 = 15 \cdot 16 + 15 \rightarrow FF_{16}$

Join the pairs in red-green-blue order:

$\#3366FF$

The primary result is #3366FF. The result details show RGB: rgb(51, 102, 255), HSL: hsl(225.00, 100.00%, 60.00%), each RGB channel, and the derived hue, saturation, and lightness channels. The note identifies those RGB, HEX, and HSL forms as the same opaque sRGB color, and the copy text includes all three forms.

If any RGB channel is outside 0 through 255, or if the value is not a whole number, the calculator marks the input invalid. That behavior matches the byte-by-byte encoding used by six-digit hex color notation.

RGB values and their CSS hex codes

This table is aimed at encoding. It starts with decimal channels and shows how each byte becomes a pair before the CSS code is assembled.

Interpreting the encoded result

After conversion, each two-character pair still belongs to a channel. #CC3366 is not a single six-digit quantity for color editing; it is red CC, green 33, and blue 66. If you change only the last pair, you change blue. If you change all three pairs by similar amounts, you move the color lighter or darker. Equal pairs such as #222222, #777777, and #DDDDDD are grays because the channels match.

The hash sign is part of common CSS notation, not part of the numeric channel itself. Some tools accept hex without it, but stylesheets normally require the hash for color literals. The converter includes it in the result so the output is ready to paste into CSS custom properties, SVG fills, design-token JSON, or documentation.

Common mistakes

• Reversing channel order. CSS hex is red, then green, then blue; it is not blue-green-red.
• Forgetting leading zeros. Decimal 4 must become 04, not 4.
• Entering percentages such as 50, 100, 100 when the desired RGB is 50%, 100%, 100%; convert percentages to 0-to-255 values first.
• Expecting alpha transparency in a six-digit result. The result is opaque #RRGGBB.
• Rounding a channel outside the calculator. This page expects whole numbers already.
• Assuming the hex code changes contrast automatically; contrast depends on the chosen foreground and background colors.

Accuracy and limits

The calculator keeps the defined or cited relationship through the calculation and rounds only the displayed result. A converted number does not become more precise than the source measurement. Keep additional digits for chained calculations, then round to the precision justified by the original value; also preserve any reference basis or notation convention named with the input.

Sources

• MDN Web Docs, CSS color value — documents CSS hex and RGB color syntaxes.
• W3C, CSS Color Module Level 4: hexadecimal notation — specifies six-digit sRGB hexadecimal notation.
• W3C, CSS Color Module Level 4: HSL to RGB and RGB to HSL — publishes the conversion algorithms used for the retained HSL readout and input mode.