Hex to RGB Converter

How to use

1. Paste a hex code — Type or paste any hex color (e.g. #3B82F6, #FFF, or with alpha #3B82F6CC)
2. Read converted values — RGB, RGBA, and HSL update instantly with a live color preview
3. Copy what you need — Tap any value to copy it for your CSS, design tool, or codebase

What Is Hex to RGB Conversion?

Hex to RGB conversion translates a hexadecimal color string like #3B82F6 into its three decimal components — red, green, and blue — each in the 0–255 range. The reverse is just as easy. Designers, developers, and digital marketers use this conversion every day when copying colors between Figma, Sketch, CSS, design systems, mobile-app SDKs, and image-editing software.

How Hex Codes Encode RGB

A six-digit hex code splits into three two-digit pairs. Each pair is a base-16 number from 00 (zero) to FF (255) representing the intensity of red, green, or blue. So #3B82F6 decodes as R=59, G=130, B=246 — a medium-bright blue. The full 24-bit hex system supports 16,777,216 distinct colors.

Shorthand and Alpha Channel

• 3-digit shorthand: #F0A is the same as #FF00AA — each digit is duplicated.
• 8-digit (with alpha): #3B82F6CC means the same blue with ~80% opacity (CC ÷ FF ≈ 0.8). The tool converts this to rgba(59, 130, 246, 0.8).
• Case-insensitive: #3b82f6 and #3B82F6 are equivalent.

When to Use Each Format

• CSS, HTML: hex is concise and universally supported in stylesheets and inline attributes.
• RGB / RGBA: needed when you want to animate opacity, mix colors at runtime, or use modern color-mix functions.
• HSL: easier to adjust lightness or saturation without changing the underlying hue — useful for building accessible color systems.

Common Use Cases

• Match a brand color from a hex spec into a design tool that only accepts RGB.
• Generate rgba() values for overlays, glassmorphism, or fading backgrounds.
• Debug color mismatches between Figma, Sketch, Tailwind, and Material Design.
• Build accessible color palettes by working in HSL.

Privacy

This tool runs entirely client-side. The color you paste never leaves your browser — no uploads, no tracking pixels on conversion, no log files. Convert dozens or thousands of colors safely.

Pair this with the Color Converter, the Palette Generator, or the WCAG Contrast Checker.

Frequently asked questions

What is a hex color code?

A hex color is a six-digit (or eight with alpha) base-16 representation of an RGB color. The first two digits encode red, the middle two encode green, and the last two encode blue — each ranging 00–FF (0–255). #FFFFFF is white; #000000 is black.

Does it support shorthand like #FFF?

Yes. Three-digit shorthand is automatically expanded — #F0A becomes #FF00AA. Four-digit shorthand with alpha (#F0AC) is also supported.

What about 8-digit hex with alpha?

Eight-digit codes carry an alpha channel in the last two digits. The tool parses these and outputs a proper rgba() value with the alpha converted from 00-FF to 0.0-1.0.

Are the colors processed online?

No. Every conversion runs entirely inside your browser using simple math. Nothing is uploaded or logged.

Related free tools

• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• Color Contrast Checker — Check WCAG 2.1 contrast ratio with AA / AAA pass marks for normal text, large text, and UI components.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Pixel to REM Converter — Live two-way px ↔ rem conversion with custom root font-size. Built for accessible, user-respecting design.
• Color Blindness Simulator — Preview images and UI through protanopia, deuteranopia, tritanopia, and achromatopsia simulations.
• CSS Unit Converter — Convert any CSS length unit to all others with customizable base font-size and viewport dimensions.
• CSS Triangle Generator — Generate pure-CSS triangles for tooltips, arrows, and speech bubbles. 8 directions, any size or color.
• CSS Cubic Bezier Generator — Design custom easing curves visually with live curve and animation preview. Production-ready CSS.
• CSS Glassmorphism Generator — Design frosted-glass UI panels with backdrop blur, opacity, saturation, and tint. Live preview.
• CMYK Color Converter — Convert HEX and RGB to CMYK percentages for print. Two-way conversion with live preview.