Hex to RGB Converter

Hex to RGB Converter

Convert between hex color codes (#3498DB) and RGB values (52, 152, 219) — the two most common color formats in web design and development. They represent the same 16.7 million possible colors in different notations. This converter shows both formats plus a live color preview, making it easy to grab CSS-ready values.¹

Common Colors

CSS Color Formats

How Hex Color Codes Work

A hex color code is a six-character string that defines a color using three pairs of hexadecimal digits — each pair representing one channel: red, green, and blue. Hexadecimal is base-16 numbering, using digits 0–9 and letters A–F (where A=10, B=11, ... F=15). Each pair ranges from 00 (0 intensity, no contribution from that channel) to FF (255 intensity, maximum contribution). The color #3498DB breaks down as Red=34 (52 in decimal), Green=98 (152), Blue=DB (219) — a medium sky blue. The hex format is compact, universally supported in CSS, HTML, and design software, and has been the default web color notation since the earliest HTML specifications.

RGB Color Model Explained

RGB (Red, Green, Blue) is an additive color model where colors are created by combining red, green, and blue light at varying intensities. Each channel accepts values from 0 to 255, producing 256 × 256 × 256 = 16,777,216 possible colors (often called "true color" or 24-bit color). Additive mixing means that combining all three channels at full intensity produces white (255, 255, 255), while all channels at zero produces black (0, 0, 0). Equal values across all channels produce shades of gray — rgb(128, 128, 128) is medium gray. This differs fundamentally from subtractive color mixing (CMYK) used in printing, where combining all colors produces near-black and the absence of ink produces white paper.

Color Format Comparison for Web Development

Converting Between Color Formats

Converting hex to RGB requires splitting the hex string into three pairs and converting each from base-16 to base-10. For example, #E74C3C splits into E7, 4C, 3C. Converting E7: (14×16)+7 = 231. Converting 4C: (4×16)+12 = 76. Converting 3C: (3×16)+12 = 60. Result: rgb(231, 76, 60) — a vibrant red. The reverse process converts each decimal value to its two-digit hex equivalent. In JavaScript, this is a one-liner: parseInt(hex.substring(1), 16) extracts the full number, then bitwise operations separate the channels. CSS accepts both formats interchangeably — #E74C3C and rgb(231, 76, 60) render identically in every browser.

Shorthand Hex Notation

CSS supports three-digit hex shorthand where each digit is doubled: #3AF expands to #33AAFF, and #FFF expands to #FFFFFF (white). This works only when each pair consists of two identical digits — #3498DB cannot be shortened because no pair repeats (34 ≠ 33, 98 ≠ 99, DB ≠ DD). Modern CSS also supports four-digit (#RGBA) and eight-digit (#RRGGBBAA) hex with alpha transparency: #3498DB80 represents the same sky blue at 50% opacity (80 hex = 128 decimal = ~50% of 255). While browser support for 8-digit hex is now universal in modern browsers, rgba() notation remains more readable for most developers and is preferred in codebases that prioritize clarity.

Color Accessibility and Contrast

Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). Contrast ratio is calculated from the relative luminance of foreground and background colors — which depends on the RGB values. Common failures include light gray text on white backgrounds, yellow text on white, and low-saturation colored text on similarly-valued backgrounds. For example, #777777 on #FFFFFF produces a contrast ratio of only 4.48:1 — barely passing for normal text and likely failing in practice due to anti-aliasing and screen variations. Designers should test color combinations using contrast checkers that compute the WCAG ratio from the hex or RGB values directly.

Using Colors in CSS

Modern CSS provides multiple ways to specify colors, and each format has practical advantages. Hex codes are the most compact and are the default output of most design tools like Figma and Photoshop. RGB functions are useful when you need to calculate color values programmatically in JavaScript — manipulating individual channels is simpler in decimal than hexadecimal. HSL (Hue, Saturation, Lightness) is the most intuitive format for creating color systems: to generate a lighter or darker shade of any color, simply adjust the lightness value while keeping hue and saturation constant. This makes HSL ideal for design tokens and theme variables where you need consistent color families. CSS custom properties combined with HSL allow powerful theming: set --brand-hue: 204 once, then generate every shade, tint, and transparent variation from that single value.

Color Spaces Beyond sRGB

Standard hex and RGB values operate in the sRGB color space, which represents only about 35% of the colors visible to the human eye. Modern CSS introduces the color() function with support for Display P3 (used by Apple devices) and other wide-gamut color spaces. Display P3 covers approximately 25% more colors than sRGB, enabling more vivid greens, reds, and cyans on compatible displays. To use P3 colors in CSS, the syntax is color(display-p3 0.2 0.6 0.86) instead of hex values. For backward compatibility, always provide an sRGB fallback: declare the sRGB color first, then the P3 version, so browsers that support P3 will use the wider gamut while older browsers fall back gracefully.

How to Use This Converter

1. Enter a hex code — Type or paste a 3-digit or 6-digit hex color with or without the # prefix.
2. Or enter RGB values — Input red, green, and blue values from 0 to 255.
3. Copy your result — The converter shows the equivalent value in the other format with a live color preview, ready to paste into your CSS or design tool.

Tips and Best Practices

See also: Paint Color Mixer · Pixel Converter · Binary Calculator · Unit Converter

Popular Color Palettes and Their Hex Values

Color in Design Systems and Branding

Professional design systems define colors using multiple formats simultaneously. A brand color might be specified as hex (#1E40AF) for web CSS, RGB (30, 64, 175) for screen design tools, CMYK (83%, 63%, 0%, 31%) for print materials, and Pantone (PMS 2146 C) for spot-color printing on merchandise. Maintaining consistency across these formats requires understanding how each color model represents and limits the gamut — CMYK cannot reproduce the most vivid blues and greens that RGB displays show, which is why printed materials sometimes look duller than their screen counterparts. When building a design system, store the definitive color as hex or HSL and derive all other format values from a single source of truth, documenting the closest achievable match for each output medium.

Programmatic Color Manipulation

Working with colors in JavaScript often requires converting between formats for operations like darken, lighten, blend, or generate complementary colors. To darken a hex color by 20%, convert to RGB, multiply each channel by 0.8, clamp to 0–255, then convert back to hex. To create a transparent overlay, convert hex to rgba with an alpha channel. To generate a complementary color, convert to HSL, rotate the hue by 180 degrees, then convert back. Libraries like chroma.js and color.js automate these transformations, but understanding the underlying math ensures you can implement lightweight solutions without adding dependencies. For most web projects, a handful of utility functions that convert between hex, RGB, and HSL cover all common needs.

These techniques form the backbone of dynamic theming, dark mode toggles, and accessible color adjustment in modern web applications.

Whether you are translating a design mockup into CSS, building a theme switcher, or debugging a visual rendering issue, fast and accurate color format conversion is a core skill for every web developer and designer.

How to Use This Calculator

1. Enter hex or RGB — Either format works.
2. See conversion — Both formats displayed.
3. Preview color — Live color swatch updates.

Tips and Best Practices

See also: Percentage · Scientific · Random Number · Password Generator