About Color Converter
Convert colors between HEX, RGB, and HSL. Live preview and click-to-copy CSS values. Free, no sign-up required.
How to use
- Type a HEX value (with or without the # prefix) into the HEX field — short form like #f8b also works and expands to #ff88bb. The RGB and HSL fields update live as you type, so you can paste from any design tool or stylesheet.
- Edit any of the three RGB inputs (R, G, B from 0 to 255) to dial in a color by additive primaries. RGB is the native input mode for screens — every pixel is literally three sub-pixels at the values you set.
- Edit the HSL trio (Hue 0-360, Saturation 0-100, Lightness 0-100) to manipulate a color semantically. Bumping the H value rotates around the color wheel, S controls greyness (0 is pure grey, 100 is fully saturated), and L is the black-to-white axis.
- Click any of the displayed values to copy them to the clipboard — drop the result straight into a CSS color: declaration, a Figma color picker, or a sketch in code. The hint reminder appears beneath the swatch.
- For accessibility-aware design work, pair the converter with a contrast checker: the HSL Lightness value is a fast proxy for relative luminance, but for WCAG-accurate AA/AAA decisions you must run the actual sRGB-to-luminance formula on the output color.
- Use the live preview swatch to sanity-check unusual HEX values like #00FFFF (pure cyan) or near-greys like #807F7F. If the swatch reads differently than expected, the input is probably mistyped — HSL especially is easy to fat-finger because its parameters are non-linear.
Examples
HEX to RGB by hand
Take #F8BD44. Split into pairs: F8, BD, 44. Convert each from base-16 to base-10: F8 = 15*16+8 = 248, BD = 11*16+13 = 189, 44 = 4*16+4 = 68. Result: rgb(248, 189, 68) — a warm amber. The tool does this in microseconds for any input.
Brand color across formats
Tailwind's blue-500 is #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%). The HSL form makes it obvious it is a saturated blue-purple at medium lightness — useful when you want to derive blue-400 (raise L by ~10%) or blue-600 (drop L by ~10%) without guesswork.
Rotating to a complement
Starting from hsl(40, 93%, 62%) (a marigold), add 180 to the hue: hsl(220, 93%, 62%) gives you a bright cobalt blue at the same brightness and saturation. The eye perceives them as 'opposite' because they sit on opposite sides of the wheel — useful for accent pairs.
Frequently asked questions
Why do my HEX, RGB, and HSL values not exactly round-trip?
HSL is computed from RGB via a lossy formula, and the result is rounded to integers (degrees, percent). Converting back recomputes RGB from those rounded values, which can shift each channel by 1 in either direction. For pixel-exact work, treat HEX or 8-bit RGB as the source of truth and use HSL only for editing or relative adjustments. If you need true round-trip, use a 16-bit-per-channel pipeline or stay in HSL throughout.
What is the difference between sRGB, Display P3, and Rec.2020?
These are color spaces — they define what 'red' actually means. sRGB is the web/CSS standard, covering roughly 35 percent of human-visible color. Display P3 (used by modern Apple displays) covers about 45 percent and includes more saturated reds and greens. Rec.2020 is the HDR/UHD broadcast standard, covering ~75 percent. CSS Color Level 4 supports color(display-p3 1 0 0) syntax for wider-gamut output, but the converter assumes sRGB unless noted.
How does alpha work in rgba() and #RRGGBBAA?
Alpha is a float from 0 (transparent) to 1 (opaque) in rgba()/hsla(), or a hex pair from 00 to FF in 8-digit hex. So rgba(255, 0, 0, 0.5) and #FF000080 are the same red at 50 percent. Alpha compositing is multiplicative on each channel against the backdrop — be aware that 50 percent alpha black on white is NOT pure 50 percent grey because of sRGB gamma.
How do I compute relative luminance for WCAG contrast checks?
First, normalize each sRGB channel to 0-1 and linearize: if c <= 0.03928, return c/12.92, else return ((c+0.055)/1.055)^2.4. Then luminance = 0.2126*R + 0.7152*G + 0.0722*B. Contrast ratio between two colors is (L_lighter + 0.05) / (L_darker + 0.05). WCAG AA requires 4.5:1 for body text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
Why does CMYK look so different from RGB on screen?
CMYK is subtractive (ink absorbing light) and has a smaller gamut than sRGB — it cannot reproduce vivid screen blues, oranges, and greens. The conversion is also not a simple formula; press output depends on paper stock, ink density, and ICC profile. The converter uses a naive RGB-to-CMYK formula for reference only. For production print, use Adobe-style CMYK separations with the actual press profile, never a generic web converter.
What does the HSV (or HSB) format add over HSL?
HSV uses Value (brightness) where HSL uses Lightness. In HSL, lightness 100 is always pure white regardless of saturation. In HSV, value 100 with full saturation is the most vivid color possible (e.g., pure red), and value scales toward black. HSV maps better to traditional color pickers (the saturation/value square in Photoshop), while HSL maps better to programmatic shade generation (lighten/darken by adjusting L).
How accurate is HEX shorthand like #f0a?
Three-digit shorthand expands by doubling each digit: #f0a becomes #ff00aa. This means only 4096 colors are addressable in shorthand versus 16.7 million in full form. Use shorthand for grayscale and bright primaries where the doubling is exact, but never for tuned design tokens — #abc is NOT the same as #aabbcc only when read left-to-right; the expansion forces specific values that may not match your intended swatch.
Part of ToolFluency’s library of free online tools for Developer Tools. No account needed, no data leaves your device.