Hex ↔ RGB Color Converter
Bidirectional color converter with native picker, live RGB sliders, alpha channel, multi-format output (HEX, RGB, RGBA, HSL, HSLA), and built-in WCAG contrast checker. 100% browser-based.
#3B82F6
#3B82F6FF
rgb(59, 130, 246)
rgba(59, 130, 246, 1)
hsl(217, 91%, 60%)
hsla(217, 91%, 60%, 1)
Quick presets
Quick Reference
- HEX —
#RRGGBB(6 digits) or#RRGGBBAA(8 digits with alpha) - RGB — each channel 0–255
- HSL — hue 0–360°, saturation & lightness 0–100%
- WCAG AA contrast: ≥ 4.5:1 (normal text), ≥ 3:1 (large text)
- WCAG AAA contrast: ≥ 7:1 (normal text), ≥ 4.5:1 (large text)
How to Use the Color Converter
- Pick a color visually with the color picker, type a HEX code, or drag the R / G / B / A sliders.
- The preview swatch updates in real time, showing your color with sample text and live WCAG contrast ratings for white and black text.
- All six output formats (HEX, HEX8, RGB, RGBA, HSL, HSLA) refresh automatically.
- Click Copy next to any format to send it to your clipboard.
- Tap a preset swatch to load a popular base color.
What Is HEX vs RGB vs HSL?
All three describe the same colors, just in different notations. HEX is compact and the most common form in CSS — #3B82F6 represents red, green, and blue channels in two-digit hexadecimal. RGB uses decimal numbers from 0–255 for each channel — easier to read and edit programmatically. HSL describes color in terms of hue (the color itself), saturation (how vivid), and lightness (how bright) — far more intuitive when you want to make a color "a bit darker" or "more washed out." The A in RGBA / HSLA / HEX8 is the alpha channel (transparency), from 0 (invisible) to 1 (fully opaque).
Common Uses for a Color Converter
- Web design — match brand colors across CSS, design tools, and documentation.
- CSS development — convert HEX from a mockup to RGBA when you need transparency.
- Accessibility audits — check WCAG contrast ratios before shipping.
- Print-to-digital workflows — translate between color systems.
- Logo design — extract precise color values from references.
- Code reviews — instantly preview what a hex value actually looks like.
- Theme building — explore HSL variants of a base color (lighter / darker / desaturated).
Why Choose Our Color Converter
- Privacy-first — 100% browser-based. No data sent anywhere.
- Six formats at once — HEX, HEX8, RGB, RGBA, HSL, HSLA all in sync.
- Live WCAG contrast checker — instant AAA / AA / Fail ratings on white and black text.
- Alpha channel support — full transparency control with a checkered preview.
- Multiple input methods — native picker, HEX text, RGB sliders, numeric inputs, or preset swatches.
- No signup, no tracking, no ads in your data.
Frequently Asked Questions
What's the difference between HEX, RGB, and HSL?
They all encode the same colors. HEX is hex-encoded RGB (compact, used widely in CSS). RGB uses decimal 0–255 channel values. HSL describes color in hue / saturation / lightness, which is more intuitive for manual tweaking. Modern CSS supports all three.
What is the alpha channel?
Alpha controls transparency — 0 means fully transparent, 1 (or 100%) means fully opaque. RGBA, HSLA, and 8-digit HEX (HEX8) all support alpha. Useful for overlays, glass effects, and subtle backgrounds.
What is contrast ratio and why does it matter?
Contrast ratio measures how distinguishable text is from its background. WCAG accessibility guidelines require at least 4.5:1 for normal text and 3:1 for large text (AA level). Poor contrast makes content unreadable for users with low vision, in bright sunlight, or on low-quality screens.
Should I use HSL instead of HEX in CSS?
HSL is more readable and easier to manipulate (e.g. "same hue, 10% darker"), but HEX is shorter and more familiar. Pick whichever matches your team's conventions — modern browsers handle both identically.
Does the color converter work offline?
Yes. Once the page is loaded, all conversions run in your browser — no internet connection needed.