Skip to content

Guide

Converting a brand's hex color to RGB for your codebase

Brand guides almost always ship hex. Canvas, WebGL, native mobile UI, and plenty of design tools want RGB channels instead.

By Published

Brand style guides overwhelmingly ship colors as hex — #1A73E8, say — because it’s compact and is the de facto default in design tools and CSS. But plenty of code doesn’t take hex directly: Canvas 2D drawing code, WebGL shader uniforms, native mobile color constructors (UIColor, Android’s Color class in some constructors), and various charting or data-viz libraries expect three separate numeric channels instead. Converting from the brand’s hex swatch to those numbers is an exact, lossless base conversion — not an approximation.

The conversion, step by step

A 6-digit hex color is three base-16 (hexadecimal) byte pairs concatenated: red, then green, then blue, each ranging from 00 to FF (0 to 255 in decimal). For #1A73E8:

Hex pairChannelDecimal value
1ARed26
73Green115
E8Blue232

Which gives rgb(26, 115, 232). Each pair converts independently — there’s no cross-channel math, so the conversion is exact in both directions and reversible with no rounding error, unlike, say, converting RGB to HSL, which involves floating-point trigonometric-style calculations that can introduce tiny rounding differences on round-trip.

Where the numbers show up in real code

Once you have the three channel values, the exact syntax depends on the platform: CSS and most web APIs accept rgb(26, 115, 232) directly; some shader and graphics APIs want each channel normalized to a 0-1 float (divide each by 255: 0.102, 0.451, 0.910); native mobile frameworks often have their own constructor signature (UIColor(red: 26/255, green: 115/255, blue: 232/255, alpha: 1)on iOS, for example). The channel values themselves don’t change across these — only the formatting and normalization the target API expects.

Keeping brand colors consistent across formats

The safest workflow is to treat the hex value in the brand guide as the single source of truth and derive every other representation (RGB, normalized floats, HSL for a design tool) from it programmatically or with a converter, rather than hand-typing separate constants for each format that can drift out of sync over time. If your codebase also needs a print-ready CMYK value for the same brand color, start from the same hex and convert from there — never estimate CMYK by eye against the screen color.

Frequently asked questions

Why do brand style guides use hex but some code needs RGB?
Hex is compact and became the default in CSS and design tools, but plenty of APIs — HTML5 Canvas fillStyle in some code paths, WebGL uniforms, native iOS/Android color constructors, and some charting libraries — take separate numeric red, green, blue arguments (often 0-255 or normalized 0-1) instead of a hex string.
How do I convert hex to RGB by hand?
Split the 6 digits into three pairs, convert each pair from base-16 to base-10. #1A73E8: 1A = 26, 73 = 115, E8 = 232, giving rgb(26, 115, 232). Each pair maps directly to one channel — no rounding or approximation involved, it's an exact base conversion.
Does converting hex to RGB ever lose precision?
No — hex and RGB(0-255) represent exactly the same 24-bit color space, just in different number bases, so the conversion is lossless in both directions. Precision loss only enters if you then convert further, e.g. down to a normalized 0-1 float for a shader, where floating-point rounding can matter at the sub-pixel level.
What's the RGB equivalent of a 3-digit hex shorthand?
Expand the shorthand first by doubling each digit — #F63 becomes #FF6633 — then convert the 6-digit form normally: FF = 255, 66 = 102, 33 = 51, giving rgb(255, 102, 51).

Sources & references

Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.

Related

More guides on this topic

Published September 25, 2026