RGB to HEX Color Converter

RGB and HEX Color Systems Explained

RGB (Red, Green, Blue) and HEX (hexadecimal) are two ways to represent the exact same colors — they just use different notation systems. Both describe colors by mixing three primary light colors (red, green, blue) at different intensities. Understanding both systems is essential for web design, CSS, graphic design, photography editing, and digital art.

In the RGB model, each of the three channels (red, green, blue) has an intensity value from 0 to 255. Zero means none of that color; 255 means maximum intensity. Mixing all three at 255 gives white (rgb(255,255,255)). All three at 0 gives black (rgb(0,0,0)). With 256 possible values per channel and 3 channels, RGB can represent 256³ = 16,777,216 distinct colors (about 16.7 million).

In the HEX model, the same three channels are each expressed as a 2-digit hexadecimal number (00 to FF), prefixed with #. Hexadecimal uses digits 0–9 and letters A–F, where A=10, B=11, C=12, D=13, E=14, F=15. FF in hex = 15×16 + 15 = 255 in decimal. So #FFFFFF = rgb(255,255,255) = white. The conversion is purely a base change: decimal (base 10) to hexadecimal (base 16).

How to Convert RGB to HEX: Step-by-Step

Converting each RGB channel to hex requires dividing by 16 and expressing the quotient and remainder as hex digits:

1. Take the channel value (0–255)
2. Divide by 16: quotient = first hex digit, remainder = second hex digit
3. Convert both to hex if they're 10–15 (A–F)
4. Combine: first digit + second digit = 2-character hex value
5. Repeat for G and B channels
6. Concatenate: # + R_hex + G_hex + B_hex

Example: Convert rgb(255, 99, 71) to hex (Tomato red).

• R=255: 255÷16=15 remainder 15 → F + F → FF
• G=99: 99÷16=6 remainder 3 → 6 + 3 → 63
• B=71: 71÷16=4 remainder 7 → 4 + 7 → 47
• Result: #FF6347

Common Web Colors: RGB and HEX Reference

Here is a comprehensive reference table for the most commonly used web colors:

Using RGB and HEX in CSS and Web Design

CSS accepts multiple color formats. HEX and RGB are the most common, but modern CSS also supports HSL, named colors, and the newer oklch and oklch color spaces for wider gamut displays.

In CSS, colors can be specified as:

• color: #FF6347; (HEX)
• color: rgb(255, 99, 71); (RGB)
• color: rgba(255, 99, 71, 0.5); (RGB + alpha transparency, 0=transparent, 1=opaque)
• color: hsl(9, 100%, 64%); (Hue, Saturation, Lightness)
• color: tomato; (CSS named color)

HEX codes can also be written in 3-character shorthand when each pair is a repeated digit: #FF0000 = #F00, #FFFFFF = #FFF, #336699 cannot be shortened. The shorthand halves typing time and is supported in all browsers.

For design consistency, modern design systems (Material Design, Tailwind CSS, Bootstrap) use predefined color palettes expressed as HEX codes. Tailwind CSS, for example, provides 22 color families each with 10 shades (gray-100 through gray-900), all specified as HEX codes in the configuration file.

RGBA and Alpha Transparency

RGBA adds a fourth channel to RGB: alpha, which controls transparency. Alpha values range from 0 (fully transparent, invisible) to 1 (fully opaque, no transparency). Fractional values create semi-transparent colors.

Examples: rgba(0, 0, 0, 0.5) is semi-transparent black (like a translucent overlay). rgba(255, 255, 255, 0.8) is an 80% opaque white. This is widely used for overlay effects, frosted-glass UI elements, and hover state highlighting.

In modern CSS, there's also HEX with alpha: 8-character hex codes where the last 2 characters specify alpha. #FF6347CC would be Tomato with 80% opacity (CC in hex = 204 in decimal; 204/255 ≈ 0.8). This format was introduced in the CSS Color Level 4 specification and is supported in all modern browsers.

The equivalent in RGBA is simpler for humans: rgba(255, 99, 71, 0.8) vs #FF6347CC. Which format you use depends on personal preference and tooling — design tools like Figma typically display and export in HEX, while CSS preprocessors (Sass, Less) often use RGBA for its readability.

Color Theory Basics for Designers

Understanding the RGB color model goes hand-in-hand with understanding color theory. RGB is an additive color model — colors are created by adding light. Mixing R+G+B at full intensity = white (all light). This is the opposite of subtractive color (pigment/print), where mixing all colors = black.

Complementary colors in RGB sit opposite each other on the color wheel. Red (FF0000) and Cyan (00FFFF) are complementary — note that Cyan's RGB is the bitwise inverse of Red (0,255,255 vs 255,0,0). Similarly, Blue and Yellow, Green and Magenta. Complementary pairs create maximum contrast and visual vibration when placed side by side.

Color harmony guides the selection of colors that work well together: analogous (adjacent on the wheel), triadic (three equally-spaced colors), split-complementary, and tetradic (four colors forming a rectangle). These relationships help designers create palettes that feel intentional and visually balanced.

Accessibility and contrast: The WCAG (Web Content Accessibility Guidelines) require a minimum contrast ratio between text and background: 4.5:1 for normal text, 3:1 for large text. The contrast ratio is calculated from the relative luminance of the RGB values. Many online tools check WCAG compliance — this matters significantly for users with low vision or color blindness.

Color Spaces Beyond RGB: HSL, HSB, CMYK

RGB is not always the most intuitive system for choosing colors. Alternative color spaces can be more practical for different use cases:

HSL is particularly designer-friendly: hue selects the color (0°=red, 120°=green, 240°=blue), saturation controls how vivid it is (0% is gray, 100% is pure color), and lightness controls brightness (0% is black, 50% is the pure color, 100% is white). Adjusting only the lightness while keeping hue and saturation constant creates a coherent color scale — very useful for creating hover states, disabled states, and tints/shades of a brand color.

Color Accessibility and Contrast Ratios

Web accessibility guidelines (WCAG 2.1) specify minimum contrast ratios between text and background colors to ensure readability for users with low vision or color blindness. Approximately 8% of males have some form of color vision deficiency (color blindness), making accessible color choices an ethical and legal requirement for professional web design.

The contrast ratio between two colors is calculated from their relative luminance: contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Relative luminance is derived from the RGB values via a gamma-correction formula: for each channel value v = V/255, if v ≤ 0.03928 then linear = v/12.92, else linear = ((v+0.055)/1.055)^2.4. Then L = 0.2126×R + 0.7152×G + 0.0722×B.

Minimum contrast requirements: AA level requires 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text. AAA level requires 7:1 for normal text and 4.5:1 for large text. The most common failures are light gray text on white backgrounds (#999999 on white has only a 2.85:1 ratio, failing AA) and dark text on dark backgrounds.

Building a Color Palette: From HEX to Design System

A professional color palette typically includes a primary brand color, secondary accent colors, neutral grays, and semantic colors (success green, warning amber, error red, info blue). Each base color requires multiple shades for different UI states.

Starting from a brand color like #3B82F6 (Tailwind's blue-500), you can derive a 10-shade scale by adjusting lightness in HSL space: blue-50 (#EFF6FF, very light), blue-100 (#DBEAFE), through to blue-900 (#1E3A5F, very dark). Design tokens then map these shades to semantic uses: primary-button-bg = blue-600, primary-button-hover = blue-700, primary-button-text = white, etc.

When building a brand color system, consider: 60-30-10 rule — 60% dominant color (usually a neutral), 30% secondary color, 10% accent. Ensure all text combinations pass WCAG AA contrast. Test colors under different lighting conditions and device screens. Account for dark mode (which may need different shade values to maintain contrast). A well-designed color system in code is 8–15 HEX values that cover all use cases consistently.

Color Psychology in Design and Marketing

Colors evoke psychological and emotional responses, making color selection a strategic decision in branding and UI design. Color psychology research (while sometimes overstated in popular culture) provides useful general guidelines for designing effective visual experiences.

Red (#FF0000 range): Energy, urgency, passion, danger. Used for sales ("Sale!" signs are typically red), emergency alerts, stop signals, and food brands (Coca-Cola, McDonald's, KFC — red stimulates appetite and creates urgency). High-contrast red is excellent for calls-to-action when you want immediate user action.

Blue (#0000FF range): Trust, professionalism, stability, calm. The dominant color in finance and technology branding (Facebook, Twitter/X, LinkedIn, PayPal, IBM, Samsung). Studies show blue is the globally preferred color across cultures. Light blue conveys openness and friendliness; dark navy conveys authority and expertise.

Green (#00FF00 range): Nature, health, growth, success (money in the US). Used heavily in health/wellness brands, financial apps (positive returns shown in green), environmental organizations, and "go" signals. Mid-tones like #28A745 (Bootstrap success green) signal positive states in UI without being aggressive.

Yellow/Orange range: Optimism, energy, creativity, warning. Yellow is highly visible (construction signs, taxi cabs) but difficult to read as text on white. Orange (#FFA500 range) is frequently used for calls-to-action — it's visible and energetic without the urgency/danger connotation of red.

Working with Colors in Popular Design Tools

Every major design tool has its own color workflow. Understanding how to work with HEX and RGB efficiently in your tool saves significant time in professional design work.

Figma: Click any filled element → Properties panel shows fill color → Click the color swatch to open the picker. You can type HEX values directly or switch to RGB, HSL, or HSB modes. Figma also supports opacity via the separate opacity field and RGBA notation. Copy/paste HEX codes between Figma and CSS with no conversion needed.

Adobe Photoshop: Open Color Picker (foreground/background color squares). The bottom of the picker shows the HEX code in a text field. Right-click color swatches to add to your palette. The eyedropper tool samples any color on screen — hover to see its HEX code in the info panel.

Browser DevTools: Inspect any element → Styles panel shows CSS color values → Click the color swatch next to any color property to open an inline picker. DevTools can display colors as HEX, RGB, HSL, or named — click the color preview to cycle through formats. This is invaluable for reverse-engineering design decisions from existing websites.

VS Code: Color decorators (colored squares) appear next to HEX and RGB values in CSS files. Hovering shows a picker. The colorize extension adds color previews for all color formats. Emmet abbreviations like c:f expand to color: #fff; for common colors.

Using This RGB to HEX Converter

Enter the red, green, and blue channel values (each between 0 and 255). The converter displays the HEX color code ready to paste into CSS, HTML, or any design tool. Values outside 0–255 are clamped automatically. The converter also shows the inverse operation: enter a HEX code to retrieve the RGB breakdown. Use this tool when a design tool gives you an RGB value but your CSS stylesheet uses HEX format, or when copying colors between different applications that use different formats. The HEX code output includes the leading # symbol for direct paste into CSS color properties. All 16.7 million RGB color combinations map to a unique 6-character HEX code with no ambiguity or rounding.