Skip to main content
Developer Tools

HEX to RGB Color Converter

New Popular

Free online HEX to RGB color converter. Enter any HEX code and instantly get RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Decimal, Android ARGB, and Win32 COLORREF. Includes a canvas color picker, WCAG 2.1 contrast checker, 6 color harmony types, 10-step shade/tint scale, 7-type color blindness simulation, image eyedropper with loupe, gradient builder, CSS filter generator, and Tailwind v3 palette matching.

  • 19 simultaneous format conversions
  • WCAG AA/AAA contrast checker
  • 6 color harmony palette types
  • Image eyedropper with magnifying loupe
HEX to RGB Converter

Also accepts: rgb() · hsl() · CSS color names · shorthand #F00

All Formats (19)
HEX —
HEX (no #) —
RGB —
RGBA —
HSL —
HSLA —
HSV / HSB —
HWB —
CMYK —
CIE Lab —
LCH —
OKLCH —
CSS Named —
Integer —
0x Notation —
Android ARGB —
Swift UIColor —
Java Color —
.NET Color —

Closest Tailwind v3

Mathematically derived color palettes. Click any swatch to load that color.

Export palette:
Complementary Opposite on the wheel (+180°)
Analogous Adjacent colors (±30°)
Triadic Evenly spaced at 120°
Split-Comp Near-opposite (+150°, +210°)
Tetradic Four colors at 90° intervals
Monochromatic Same hue, varying lightness

How to Use

  1. Enter a HEX code — type #3B82F6, or paste any format: rgb(), hsl(), or a CSS color name. The tool auto-detects all formats.
  2. Drag the canvas picker — the saturation/brightness square and hue strip let you visually explore colors without typing anything.
  3. Copy any of 19 output formats instantly — HEX, RGB, HSL, CMYK, Lab, LCH, OKLCH, Swift, Java, .NET, and more, each with its own copy button.
  4. Explore the feature tabs — generate harmonious color palettes, check WCAG accessibility, simulate 7 types of color blindness, pick colors from an uploaded image, and build gradients.

HEX to RGB Color Converter

The HEX to RGB color converter is one of the most-used tools in web development and UI design. Our free converter goes far beyond a simple number format swap — it's a complete color workspace that simultaneously outputs 19 color formats, generates accessible palettes, checks WCAG contrast, and simulates color blindness, all in real time as you type or drag.

What is a HEX Color Code?

A HEX (hexadecimal) color code is a 6-character string preceded by #, like #3B82F6. Each pair of characters represents a color channel — Red, Green, and Blue — expressed in base-16. For example, #FF0000 is pure red: R=255 (FF), G=0 (00), B=0 (00). HEX codes are the universal language of color in web browsers, CSS, design tools like Figma and Sketch, and HTML markup.

What is RGB?

RGB (Red, Green, Blue) is the additive color model used by all digital screens. Each channel ranges from 0 to 255. rgb(59, 130, 246) is the CSS equivalent of #3B82F6 — a vivid blue used in Tailwind CSS's blue-500 palette. Converting between HEX and RGB is necessary whenever you move between CSS shorthand notations, design tools, and programming languages.

19 Color Formats at Once

Beyond HEX and RGB, this tool instantly outputs: RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, Integer, 0x Notation, Android ARGB, Swift UIColor, Java AWT Color, and .NET Color.FromArgb() — every format used in CSS, Android, iOS, print, and graphics programming.

Canvas Color Picker

The built-in color picker uses the Canvas API to render a smooth saturation–brightness square and a hue strip. Drag the crosshair to any point, or drag the hue strip to cycle through the spectrum. The picker runs at 60fps using requestAnimationFrame and fully supports touch on mobile devices. This is a proper professional-grade picker, not the limited native browser <input type="color">.

Palette Generator (6 Harmony Types)

Mathematically derived color harmonies make palette creation instant. Choose from Complementary, Analogous, Triadic, Split-Complementary, Tetradic, and Monochromatic palettes. Each swatch is clickable — loading that color into the converter. Export any palette as CSS custom properties, Tailwind config, SCSS variables, or JSON.

WCAG Accessibility Checking

Every color you enter is instantly evaluated against WCAG 2.1 accessibility guidelines. The contrast checker tests your color against any text color (defaulting to white) and shows contrast ratios with pass/fail badges for AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1). Swap foreground and background with one click.

Frequently Asked Questions

How do I convert HEX to RGB?

Split the 6-digit HEX code into three pairs and convert each from base-16 to base-10. For example, #3B82F6: 3B → R=59, 82 → G=130, F6 → B=246. Our tool does this instantly and also outputs 18 other formats simultaneously.

What's the difference between 3-digit, 6-digit, and 8-digit HEX?

3-digit HEX (#F00) is shorthand: each digit is doubled (#FF0000). 6-digit is standard. 8-digit (#FF0000CC) includes an alpha/transparency channel as the last two digits. Use the alpha slider to generate 8-digit HEX8 output.

Can I paste rgb(), hsl(), or color names into the HEX input?

Yes — the HEX input and the "Paste Any" tab both accept any color format. Paste rgb(59,130,246), hsl(217,91%,60%), cornflowerblue, or even comma-separated values like 59, 130, 246 and the tool auto-converts.

What is WCAG contrast and why does it matter?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with low vision. AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA requires 7:1 and 4.5:1. Meeting these standards is required for ADA compliance and good UX practice.

What is OKLCH and why should I use it?

OKLCH is a modern perceptually uniform color space supported natively in CSS Color Level 4. Unlike HSL, equal numerical changes in OKLCH correspond to equal perceived color changes — making it ideal for generating accessible, consistent color scales. Use the OKLCH output when working with modern CSS.

How does the color blindness simulation work?

We apply 3×3 linear transformation matrices to your RGB values — separate matrices for each type of color vision deficiency — based on peer-reviewed research by Viénot, Brettel, and Mollon (1997/1999). The 7 simulated types are: Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly, Tritanomaly, and Achromatopsia (complete color blindness).

What is the CSS Filter Generator?

It generates a CSS filter property string that transforms a black SVG or icon into your selected color. This is extremely useful for icon libraries (Font Awesome, Heroicons) when you need to recolor SVG elements without editing source files. Find it in the Gradient tab.

Is my data stored or sent to a server?

No. All color calculations happen entirely in your browser using JavaScript. Images you upload are processed locally via the Canvas API and never leave your device. Color history and favorites are saved only to your browser's localStorage.