HEX
Supports 3-digit (#RGB), 6-digit (#RRGGBB), and 8-digit (#RRGGBBAA)
RGB / RGBA
HSL
Hue rainbow spectrum
CMYK
CSS / Code Snippets
/* Loading... */
Color Palettes
Gradient Builder
/* gradient CSS */
WCAG Contrast Checker
Foreground
Background
Saved Colors
No saved colors yet. Click "Save to History" above.
📖 How to Use
- Choose the conversion direction (HEX→RGB or RGB→HEX).
- Enter your color value.
- The converted code appears instantly.
- Click Copy to copy the CSS-ready value.
❓ Frequently Asked Questions
HEX to RGB Color Converter — Understanding Color Formats in Web Design
Color is one of the most fundamental elements of web design, yet color notation is a persistent source of confusion for developers and designers. A single color can be expressed in at least four different formats: HEX, RGB, HSL, and RGBA — and each format has specific use cases where it excels. Knowing when to use which format, and being able to convert between them instantly, is a daily requirement for anyone who writes CSS, creates design systems, or works with digital graphics.
This converter handles conversions between all major web color formats and provides a live preview of the resulting color, making it instantly clear whether the converted value is correct.
Color Format Reference
| Format | Example | Range | Best Use |
|---|---|---|---|
| HEX | #3b82f6 | 00–FF per channel | CSS, design tokens, copyable from design tools |
| RGB | rgb(59, 130, 246) | 0–255 per channel | Dynamic manipulation in JavaScript, Canvas API |
| RGBA | rgba(59, 130, 246, 0.7) | 0–255 + 0–1 alpha | Transparent overlays, modal backgrounds, shadows |
| HSL | hsl(217, 91%, 60%) | 0–360° / 0–100% / 0–100% | Design systems, programmatic lightness/saturation adjustments |
How HEX to RGB Conversion Works
A HEX color like #3b82f6 encodes three 8-bit color channels (Red, Green, Blue) as pairs of hexadecimal digits:
3b (hex) = 3×16 + 11 = 59 (decimal)
82 (hex) = 8×16 + 2 = 130 (decimal)
f6 (hex) = 15×16 + 6 = 246 (decimal)
→ rgb(59, 130, 246)
The reverse (RGB to HEX) divides each channel value by 16 to get the two hex digits. For example, Red = 59: 59 ÷ 16 = 3 remainder 11 → 3b.
When to Use HSL Over HEX/RGB
HSL (Hue, Saturation, Lightness) is superior to HEX/RGB for one specific use case: creating color palettes and design systems. If you want a lighter version of your brand color, changing HSL lightness from 50% to 80% gives a predictable, perceptually lighter result. Doing the same in RGB (subtracting equal amounts from each channel) doesn't produce perceptually uniform lightness changes. Modern CSS design tokens and Tailwind CSS use HSL specifically because it's programmatically manipulable in a human-intuitive way.
Common Color Conversion Scenarios
- From Figma/Sketch to CSS — design tools typically output HEX; CSS accepts all formats but HEX is most common
- Adding transparency — HEX doesn't support alpha in older browsers; convert to RGBA when you need a semi-transparent color
- JavaScript color manipulation — split RGB values to mathematically darken/lighten for hover states and dynamic theming
- Checking color contrast — WCAG accessibility contrast ratio calculations work from RGB values
Frequently Asked Questions
What is the difference between #RGB and #RRGGBB HEX formats?
3-digit HEX (#f06) is shorthand for 6-digit HEX (#ff0066) — each digit is doubled. It only works when both digits of each channel are identical, so only 4,096 of the 16.7 million possible colors can be expressed as 3-digit HEX. Use 6-digit HEX for precise color matching.
Does CSS support 8-digit HEX (with alpha)?
Yes — CSS Color Level 4 supports 8-digit HEX like #3b82f6cc where the last two digits (cc = 80% opacity) represent the alpha channel. Browser support is now excellent (Chrome, Firefox, Safari, Edge all support it). For older browser support, use rgba() instead.
How many colors can be represented in RGB?
Standard 8-bit-per-channel RGB represents 256 × 256 × 256 = 16,777,216 unique colors. This is what web browsers use. Professional photo editing works with 16-bit-per-channel color (65,536 values per channel) for smoother gradients and more editing headroom, but web displays typically show 8-bit.
What is the HEX code for pure black, white, and common web colors?
Black = #000000 (rgb 0,0,0) | White = #ffffff (rgb 255,255,255) | Red = #ff0000 | Green = #00ff00 | Blue = #0000ff | Gray = #808080. Tailwind CSS gray-900 = #111827 | Tailwind blue-500 = #3b82f6 — use the converter to check any Tailwind or Material Design color against its RGB equivalent.
Can I use this tool to check color accessibility contrast?
This tool converts between formats and shows a color preview. For WCAG contrast ratio checking (ensuring text is readable against its background), use the RGB values this tool outputs as inputs in a dedicated contrast checker. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.