Color Converter — Free Online Tool on Toolpile
Every tool you need, one place
PDF, Image, AI, Dev, and Business tools — free, private, no signup.
Toolpile uses cookies for analytics and ads. The tools themselves keep your files in the browser — that doesn't change. Read the full policy
PDF, Image, AI, Dev, and Business tools — free, private, no signup.
About Color Converter
HEX, RGB, and HSL all describe the same colour in different coordinate systems — each is preferred for a different job. Designers who hand-tune colours use HSL because lightness and saturation are intuitive sliders; developers paste HEX because CSS and Tailwind default to it; legacy graphics pipelines want RGB bytes. This tool converts between all three instantly, client-side, so you can grab the format your next tool expects.
**HEX** (`#3b82f6`) is RGB in base-16. Two characters per channel means 256 values each (0-FF) and a total of 16.7 million combinations. HEX is the web default because it's compact (6-7 characters vs. 18+ for `rgb(...)`) and CSS-ready everywhere. Shorthand forms (`#f00` = `#ff0000`) exist but don't survive most tools — stick to the 6-digit form when pasting between apps. Lower-case is conventional in code; upper-case is fine and equivalent.
**RGB** (`rgb(59, 130, 246)`) stores the same three channels as decimal 0-255. Worth using when you're doing arithmetic in code (multiplying brightness, mixing two colours, generating a gradient programmatically) — maths is clearer in decimal than hex. `rgba(59, 130, 246, 0.5)` adds alpha; this tool shows plain RGB and leaves alpha handling to CSS.
**HSL** (`hsl(217, 91%, 60%)`) is hue (0-360°, where 0 = red, 120 = green, 240 = blue), saturation (0-100% grey to vivid), and lightness (0% black to 100% white with 50% being the pure hue). HSL is what designers reach for when *adjusting* a colour: shift hue by 30° to rotate through the palette, drop lightness by 10% to make a hover state, halve saturation to mute a background. Every major design tool (Figma, Sketch, Adobe XD) exposes HSL sliders for this reason.
These three are lossless conversions of each other — round-tripping `#3b82f6` → RGB → HSL → HEX lands back exactly at `#3b82f6`. The math is plain arithmetic; no colour profile, no ICC management, no sRGB-to-DisplayP3 conversion happens here. If your workflow involves wide-gamut displays (DCI-P3, Rec.2020), use a dedicated colour-management tool — sRGB is what web CSS expects.
Two colours look fine to the designer and unreadable to 8% of men and 0.5% of women with colour-vision deficiency. WCAG 2.2 AA says body text against its background needs a contrast ratio of **≥4.5:1**; large text (≥18 pt or 14 pt bold) needs **≥3:1**. The ratio is computed from the *luminance* of the two colours — which is neither their lightness nor their brightness in the naive sense, but a weighted sum where green contributes more than red and blue contribute less (because the human eye is most sensitive to green).
Quick shortcuts: `#000` on `#fff` is 21:1 (perfect). `#666` on `#fff` is 5.74:1 (passes body text). `#999` on `#fff` is 2.85:1 (fails body, fails large). `#3b82f6` (the default in this tool) on white is 3.68:1 — fails body text, passes large. Most brand-pastel palettes fail WCAG on white backgrounds; dark themes often fail on their own grey-on-grey labels. Run every text-on-background pair through a contrast checker before shipping; this tool doesn't do the calc itself but pairs well with a dedicated contrast tool.
Why does my HEX look different in Figma than in my browser?
Usually a colour-profile difference. Browsers default to sRGB; Figma on a wide-gamut (DCI-P3) display can render the same HEX value with more saturation because it's mapping sRGB into the wider gamut. Fix by ensuring the Figma file is in sRGB (File → Color Space) if it'll ship to the web. The HEX string itself is identical — the colour it produces on screen depends on the display and colour pipeline.
What about alpha (transparency)?
CSS supports `#RRGGBBAA` (8-digit HEX), `rgba(r, g, b, a)`, and `hsla(h, s%, l%, a)` where alpha ranges 0-1. This tool handles the opaque 6-digit case; for alpha, append the hex alpha pair (e.g., `#3b82f680` = 50% opacity) or switch to the `rgba()` form in your CSS. Tailwind also supports `bg-blue-500/50` which bakes the /50 as 50% alpha on the `blue-500` colour.
How do I convert HSL to HEX?
The math is: HSL → RGB (trigonometry-free piecewise formula), then RGB → HEX (each byte as two hex digits). This tool does it live whenever you change HEX input. For HSL-first workflows, pick the HSL in DevTools (Chrome's colour picker supports HSL directly) and it gives you the HEX instantly; paste that here if you want the RGB triplet too.
Is this the same as a 'colour from image' eyedropper?
No — this converts between HEX/RGB/HSL for a colour you already have. To sample a colour *from* an image (eyedropper), use the Image Eyedropper tool on this site — it reads the pixel under your click and shows HEX/RGB. Both tools pair naturally: sample → convert.
What's the HEX for 'red' / 'blue' / named colours?
CSS has 140-odd named colours. `red` = `#ff0000`, `blue` = `#0000ff`, `rebeccapurple` = `#663399` (named after a designer's daughter; shipped in CSS4). Named colours are fine for prototypes but designers usually land on custom HEX values for brand colours. If you need the full named-colour table, any browser DevTools colour picker autocompletes them.
Does this handle wide-gamut (Display P3, Rec.2020)?
No — HEX in sRGB is the only web-distributable format that renders consistently across phones, laptops, and old monitors. CSS Color Level 4 adds `color(display-p3 r g b)` for wide-gamut-aware browsers, but browser support is still uneven in 2026 and falling back to sRGB is automatic. Unless you're shipping P3 assets deliberately, sRGB HEX is the right default.
Why do designers say HSL and developers say HEX?
Different jobs. Designers are *adjusting* colours all day (make a button hover darker, a warning more saturated), and HSL's three sliders map to those adjustments intuitively. Developers are *applying* colours specified by the design — they paste a value and move on; HEX is the shortest way to write that. Neither is 'right'; the tool that understands both (or converts between) wins the workflow.