Hex to RGB Converter

Hex to RGB Color Converter: The Complete Guide to Color Codes, Color Models, and Web Color Systems

Color is fundamental to every visual medium — websites, mobile apps, digital art, print design, video production, and data visualization all depend on precise, reproducible color specification. In the digital world, colors are defined by mathematical models that describe how to produce a specific color on display hardware. The two most common color representations you'll encounter in web and UI development are hexadecimal color codes (hex) and RGB (Red, Green, Blue) values. A hex to RGB converter translates between these two representations instantly, helping designers and developers work fluidly across tools, languages, and design systems that use different color notations.

Understanding how hex and RGB relate to each other — not just knowing the conversion formula, but understanding why these systems exist, how display hardware uses them, and how they connect to broader color science — makes you a significantly more effective designer and developer. This guide covers everything from the mathematics of color bit-depth to practical applications in CSS, design tools, and accessibility.

The RGB Color Model: How Screens Make Color

The RGB color model is an additive color model in which red, green, and blue light are added together to produce a wide range of colors. The model is derived directly from how the human eye perceives color: the human retina contains three types of cone cells, each most sensitive to wavelengths corresponding roughly to red (~700nm), green (~546nm), and blue (~435nm) light. By mixing light of these three primary colors in varying intensities, display hardware can stimulate the three cone types to produce the perception of virtually any visible color.

This is called an additive model because you add light. When all three channels are at maximum intensity, the result is white light. When all three are at zero, the result is black (no light emitted). This contrasts with the subtractive model used in printing (CMYK), where you subtract light by adding ink pigments.

RGB Channel Values and Bit Depth

In the most common 8-bit-per-channel RGB implementation, each color channel (red, green, blue) is represented by an integer from 0 to 255. This range comes from the fact that each channel is encoded in 8 binary bits: 2⁸ = 256 distinct values (0 through 255).

With three channels each having 256 possible values, the total color space contains 256 × 256 × 256 = 16,777,216 distinct colors — often called "true color" or "24-bit color" (8 bits × 3 channels = 24 bits). This is sufficient to cover the visible gamut of most consumer displays with imperceptible color banding for human vision.

Higher bit depths are used in professional photography and HDR (High Dynamic Range) content:

• 10-bit per channel: 1,024 values per channel, 1,073,741,824 total colors (1 billion)
• 12-bit per channel: 4,096 values per channel, 68,719,476,736 total colors
• 16-bit per channel: 65,536 values per channel (used in RAW photography and HDR video)
• 32-bit per channel floating point: Used in CGI rendering and compositing for values outside the 0–1 range (HDR)

For web development and standard UI design, 8-bit per channel (RGB 0–255) is universal. Hex color codes encode this same 8-bit-per-channel space.

RGB Notation Formats

RGB values in CSS can be written in several formats:

• rgb(255, 0, 0) — classic comma-separated integer notation
• rgb(255 0 0) — modern space-separated notation (CSS Color Level 4)
• rgb(100%, 0%, 0%) — percentage-based values
• rgba(255, 0, 0, 0.5) — with alpha transparency (0 = transparent, 1 = opaque)
• rgb(255 0 0 / 50%) — modern notation with slash-separated alpha

Hexadecimal Color Codes: How Hex Represents RGB

A hexadecimal (hex) color code encodes the same three 8-bit RGB channels in a compact six-character string preceded by a hash symbol (#). Hexadecimal (base-16) numbering uses digits 0–9 and letters A–F to represent values 0–15, allowing a two-character hex number to represent values from 00 (decimal 0) to FF (decimal 255).

The six-character hex code is structured as: #RRGGBB where:

• RR — two hex digits for the red channel (00–FF)
• GG — two hex digits for the green channel (00–FF)
• BB — two hex digits for the blue channel (00–FF)

Example: #FF5733

• FF = 255 (red at maximum)
• 57 = 87 (green at 87/255 ≈ 34%)
• 33 = 51 (blue at 51/255 = 20%)
• Result: rgb(255, 87, 51) — a warm orange-red

The Conversion Formula: Hex to RGB

Converting each two-digit hex pair to decimal is straightforward positional arithmetic:

Decimal value = (first hex digit × 16) + second hex digit

For each hex digit, the mapping is: 0→0, 1→1, ..., 9→9, A→10, B→11, C→12, D→13, E→14, F→15.

Example — convert #3B82F6:

• R: 3B → (3 × 16) + 11 = 48 + 11 = 59
• G: 82 → (8 × 16) + 2 = 128 + 2 = 130
• B: F6 → (15 × 16) + 6 = 240 + 6 = 246
• Result: rgb(59, 130, 246) — Tailwind CSS blue-500

The Conversion Formula: RGB to Hex

Converting each decimal RGB value to two hex digits is the reverse:

Hex pair = Math.floor(value / 16) as hex + (value % 16) as hex

Example — convert rgb(34, 197, 94) (Tailwind green-500):

• R: 34 → 34 ÷ 16 = 2 remainder 2 → "22"
• G: 197 → 197 ÷ 16 = 12 remainder 5 → "C5"
• B: 94 → 94 ÷ 16 = 5 remainder 14 → "5E"
• Result: #22C55E

Shorthand Hex (#RGB)

When both digits in each pair are identical — #RRGGBB where RR = "XX", GG = "YY", BB = "ZZ" — the hex code can be shortened to three characters (#XYZ). The browser expands each single digit by doubling it: #F0A expands to #FF00AA. Examples:

• #FFF → #FFFFFF (white)
• #000 → #000000 (black)
• #F00 → #FF0000 (pure red)
• #0F0 → #00FF00 (pure green)
• #00F → #0000FF (pure blue)
• #39F → #3399FF (a medium blue)

Not all hex colors have valid shorthand forms — only those where both digits of each pair match. #FF5733 (our orange-red from above) cannot be shortened because 5 ≠ 7 in the blue pair.

8-Character Hex with Alpha (#RRGGBBAA)

The 8-character hex format adds a two-digit alpha channel after the blue channel. Alpha ranges from 00 (fully transparent) to FF (fully opaque). Examples:

• #FF000080 — red at 50% opacity (80 hex = 128 decimal = 50.2%)
• #00000000 — fully transparent black
• #FFFFFFFF — fully opaque white
• #0000FFCC — blue at ~80% opacity (CC hex = 204 decimal = 80%)

CSS supports 8-character hex: color: #FF000080; is equivalent to color: rgba(255, 0, 0, 0.502);. Browser support is excellent for modern browsers (all major browsers since 2016–2017).

Color Systems Beyond RGB and Hex

While hex and RGB are the most common formats in web development, understanding related color systems helps you choose the right format for each context.

HSL (Hue, Saturation, Lightness)

HSL is a cylindrical representation of the RGB color space that is more intuitive for humans to reason about. Instead of specifying red, green, and blue amounts, you specify:

• Hue (H): Position on the color wheel, 0°–360° (0° = red, 120° = green, 240° = blue)
• Saturation (S): Color intensity, 0% (gray) to 100% (fully saturated color)
• Lightness (L): Brightness, 0% (black) to 100% (white), with 50% = pure color

HSL makes it much easier to create color variations. To make a color lighter, increase L. To desaturate it, decrease S. To rotate to a complementary color, add 180° to H. These operations are arithmetically simple in HSL but complex in RGB.

CSS syntax: hsl(220, 90%, 60%) or hsl(220deg 90% 60%). With alpha: hsl(220 90% 60% / 80%).

HSB/HSV (Hue, Saturation, Brightness/Value)

HSB (also called HSV) is similar to HSL but uses "Value" (brightness) instead of "Lightness". The key difference: in HSL, full saturation at 50% lightness gives the purest color; in HSV, full saturation at 100% value gives the purest color. HSV/HSB is used by Photoshop's color picker and many professional design tools. Pure colors have S=100%, V=100% in HSV but S=100%, L=50% in HSL.

OKLCH and LCH (Perceptually Uniform)

OKLCH and LCH are modern CSS color spaces (CSS Color Level 4) that are perceptually uniform — equal numerical steps in the color space correspond to equal perceived differences in color. RGB and HSL are not perceptually uniform: changing blue by 10 units looks very different from changing yellow by 10 units. OKLCH fixes this, enabling smooth, visually consistent color palettes and gradients. Syntax: oklch(70% 0.15 220). Browser support is now excellent (Chrome 111+, Safari 15.4+, Firefox 113+).

CMYK (Cyan, Magenta, Yellow, Key/Black)

CMYK is the subtractive color model used in print. Unlike RGB which adds light, CMYK works by absorbing (subtracting) specific wavelengths using ink pigments. CMYK values cannot be directly represented in CSS for screen display — they're for print production workflows. Converting RGB to CMYK for print requires color profile management and is handled by design tools like Adobe Illustrator.

Color Spaces: sRGB, Display P3, Rec. 2020

A color gamut defines the range of colors a system can reproduce. Standard web hex/RGB values use the sRGB color space, which covers about 35% of visible colors. Modern displays increasingly support wider gamuts:

• Display P3: Covers about 53% of visible colors (Apple devices use this, CSS supports it with color(display-p3 r g b))
• Rec. 2020: Covers about 75% of visible colors (used in HDR video, CSS support emerging)
• ProPhoto RGB: Covers ~91% of visible colors (used in professional photo editing)

For most web use, sRGB hex codes are correct. For apps targeting Apple devices with ProMotion displays and wanting to use the full P3 gamut, CSS Color Level 4 offers color(display-p3 1 0 0) for a more saturated red than sRGB's #FF0000.

Common Color Reference: Hex and RGB Values

Understanding the hex/RGB values of common reference colors helps you navigate color spaces intuitively:

• Pure red: #FF0000 = rgb(255, 0, 0)
• Pure green: #00FF00 = rgb(0, 255, 0)
• Pure blue: #0000FF = rgb(0, 0, 255)
• White: #FFFFFF = rgb(255, 255, 255)
• Black: #000000 = rgb(0, 0, 0)
• Gray 50%: #808080 = rgb(128, 128, 128)
• Yellow: #FFFF00 = rgb(255, 255, 0)
• Cyan: #00FFFF = rgb(0, 255, 255)
• Magenta: #FF00FF = rgb(255, 0, 255)
• Orange: #FF8000 = rgb(255, 128, 0)
• Tailwind blue-500: #3B82F6 = rgb(59, 130, 246)
• Tailwind red-500: #EF4444 = rgb(239, 68, 68)
• Tailwind green-500: #22C55E = rgb(34, 197, 94)

Color Contrast and Accessibility (WCAG)

One of the most critical applications of hex/RGB color knowledge is accessibility — specifically, ensuring sufficient color contrast between text and background for users with low vision or color blindness.

WCAG Contrast Ratio

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios based on relative luminance, a perceptually weighted measure of color brightness:

• WCAG AA: Minimum 4.5:1 for normal text, 3:1 for large text (18pt+) and UI components
• WCAG AAA: Minimum 7:1 for normal text, 4.5:1 for large text

Relative luminance is calculated from linear RGB values (gamma-corrected):

For each channel C (R, G, or B) with value c = channel/255:

• If c ≤ 0.04045: linear = c / 12.92
• Else: linear = ((c + 0.055) / 1.055) ^ 2.4
• Luminance L = 0.2126 × linearR + 0.7152 × linearG + 0.0722 × linearB

Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the larger luminance.

This formula reveals why text contrast cannot be evaluated by eye alone — the perception of contrast depends on the specific colors involved, not just their apparent brightness difference. A yellow-on-white combination that looks distinct to some viewers might fail WCAG at a ratio below 4.5:1.

Color Blindness Considerations

Approximately 8% of men and 0.5% of women have some form of color blindness. The most common types:

• Deuteranopia/deuteranomaly: Reduced sensitivity to green (~6% of males)
• Protanopia/protanomaly: Reduced sensitivity to red (~2% of males)
• Tritanopia/tritanomaly: Reduced sensitivity to blue (rare, ~0.003%)
• Achromatopsia: No color vision at all (very rare)

Color blindness simulators (like the devTools accessibility features, or Figma plugins) show how your colors appear to users with different types of color blindness. The key principle: never use color as the only means of conveying information. Always supplement with icons, labels, or patterns.

Using Hex and RGB in CSS

CSS Color Properties

Any CSS property that accepts a color value accepts hex, rgb(), rgba(), hsl(), and other color formats interchangeably:

/* All equivalent — Tailwind blue-500 */
.element {
  color: #3B82F6;
  color: rgb(59, 130, 246);
  color: rgb(59 130 246);          /* CSS Color 4 */
  color: hsl(217, 91%, 60%);
}

/* With transparency */
.overlay {
  background: #3B82F680;           /* 50% opacity */
  background: rgba(59, 130, 246, 0.5);
  background: rgb(59 130 246 / 50%);
}

CSS Custom Properties (Variables) for Design Systems

:root {
  --color-primary: #3B82F6;
  --color-primary-rgb: 59, 130, 246;  /* For rgba() use */
  --color-secondary: #22C55E;
}

.btn-primary {
  background: var(--color-primary);
  border: 2px solid rgba(var(--color-primary-rgb), 0.3);
}

CSS currentColor

The currentColor keyword inherits the element's color value. Useful for SVG fills and strokes, borders, and box shadows that should automatically match text color:

.icon {
  fill: currentColor;   /* SVG inherits text color */
}
.card {
  border: 1px solid currentColor;
  box-shadow: 0 0 8px currentColor;
}

Hex and RGB in Design Tools

Figma

Figma displays colors in hex by default in its color picker. The properties panel shows the hex value and allows switching to RGB, HSL, HSB, or CSS formats. Figma also supports OKLCH and Display P3 colors for wide-gamut design. When copying colors from Figma's code panel for CSS, it exports hex by default. For opacity-aware colors, Figma exports the opacity as a separate property: color: #3B82F6; opacity: 0.5; or background: rgba(59, 130, 246, 0.5);.

Adobe XD and Photoshop

Adobe tools use hex and RGB prominently in their color pickers. Photoshop's color picker shows hex, HSB, HSL, LAB, and CMYK values simultaneously, making it easy to see the same color in multiple representations. When exporting for web, Photoshop and XD output hex codes. Photoshop's "Copy Color as HTML" feature copies the hex code directly to clipboard.

Sketch

Sketch uses hex codes in its inspector for solid colors and shows RGBA breakdown in its color picker. When you use design tokens or shared library colors in Sketch, the hex values are stored in the library's token definitions.

Canva

Canva's color picker accepts hex codes in the # field. Users can type any hex code directly to apply it. For brand kit colors, Canva stores them by hex value. Canva for Teams supports uploading a brand color palette with hex codes.

Hex and RGB in Programming Languages

JavaScript / TypeScript

// Hex to RGB
function hexToRgb(hex) {
  const cleaned = hex.replace('#', '');
  const r = parseInt(cleaned.substring(0, 2), 16);
  const g = parseInt(cleaned.substring(2, 4), 16);
  const b = parseInt(cleaned.substring(4, 6), 16);
  return { r, g, b };
}

// RGB to Hex
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('');
}

// With alpha
function hexToRgba(hex) {
  const cleaned = hex.replace('#', '');
  const r = parseInt(cleaned.substring(0, 2), 16);
  const g = parseInt(cleaned.substring(2, 4), 16);
  const b = parseInt(cleaned.substring(4, 6), 16);
  const a = cleaned.length === 8
    ? parseInt(cleaned.substring(6, 8), 16) / 255
    : 1;
  return { r, g, b, a };
}

Python

def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

def rgb_to_hex(r, g, b):
    return '#{:02X}{:02X}{:02X}'.format(r, g, b)

# Using colorsys for HSL conversion
import colorsys
r, g, b = hex_to_rgb('#3B82F6')
h, l, s = colorsys.rgb_to_hls(r/255, g/255, b/255)
print(f"H:{h*360:.0f} S:{s*100:.0f}% L:{l*100:.0f}%")

CSS Preprocessors (Sass/SCSS)

// Sass color functions
$primary: #3B82F6;
$light: lighten($primary, 20%);   // Lighten by 20%
$dark: darken($primary, 20%);     // Darken by 20%
$muted: desaturate($primary, 50%); // Reduce saturation
$complement: adjust-hue($primary, 180deg); // Complementary color

// Get RGB components
$red: red($primary);    // → 59
$green: green($primary); // → 130
$blue: blue($primary);  // → 246

Design Tokens and Color Systems

Modern design systems use design tokens — named, semantic references to color values — instead of raw hex codes scattered throughout code. This approach enables theming, dark mode, and brand updates without find-and-replace across the codebase.

Tailwind CSS Color System

Tailwind defines a complete color palette with shades from 50 (lightest) to 950 (darkest) for each hue. Each shade maps to a specific hex value. For example, the "blue" palette:

• blue-50: #EFF6FF = rgb(239, 246, 255)
• blue-100: #DBEAFE = rgb(219, 234, 254)
• blue-200: #BFDBFE = rgb(191, 219, 254)
• blue-400: #60A5FA = rgb(96, 165, 250)
• blue-500: #3B82F6 = rgb(59, 130, 246)
• blue-600: #2563EB = rgb(37, 99, 235)
• blue-900: #1E3A8A = rgb(30, 58, 138)

CSS Custom Properties for Theming

The modern approach to dark mode and theming uses CSS custom properties (variables) that update based on @media (prefers-color-scheme: dark) or a [data-theme="dark"] attribute:

:root {
  --bg: #FFFFFF;
  --text: #111827;
  --primary: #3B82F6;
}
[data-theme="dark"] {
  --bg: #111827;
  --text: #F9FAFB;
  --primary: #60A5FA;  /* Lighter shade for dark bg */
}

Color Harmony and Palette Generation

Once you understand hex and RGB, you can programmatically generate harmonious color palettes. Color harmony rules operate in HSL space:

• Complementary: Add 180° to the hue. Red (#FF0000) → Cyan (#00FFFF)
• Analogous: Colors ±30° from the base hue
• Triadic: Three colors at 120° intervals
• Split-complementary: Base + two colors ±150° from complementary
• Tetradic: Four colors at 90° intervals
• Monochromatic: Same hue, varying S and L

Generating tints (lighter versions) and shades (darker versions) of a base color: in HSL, increase L for tints and decrease L for shades while keeping H and S constant. In RGB, multiply each channel by a factor > 1 for tints (clamped at 255) and by a factor < 1 for shades.

Named CSS Colors

CSS defines 148 named colors from the X11 color system. These range from the obvious (red, blue, green) to the surprising (rebeccapurple, papayawhip, cornflowerblue). Each named color maps to a specific hex value:

• red = #FF0000
• blue = #0000FF
• green = #008000 (not #00FF00, which is "lime")
• white = #FFFFFF
• black = #000000
• gray/grey = #808080
• rebeccapurple = #663399 (added in CSS4 to honor Rebecca Meyer)
• cornflowerblue = #6495ED
• goldenrod = #DAA520
• tomato = #FF6347

Performance and Color in Web Development

Color choice affects performance in subtle ways. Transparent (alpha < 1) colors require compositing, which can trigger GPU layers and affect rendering performance on complex pages. Using opacity-0 / opacity-1 for show/hide animations is more performant than rgba() alpha transitions in some cases, as the browser can handle opacity changes without re-compositing child elements.

CSS mix-blend-mode and backdrop-filter properties use color in computation-intensive ways that can impact performance on mobile devices. Understanding the RGB values involved helps you anticipate rendering complexity.