RGB to HEX Converter

RGB to HEX conversion is one of the most practical tasks in web design, front-end development, and digital brand work. You often receive colors as three decimal numbers — red, green, and blue from 0 to 255 — from a design spec, an API response, or a screenshot in DevTools, but your stylesheet, Figma token, or README needs a compact HEX code like #FF5733. This free converter turns any valid RGB triplet into its exact HEX equivalent instantly, with a live preview and one-click copy.

RGB (Red, Green, Blue) is an additive color model. Each channel measures how much of that primary light is present, from 0 (none) to 255 (maximum). Pure red is rgb(255, 0, 0), white is rgb(255, 255, 255), and black is rgb(0, 0, 0). In CSS you write rgb(255, 87, 51); in JavaScript canvas APIs you pass arrays like [255, 87, 51]. RGB is intuitive for blending, animation, and programmatic color math.

HEX (hexadecimal) encodes the same three channels using base-16 notation. A six-digit code #RRGGBB packs red, green, and blue into six characters — two per channel. The leading hash is CSS convention; some tools store only the six digits. HEX is shorter in config files, easier to scan in palette lists, and the default export format from most design tools. Search terms like rgb to hex, rgb to hex converter, convert rgb to hex, and rgb color to hex all describe this same everyday need.

The conversion math is exact and reversible. Take each decimal channel and convert it to two hexadecimal digits. For example, red 255 becomes FF (15×16 + 15), green 87 becomes 57 (5×16 + 7), and blue 51 becomes 33 (3×16 + 3). Concatenate them: #FF5733. Values below 16 pad with a leading zero so each channel always occupies two digits — red 10 becomes 0A, not a single character.

Why convert RGB to HEX? CSS custom properties and Tailwind config often store HEX tokens. Brand guidelines list HEX while your component library reads RGB tuples. GitHub README color badges expect hex. Email templates and SVG fills frequently use # notation. When a client sends rgb(202, 70, 27) from their style guide, you need the hex equivalent for a Figma plugin or a VS Code theme file. Design handoff documents mix formats; having a fast converter removes friction.

Common use cases include: translating DevTools computed RGB values into HEX for bug reports; converting chart series colors from D3 RGB arrays into CSS hex; preparing design-system tokens from spreadsheet RGB columns; writing Storybook controls that accept rgb() but export hex; documenting accessible color pairs where one format is specified and another is required; and teaching students the relationship between decimal channels and hexadecimal notation with instant visual feedback.

This tool runs entirely in your browser — no signup, no upload, no delay. Enter R, G, and B values, drag the saturation/brightness panel, adjust hue, or use the color picker. Copy the full #HEX string, the six digits without hash, or the bonus HSL value. For the reverse direction, try our HEX to RGB Converter; for every format at once, see the Color Converter.