Color Converter

Convert colors between HEX, RGB, RGBA, HSL, and HSLA formats with a live preview swatch. All client-side.

Color Picker
HEX Input
Alpha: 1.00
FormatValue

Frequently Asked Questions

HEX is compact and universally supported — best in CSS when exact values matter. RGB/RGBA is explicit and easy to tweak programmatically. HSL/HSLA is human-friendly: hue 0–360 is the color, saturation is intensity, lightness is brightness — making it easy to create color variations by simply adjusting one parameter.
Alpha controls opacity. A value of 1 (or ff in HEX8) is fully opaque; 0 is fully transparent. In rgba() and hsla() it ranges from 0 to 1. In 8-digit HEX (#rrggbbaa) it ranges from 00 to ff.
RGB and HEX represent the same color data — HEX is simply RGB encoded in base-16. The color rgb(255, 87, 51) is identical to #FF5733: 255 decimal = FF hex, 87 decimal = 57 hex, 51 decimal = 33 hex. HEX is more compact and widely used in CSS. RGB is more readable for arithmetic on color values (e.g., darkening by reducing each component). Both are sRGB — they refer to the same color on screen.
HSL (Hue, Saturation, Lightness) maps to how humans perceive color. Hue (0–360°) is the color wheel angle — 0/360 is red, 120 is green, 240 is blue. Saturation (0–100%) controls vibrancy. Lightness (0–100%) controls brightness — 0% is black, 100% is white. Creating a color palette (lighter/darker variants) is simply adjusting lightness while keeping hue constant.
RGB is an additive color model used for screens — colors are made by adding colored light. Mixing all three at full intensity gives white. CMYK is a subtractive model used for print — colors are made by subtracting light from white paper using ink. The two models have different color gamuts: RGB can display vivid blues and greens that CMYK cannot reproduce in print.
CSS defines 140 named colors — keywords like red, cornflowerblue, rebeccapurple, and tomato that map to specific RGB values. Named colors are convenient for quick prototyping but not recommended for precise brand colors — always use HEX or HSL values in production CSS.
The WCAG contrast ratio measures the relative luminance difference between foreground and background colors. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text. White on black is 21:1 (maximum). A ratio below 4.5:1 for body text means users with low vision may struggle to read it.
sRGB is the standard color space for the web — all CSS hex/RGB/HSL values are sRGB. Display P3 is a wider-gamut space used in modern Apple devices that can display approximately 25% more colors than sRGB. CSS Color Level 4 supports P3 via color(display-p3 r g b). OKLAB is a perceptually uniform space ideal for smooth color interpolation in gradients and palette generation.
The 8-digit HEX format extends the standard 6-digit format with a fourth byte for the alpha channel. The last two hex digits control opacity: FF is fully opaque, 80 is 50% transparent, 00 is fully transparent. For example, #FF573380 is #FF5733 at 50% opacity — equivalent to rgba(255, 87, 51, 0.5). All modern browsers support 8-digit HEX.
Start by checking the relative luminance of your brand colors. Pair dark text on light backgrounds or light text on dark backgrounds. Avoid relying on color alone to convey information — use icons, patterns, or labels alongside color. Also simulate color blindness — about 8% of men have red-green color blindness, making red/green combinations problematic.

About This Color Converter

This free color converter converts between HEX, RGB, HSL, RGBA, and HSLA colour formats. Enter a value in any format and all others update instantly, with a live colour preview swatch and alpha slider.

When to use this tool

  • Translating design-tool colours to CSS values
  • Converting brand colours between different formats
  • Generating accessible colour variations by adjusting lightness
  • Debugging CSS colour values that look wrong in the browser

Related Developer Tools

Base Converter Regex Tester Hash Generator UUID Generator

Related Articles

In-depth guides and technical articles.

View all →
Developer Aug 31, 2026
Why rgba(0,0,0,0.5) Has No Hex Equivalent
An rgba value isn't a colour, it's a formula. Here's the alpha compositing math behind it, why hex-to-rgba is often impossible, and what premultiplied alpha fixes.
Developer Jul 3, 2026
Why HSL's "50% Lightness" Lies — oklch, Perceptual Color Spaces, and Why They Matter for Design Systems
HSL's "50% lightness" produces visually different brightness across hues — yellow at HSL(60,100%,50%) looks far brighter than blue at HSL(240,100%,50%). oklch solves this with perceptual uniformity: equal L values produce equal apparent lightness regardless of hue. Here's how oklch works in CSS (now supported in all modern browsers), why it's the best tool for dark mode palettes, and how wide-gamut P3 colors fit in.
Developer Jun 18, 2026
Why the Same Color Looks Different on a MacBook vs a Standard Monitor — Color Spaces, P3, and oklch
P3 displays (iPhone, MacBook Pro) can show colors that are impossible to display on standard sRGB monitors — and designers working on P3 screens routinely create colors that look different (less vivid) for much of their audience. Here's what "color space" actually means (gamut + encoding), why the same RGB value looks different on sRGB vs P3 displays, how CSS Color Level 4's color() function handles wide gamut, and why oklch is replacing HSL for building perceptually consistent color systems.
Developer Jun 13, 2026
Color Blindness and Design: Why Redundant Signals Matter More Than "Colorblind-Safe" Palettes Alone
Roughly 1 in 12 men have some form of red-green color vision deficiency — meaning "red means error, green means success" relies on a color distinction that's specifically the hardest for the most common type of color blindness. Here's how different CVD types affect color perception differently, why redundant non-color signals (icons, labels, patterns) are the core fix, and how CVD simulation reveals confusable color pairs during design review.
Developer Jun 12, 2026
Design Tokens, CSS Variables, and Dark Mode: How to Build a Colour System That Scales
Design tokens are a three-tier hierarchy: primitive colours → semantic meanings → component-specific use. CSS custom properties implement this at runtime, making dark mode a one-place change. Here's the full token model, how Tailwind's colour system works, and why OKLCH is replacing HSL for design systems.