RGB to HEX Converter

Convert standard red, green, blue color profiles into short hexadecimal codes.

Red (R)59

Green (G)130

Blue (B)246

rgb(59, 130, 246)

HEX Output

#3B82F6

How to Use

Enter the Red channel value (0–255)

Input the red component of your color from 0 (no red) to 255 (full red).

Enter the Green channel value (0–255)

Input the green component from 0 to 255.

Enter the Blue channel value (0–255)

Input the blue component from 0 to 255 to complete the RGB triplet.

Copy the hex output

Get the #RRGGBB hex string ready to paste into CSS, HTML, SVG, or design tools.

How RGB works

The RGB structure consists of three parameters, representing the Red, Green, and Blue channels. The parameters span from 0 to 255. Converting this 3-number array base-10 format into a clean base-16 string ensures concise CSS styling.

Real-World Examples & Use Cases

CSS and HTML Stylesheet Authoring

CSS color properties (color, background-color, border-color, box-shadow) accept hex codes as the most concise notation. When an image editing tool or color picker provides an RGB readout (e.g. from color sampling a screenshot), developers need to convert to hex before writing it into their stylesheet. A designer extracting a brand color from a photo may get rgb(34, 197, 94) from their eyedropper — converting to #22C55E produces the clean hex value for the design system.

Design File Color Specification

Design-to-developer handoffs require consistent color notation. Figma, Adobe XD, and Sketch all display and export colors in hex notation within their inspect panels. When a developer receives colors from a design tool that exposed RGB values (older photo editing workflows, color calibration data, or color science pipelines), converting to hex ensures the values integrate cleanly into CSS design tokens, Tailwind config files, and component library theme objects that standardize on hex notation.

Programmatic Color Generation

Applications that generate colors programmatically — gradient generators, color scheme algorithms, procedural art, data visualization — often compute RGB channel values mathematically before needing the hex code representation for display. A chart library computing a 10-step color ramp from red to blue interpolates R, G, B values at each step and must convert each to hex for CSS output. Color blending, shade generation, and tint calculation all produce numerical RGB values that need hex conversion for browser rendering.

SVG and Canvas Drawing Code

SVG fill and stroke attributes use hex color strings: fill='#3B82F6'. When SVG colors are computed from data values (e.g. choropleth maps where darker shades represent higher values), the RGB channel values are calculated mathematically and need to be formatted as hex strings for the SVG attribute. Similarly, Canvas 2D contexts accept hex strings for fillStyle and strokeStyle, making RGB-to-hex conversion a routine step in dynamic visualization and generative graphics code.

How It Works

RGB to HEX conversion formula: Each channel (0–255) is converted to a 2-digit base-16 number: Hex digit = channel.toString(16).padStart(2, '0') R: decimal → 2-digit hex (uppercase) G: decimal → 2-digit hex (uppercase) B: decimal → 2-digit hex (uppercase) Result: '#' + RR + GG + BB Examples: (59, 130, 246): R: 59 → 3B G: 130 → 82 B: 246 → F6 Result: #3B82F6 (255, 255, 255) → #FFFFFF (white) (0, 0, 0) → #000000 (black) (128, 128, 128) → #808080 (medium gray) Decimal to Hex conversion: 0-9 maps directly; 10=A, 11=B, 12=C, 13=D, 14=E, 15=F For values 16+: divide by 16, first digit = quotient, second = remainder 130 ÷ 16 = 8 remainder 2 → 82

Frequently Asked Questions

Why does the hex code always have exactly 6 characters?▼

Each of the three color channels (Red, Green, Blue) requires exactly 2 hexadecimal digits to represent its full 0–255 range (00–FF in hex). Three channels × 2 digits each = 6 characters total. This fixed format guarantees parsers always know exactly which characters represent which channel.

What RGB value represents white, black, and gray?▼

White = rgb(255, 255, 255) = #FFFFFF — all channels at maximum. Black = rgb(0, 0, 0) = #000000 — all channels at zero. Any gray has equal R, G, and B values: medium gray = rgb(128, 128, 128) = #808080. The higher the equal value, the lighter the gray.

How many unique colors can RGB represent?▼

256 × 256 × 256 = 16,777,216 unique colors (~16.7 million). Each channel has 256 possible values (0–255), and three independent channels combine to produce this total. This matches the 6-character hex space: 16^6 = 16,777,216. Modern displays can render all 16.7M colors, though the human eye perceives far fewer distinct shades.

Can I use RGB values in CSS directly instead of converting to hex?▼

Yes. CSS natively supports rgb(R, G, B) and rgba(R, G, B, alpha) notation alongside hex codes. Both #3B82F6 and rgb(59, 130, 246) produce identical rendering. Use hex when you want concise notation; use rgb() when you need clarity about individual channel values or when dynamically constructing colors with JavaScript template literals.

Why do some hex codes appear to have repeated characters like #AABBCC?▼

Hex codes with repeated digit pairs can be shortened to 3-character codes in CSS: #AABBCC = #ABC. This shorthand only applies when both digits in each channel pair are identical. Colors like #3B82F6 cannot be shortened because no channel has equal digits. Whether to use the shorthand is stylistic preference — both forms are valid CSS.

Related Tools

Explore other tools in this category.

HEX to RGB Converter

Convert hexadecimal web color codes to RGB system values instantly.

Color Picker

Select dynamic colors and extract both HEX and RGB strings simultaneously.

CSS Gradient Generator

Create beautiful linear and radial CSS gradients with a live visual editor and instant code output.

Glassmorphism Generator

Generate the popular frosted glass CSS effect with blur, transparency, and border controls.

Color Palette Generator

Generate harmonious color palettes from any base color using color theory rules.