RGB to HEX Converter

RGB expresses color as three additive light channels — red, green, and blue — each with an intensity from 0 to 255. This model maps directly to how digital displays work: each pixel is composed of red, green, and blue sub-pixels whose brightness is controlled independently. HEX notation stores the same three channels in hexadecimal, a base-16 numbering system where each digit represents a value from 0 to 15 using the characters 0 through 9 and A through F. The two-digit hex pair for each channel covers the full 0–255 range with exactly two characters, making a six-character HEX code a compact and lossless representation of any RGB color.

Converting RGB to HEX is a fundamental operation whenever code that works with color internally in RGB needs to output colors in a format expected by CSS or design tooling. JavaScript canvas operations, WebGL shaders, color animation libraries, and image processing pipelines all work with numeric channel values internally, but the CSS properties that control most webpage visual output — background-color, border-color, color, box-shadow — accept HEX strings as one of their primary color formats. Converting the internal RGB representation to HEX at the output stage is the standard way to bridge these two representations.

The conversion algorithm converts each integer channel to its two-digit hexadecimal representation. In JavaScript, this is Math.round(channel).toString(16).padStart(2, "0"), and the three results are concatenated with a # prefix. The rounding step handles decimal channel values produced by color calculations — interpolating between two colors, adjusting brightness by a percentage, or sampling a pixel from canvas data can all produce fractional channel values that must be rounded to the nearest integer before converting to HEX. This rounding introduces a tiny amount of error in round-trip conversions (HEX → RGB → HEX), but the error is always within half a step on a 0–255 scale and is imperceptible visually.

In design documentation and brand guidelines, HEX is the dominant format for specifying colors precisely because almost every tool and platform recognizes it. Figma, Sketch, Adobe Creative Cloud, Google Docs, Notion, GitHub, and most CSS frameworks display color pickers with HEX as the default output format. When a developer copies an RGB value from browser DevTools or a JavaScript color calculation and needs to document it alongside the rest of a palette, converting to HEX produces a format that designers, other developers, and clients can all use directly without further conversion.

One important limitation of RGB and HEX is the absence of an alpha channel. Standard six-digit HEX encodes only fully opaque colors. Transparency requires either the CSS rgba() notation (which extends RGB with a fourth channel from 0 to 1) or the eight-digit HEX format (#RRGGBBAA) supported in modern CSS. If your color has an alpha component, keep it in RGBA format or check whether your target platform supports the eight-digit HEX form before converting. This converter handles the standard opaque case; for alpha-aware conversion, ensure downstream code handles the full RGBA specification.