Last updated:
RGB to HEX
Convert RGB color values to hexadecimal format instantly with live preview, CSS code generation, and 8-digit alpha support.
Last updated: April 29, 2026
Hexadecimal Output
Common Presets
How to use
Adjust the sliders for Red, Green, and Blue channels (0-255).
The Hex code will update instantly in the output field.
Click the copy icon to use the hex value in your CSS or design tool.
Hex codes are a hexadecimal representation of RGB values. Each pair of characters represents the 0-255 range for Red, Green, and Blue respectively.
RGB to HEX
Translate standard decimal Red, Green, and Blue coordinates (0 to 255) into standardized 6-digit and 8-digit Hexadecimal color codes. In digital design and web development, hexadecimal color notation represents 24-bit TrueColor depth by dividing each 8-bit byte into two base-16 digits from 00 to FF. Our converter performs exact mathematical divisions by 16, mapping integer quotients and remainders to hex characters (0-9 and A-F) with zero floating-point approximation error. It features an interactive color swatch with real-time sliders, automatic 3-digit shorthand detection when channel pairs are identical (e.g., #336699 to #369), and full support for modern 8-digit hexadecimal notation with alpha transparency channels (#RRGGBBAA). All operations execute instantly in local JavaScript memory, providing copy-ready CSS declarations for stylesheets, Figma, and design systems.
Why This Tool Exists
What makes this useful — and why I built it this way.
Developer Ready: Copy clean hex codes formatted specifically for CSS, Tailwind, SCSS, or SVG fills.
Visual Verification: The live preview swatch ensures you never accidentally copy incorrect color channels.
Standards Compliant: Matches W3C CSS Color Module Level 3 and Level 4 hex specifications.
Mathematical Precision: Eliminates manual base-16 calculation errors in color tokens.
When You'd Use This
Real situations where this tool saves the day.
Front-End Engineering: Convert Figma and Photoshop RGB specs into CSS color variables.
Design Systems: Standardize brand color palettes into uniform 6-digit hex tokens.
Canvas & SVG Graphics: Translate dynamic RGB color loops into hex strings for vector fills.
UI Accessibility: Extract hex codes to test color contrast ratios against WCAG 2.1 AA standards.
Using RGB to HEX
It's straightforward — here's how it works.
Input your decimal Red, Green, and Blue numbers (0 to 255) into the respective numeric fields.
Alternatively, drag the color sliders or click the interactive color picker.
Optional: adjust the Alpha transparency slider if you need an 8-digit hex code.
Observe the real-time color swatch update and verify your resulting hex value.
Click the copy button to transfer the formatted #RRGGBB code straight to your clipboard.
Questions People Ask
Honest answers about how this works.
What is a hexadecimal color code?
A hexadecimal color code is a six-digit, three-byte base-16 number used in HTML, CSS, and SVG design to represent colors. The bytes represent the Red, Green, and Blue channels of the color. Each channel can have a value from 00 (minimum intensity) to FF (maximum intensity, equivalent to 255 in decimal).
How exactly do you calculate hexadecimal from RGB decimal values?
To convert each RGB channel value (0 to 255) to hex, you divide the value by 16. The quotient (ignoring the remainder) is the first hex digit, and the remainder is the second hex digit. For values 10 to 15, we map them to letters A to F (A=10, B=11, C=12, D=13, E=14, F=15). For example, a Red value of 201 divided by 16 gives a quotient of 12 (C) and a remainder of 9, making it 'C9' in hex.
What is shorthand 3-digit hex format?
Shorthand hex colors use 3 digits instead of 6 digits (e.g., #369 instead of #336699). When parsed, the browser doubles each digit. Shorthand is only possible when both digits for each channel are identical: Red (#AA), Green (#BB), Blue (#CC) simplifies to #ABC.
How do 8-digit hex codes represent transparency?
An 8-digit hex code (#RRGGBBAA) appends a fourth two-digit byte that represents the alpha channel. A value of 00 represents 0% opacity (completely transparent), 80 represents 50% opacity, and FF represents 100% opacity (fully opaque). Supported across all modern browsers.
Discover More Tools
Hand-picked utilities to speed up your workflow.