HEX to RGB Color Converter

What Is a HEX Color Code?

A HEX color code is a six-character alphanumeric string used in web design and digital graphics to represent a specific color. The format follows the pattern #RRGGBB, where each two-character pair encodes the intensity of one of the three additive primary colors — red (RR), green (GG), and blue (BB) — using hexadecimal notation (base 16). Each pair ranges from 00 (zero intensity) to FF (maximum intensity, equivalent to 255 in decimal).

HEX codes originated from the need to define colors in HTML and CSS without relying on named color keywords. While CSS now supports multiple color formats including rgb(), hsl(), and oklch(), HEX remains the most widely used notation in front-end development, design handoffs, and branding guidelines. Virtually every color picker in tools like Figma, Sketch, Adobe Photoshop, and Canva displays a HEX value by default.

The total number of unique colors representable with six-digit HEX codes is 16,777,216 (256 × 256 × 256). This is often referred to as "True Color" or "24-bit color," which matches the color depth of most modern displays. Each channel gets 8 bits (one byte), and three channels together produce 24 bits of color data.

HEX codes are case-insensitive, so #ff8000 and #FF8000 refer to the same color. Some style guides prefer uppercase for readability, while CSS minifiers often output lowercase to save bytes — though in practice the difference is negligible.

How to Convert HEX to RGB Step by Step

Converting a HEX color code to its RGB equivalent is straightforward. The process involves splitting the six-character string into three pairs and converting each pair from hexadecimal (base 16) to decimal (base 10). Here is the step-by-step method:

1. Remove the hash symbol. If the HEX code starts with #, strip it. For example, #1A2B3C becomes 1A2B3C.
2. Split into three pairs. Divide the remaining string into three groups of two characters: 1A, 2B, 3C.
3. Convert each pair to decimal. Use the hexadecimal place-value system where the first digit is multiplied by 16 and the second digit is added:
   • Red: 1A → (1 × 16) + 10 = 26
   • Green: 2B → (2 × 16) + 11 = 43
   • Blue: 3C → (3 × 16) + 12 = 60
4. Write the RGB value. Combine the three decimal values: rgb(26, 43, 60).

The hexadecimal digits and their decimal equivalents are: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Memorizing A through F is the only part that differs from standard decimal arithmetic.

For programmatic conversion, most languages offer built-in functions. In JavaScript, parseInt("1A", 16) returns 26. In Python, int("1A", 16) does the same. CSS itself handles both formats natively, so conversion is primarily useful when you need to manipulate individual color channels in code — for instance, adjusting brightness, creating gradients programmatically, or blending two colors.

3-Digit vs 6-Digit HEX Codes

CSS supports a shorthand 3-digit HEX format (#RGB) as a convenience when each of the three pairs consists of identical digits. In this shorthand, each single digit is expanded by doubling it. For example:

• #F80 expands to #FF8800 → rgb(255, 136, 0)
• #FFF expands to #FFFFFF → rgb(255, 255, 255)
• #000 expands to #000000 → rgb(0, 0, 0)
• #09C expands to #0099CC → rgb(0, 153, 204)
• #A3F expands to #AA33FF → rgb(170, 51, 255)

The 3-digit notation reduces the number of available colors from 16.7 million to just 4,096 (16 × 16 × 16), so it cannot represent every color. It is most commonly used for simple or well-known colors in CSS files where brevity is valued.

CSS also supports 4-digit (#RGBA) and 8-digit (#RRGGBBAA) HEX codes that include an alpha (transparency) channel. The alpha value follows the same hexadecimal logic: FF is fully opaque and 00 is fully transparent. For example, #FF880080 represents the color rgb(255, 136, 0) at 50% opacity. Our converter focuses on the standard 3- and 6-digit formats; if you enter a code with an alpha channel, it will process only the RGB portion.

HEX to RGB Reference Table

Below is a reference table of common HEX colors and their RGB equivalents. This table covers the most frequently used colors in web design, CSS named colors, and popular brand palette choices.

CSS defines 147 named colors in total, each with a corresponding HEX value. While named colors are convenient for prototyping, professional projects typically rely on HEX or RGB values for precision and consistency across browsers and design tools.

Popular Brand Colors – HEX and RGB Values

Developers and designers frequently need the exact HEX and RGB values of popular brand colors for mockups, integrations, and style guides. Below is a quick reference for some of the most commonly requested brand colors:

Brand guidelines often specify colors in multiple formats (HEX, RGB, CMYK, Pantone). When implementing brand colors in CSS, always confirm values against the official brand resource page to ensure accuracy. Colors can shift slightly between screens, so consistency in code is essential.

Color Models Compared: HEX, RGB, HSL, and CMYK

Understanding when to use each color model helps you work more efficiently across different tools and media:

HEX and RGB are mathematically identical — they represent the same color space using different notation. Converting between them is a simple base-16 to base-10 translation with no loss of precision or gamut differences. HSL, on the other hand, is a transformation of RGB into a cylindrical coordinate system that makes it easier to reason about hue, saturation, and lightness independently. CMYK is a subtractive color model used in printing and cannot represent all RGB colors (and vice versa), so conversions between RGB and CMYK are approximate.

In modern CSS (Level 4), the color() function and new color spaces like oklch() and display-p3 are gaining adoption, especially for wide-gamut displays. However, HEX and RGB remain the baseline for web compatibility and are supported by every browser in use today.

Using HEX and RGB in CSS and JavaScript

Both HEX and RGB values are valid in CSS and produce identical results. Here are practical examples of how each format is used:

CSS declarations:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

JavaScript conversion functions:

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

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

When working with the HTML Canvas API, colors must often be set as strings. Both "#FF8000" and "rgb(255, 128, 0)" work for fillStyle and strokeStyle. However, the getImageData() method returns pixel data as an array of 0–255 integers (RGBA), making RGB the natural format for pixel-level manipulation.

In CSS custom properties (variables), HEX values are commonly stored for simplicity:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

This pattern of storing raw RGB channel values as a CSS variable is a popular technique that allows you to apply opacity dynamically without converting between formats at runtime.

Accessibility and Color Contrast

Converting HEX to RGB is often the first step in calculating color contrast ratios for accessibility compliance. The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular).

The contrast ratio formula requires the relative luminance of each color, which is computed from linear RGB values. The steps are:

1. Convert HEX to RGB (0–255 per channel).
2. Normalize each channel to 0–1 by dividing by 255.
3. Apply the sRGB linearization formula: if the value is ≤ 0.04045, divide by 12.92; otherwise compute ((value + 0.055) / 1.055) ^ 2.4.
4. Calculate luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
5. Compute the contrast ratio between two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.

As you can see, the RGB values are the essential input to every accessibility contrast calculation. Tools like the WebAIM Contrast Checker, Chrome DevTools color picker, and axe accessibility scanner all perform this conversion internally.

For designers, a quick rule of thumb: dark text on a light background (or vice versa) with a luminance difference of at least 125 and a color difference of at least 500 (using the sum of absolute differences across R, G, B channels) will generally pass WCAG AA standards.