Color Converter
Convert between HEX, RGB and HSL instantly
Color Converter: Three Languages, One Color
The designer hands you HEX, CSS wants RGB, you think in HSL — all three on one screen.
The same color speaks three languages: HEX (#6366f1) is compact and the standard of design tools; RGB (rgb(99, 102, 241)) is programming's language of red-green-blue channels; HSL (hsl(239, 84%, 67%)) is closest to human intuition with hue-saturation-lightness. This converter switches between all three instantly: type any format into the box or click the color picker — the three equivalents and a live preview update together. Short HEX (#f00), rgb() and hsl() syntaxes are recognized; every row copies with one click. HSL's real power shows here too: to get a lighter, darker or muted version of the same hue, you only touch S and L.
Features
Three Formats
HEX, RGB and HSL together, live.
Live Preview
See the color in a large swatch as you type.
Color Picker
Pick visually without knowing any code.
Per-Row Copy
Grab whichever format you need in one click.
Color Format Guide
Which format for what?
- HEX: compact, the classic of design tools and the web
- RGB: channel-based — for programmatic color math
- HSL: intuitive — adjust lightness/saturation with a fixed hue
- Same color: #6366f1 = rgb(99,102,241) = hsl(239,84%,67%)
Practical HSL tricks
- Lighter: increase L
- Muted: decrease S
- Complementary color: add 180 to H
- Harmonious palette: step H by 30 degrees
Frequently Asked Questions
How do you read a HEX code?
After the #, two digits are red, two green, two blue; each pair spans 00-FF (0-255). #6366f1 → red 99, green 102, blue 241. The short form #f00 abbreviates #ff0000.
Why is HSL handier for design?
Because it thinks like a human: H (hue) is the color itself, S (saturation) its vividness, L (lightness) how light or dark it is. A button's hover state is just L +10% — in RGB that means changing all three channels.
Is the A (alpha) in RGBA supported?
The tool focuses on the color itself; typing rgba() reads the color channels and ignores transparency. To add it back, expand the rgb() output to rgba(r, g, b, 0.5) by hand.
Do color names (red, blue) work?
The tool focuses on numeric formats (hex, rgb, hsl); for names, use the color picker — the moment you pick, all three numeric equivalents appear.
Which format should I use in CSS?
All are valid; it's a readability choice. HSL is popular with theme variables, RGB when JavaScript computes colors, HEX for fixed brand colors.
Is there color drift in conversion?
HEX ↔ RGB is exactly lossless. Converting to HSL rounds percentages to whole numbers, which can create differences too small for the eye (at most 1/255).