A Hex to RGB converter translates between the color formats used in web development, design tools, and CSS. Designers think in hex (#3B82F6), CSS has rgb() and hsl(), Figma uses HSV, and modern CSS introduces oklch(). Quick conversion between them is a daily developer need.
This guide explains every color format, provides conversion formulas with code examples, covers CSS color syntax for 2026 (including modern oklch), and helps you choose the right format for each situation.
Convert Color Codes Instantly — All Formats
Enter Hex, RGB, HSL, or HSV and see instant conversions to all formats. Includes opacity/alpha values and CSS code ready to copy.
Color Formats: Complete Reference
| Format | Syntax | Example (Blue) | Range | Used In |
|---|---|---|---|---|
| Hex | #RRGGBB | #3B82F6 | 00-FF per channel | CSS, brand guides, design files |
| Hex + Alpha | #RRGGBBAA | #3B82F680 | 00-FF + alpha | CSS (modern) |
| RGB | rgb(R, G, B) | rgb(59, 130, 246) | 0-255 per channel | CSS, canvas, image processing |
| RGBA | rgba(R, G, B, A) | rgba(59, 130, 246, 0.5) | 0-255, alpha 0-1 | CSS transparency |
| HSL | hsl(H, S%, L%) | hsl(217, 91%, 60%) | H: 0-360, S/L: 0-100% | CSS, palette generation |
| HSV/HSB | hsv(H, S%, V%) | hsv(217, 76%, 96%) | H: 0-360, S/V: 0-100% | Photoshop, Figma, color pickers |
| oklch | oklch(L C H) | oklch(0.63 0.18 252) | L: 0-1, C: 0-0.4, H: 0-360 | Modern CSS (perceptually uniform) |
Hex for simple colors in CSS (#fff, #3B82F6). RGBA when you need opacity. HSL for generating tints/shades (just change lightness). oklch for perceptually even color scales. HSV when working in Figma/Photoshop color pickers.
Conversion Formulas with Code
Hex → RGB
// Split into pairs, parse base-16
R = parseInt("3B", 16) = 59
G = parseInt("82", 16) = 130
B = parseInt("F6", 16) = 246
// #3B82F6 → rgb(59, 130, 246)RGB → Hex
hex = '#' + (59).toString(16).padStart(2,'0') // "3b"
+ (130).toString(16).padStart(2,'0') // "82"
+ (246).toString(16).padStart(2,'0') // "f6"
// → #3b82f6RGB → HSL (Algorithm)
// 1. Normalize R,G,B to 0-1
// 2. Find max, min of R,G,B
// 3. L = (max + min) / 2
// 4. S = (max - min) / (1 - |2L - 1|) if L ≠ 0 or 1
// 5. H = 60° × sector based on which channel is maxThe RGB→HSL conversion is complex — use a converter tool rather than implementing manually unless you are building a color library.
HSL and HSV both use Hue (H) but differ in the second and third values. HSL's Lightness (L) goes from black (0%) through pure color (50%) to white (100%). HSV's Value (V) goes from black (0%) to the pure color (100%) — it never reaches white through V alone. This is why Figma's color picker (HSV) and CSS hsl() produce different results for the same H/S values.
CSS Color Syntax: Complete Reference (2026)
/* Hex formats */
color: #3B82F6; /* Standard 6-digit */
color: #38F; /* 3-digit shorthand (#3388FF) */
color: #3B82F680; /* 8-digit with alpha (50% opacity) */
/* RGB formats */
color: rgb(59 130 246); /* Modern syntax (no commas) — recommended */
color: rgb(59, 130, 246); /* Legacy syntax (commas) */
color: rgb(59 130 246 / 50%);/* Modern with opacity */
color: rgba(59, 130, 246, 0.5);/* Legacy with opacity */
/* HSL formats */
color: hsl(217 91% 60%); /* Modern — recommended */
color: hsl(217, 91%, 60%); /* Legacy */
color: hsl(217 91% 60% / 50%);/* With opacity */
/* Modern CSS Color Level 4 */
color: oklch(0.63 0.18 252); /* Perceptually uniform */
color: color(display-p3 0.23 0.51 0.96); /* Wide gamut */| Format | Browser Support | When to Use |
|---|---|---|
| Hex (#3B82F6) | Universal | Simple colors, no opacity |
| rgb() / rgba() | Universal | When you need opacity or JS-computed colors |
| hsl() / hsla() | Universal | Generating color scales, design systems |
| oklch() | Chrome 111+, Safari 15.4+, Firefox 113+ | Perceptually uniform palettes, P3 gamut |
Adding Opacity / Transparency
Four ways to add transparency to a color in CSS:
| Method | Example | Opacity Value |
|---|---|---|
| Hex alpha (8-digit) | #3B82F680 | 80 hex = 128/255 ≈ 50% |
| Modern rgb() | rgb(59 130 246 / 50%) | 50% or 0.5 |
| Legacy rgba() | rgba(59, 130, 246, 0.5) | 0 to 1 |
| Modern hsl() | hsl(217 91% 60% / 50%) | 50% or 0.5 |
Hex Alpha Quick Reference
| Opacity | Hex Alpha | Opacity | Hex Alpha |
|---|---|---|---|
| 100% | FF | 50% | 80 |
| 90% | E6 | 40% | 66 |
| 80% | CC | 30% | 4D |
| 70% | B3 | 20% | 33 |
| 60% | 99 | 10% | 1A |
Multiply the opacity percentage by 2.55 and convert to hex. 50% → 50 × 2.55 = 127.5 → round to 128 → hex 80. So 50% opacity = append "80" to your hex code.
Hex Shorthand, Named Colors & Design Tokens
3-Digit Shorthand
#RGB expands to #RRGGBB by doubling each digit: #F00 = #FF0000 (red), #09C = #0099CC, #FFF = #FFFFFF.
CSS Named Colors
CSS has 147 named colors. Useful ones: transparent (rgba(0,0,0,0)), currentColor (inherits text color), rebeccapurple (#663399 — named in memory of Eric Meyer's daughter).
Design Tokens
Modern design systems store colors as tokens rather than raw values:
/* CSS Custom Properties */
:root {
--color-primary-500: #3B82F6;
--color-primary-500-rgb: 59, 130, 246; /* For rgba() usage */
}
/* Usage with opacity */
background: rgba(var(--color-primary-500-rgb), 0.1);How to Use the Tool (Step by Step)
- 1
Open the Converter
Navigate to the Hex RGB Converter on ToolsArena — no signup needed.
- 2
Enter a Color
Paste a hex code (#3B82F6), RGB values (59, 130, 246), or HSL values (217, 91%, 60%).
- 3
View All Conversions
See the color in all formats: Hex, RGB, RGBA, HSL, HSV — with a color preview swatch.
- 4
Adjust Opacity
Set opacity to get RGBA and hex-with-alpha values.
- 5
Copy
Copy any format to your clipboard — ready to paste into CSS, Figma, or code.
Frequently Asked Questions
How do I convert hex to RGB?+−
Split the 6-digit hex code into 3 pairs (RR, GG, BB) and convert each from base-16 to base-10. #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246). The converter does this instantly.
What is the difference between RGB and HSL?+−
RGB defines color by red/green/blue light amounts — hardware-oriented. HSL uses hue (color on the wheel), saturation (vividness), and lightness (how light/dark) — much more intuitive for humans. HSL is better for generating color palettes: change lightness to create tints and shades of the same hue.
How do I add transparency to a hex color?+−
Add 2 more hex digits for alpha: #3B82F680 (80 hex ≈ 50% opacity). Or use the modern CSS syntax: rgb(59 130 246 / 50%). Common alpha values: FF=100%, CC=80%, 80=50%, 33=20%, 00=0%.
What is 3-digit hex shorthand?+−
#RGB expands to #RRGGBB by doubling each digit. #F00 = #FF0000 (red), #09C = #0099CC (cyan). Only works when each pair consists of identical digits.
What is oklch and should I use it?+−
oklch is a perceptually uniform color space new in CSS Color Level 4. Colors with the same lightness value actually look equally bright (unlike HSL where hsl(60, 100%, 50%) yellow looks much brighter than hsl(240, 100%, 50%) blue). Use it for design systems that need perceptually even color scales. Browser support: Chrome 111+, Safari 15.4+, Firefox 113+.
Why does Figma show different values than CSS for the same color?+−
Figma uses HSB/HSV (Hue, Saturation, Brightness/Value) while CSS uses HSL (Hue, Saturation, Lightness). Same hue but different S/L vs S/V values. Always convert from Figma's hex code rather than trying to match HSB values to HSL.
How do I use color variables with opacity in CSS?+−
Store the RGB components as a CSS custom property: --color-rgb: 59, 130, 246; Then use: background: rgba(var(--color-rgb), 0.1); This lets you apply different opacities to the same base color.
Is this tool free and private?+−
Yes. The converter runs entirely in your browser. No color data is sent to any server.
Convert Color Codes Instantly — All Formats
Enter Hex, RGB, HSL, or HSV and see instant conversions to all formats. Includes opacity/alpha values and CSS code ready to copy.
Open Hex RGB Converter →Related Guides
Color Palette Generator Guide
Learn color theory, palette types, accessibility contrast rules, and how to generate harmonious color palettes for web design, branding, and UI.
Color Contrast Checker Guide
Check if your text and background colors meet WCAG AA and AAA contrast requirements. Understand contrast ratios, common failures, and fixes.
CSS Gradient Generator
Generate linear, radial, and conic CSS gradients visually — copy the code and use it instantly in your projects.