Enter a color as HEX, RGB or HSL — or pick one with the swatch — and see it in all three formats at once, with a live preview. Alpha (transparency) is supported throughout. Everything is computed in your browser.
#3b82f6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
A round trip can shift a value by one unit — that’s normal integer color rounding. Alpha is kept across all formats.
How it works
Whatever you type is parsed into red, green and blue channels (0–255) plus an alpha from 0 to 1. HEX accepts 3-, 4-, 6- and 8-digit forms; rgb()/rgba() and hsl()/hsla() are read with or without an alpha. From that single internal color the tool derives the HEX, RGB and HSL strings you see.
HSL is computed with the standard formulas: hue is the angle on the color wheel (0–360°), saturation and lightness are percentages. Because RGB has 256 levels per channel and HSL rounds to whole degrees and percents, a round trip can shift by one unit — normal for integer color math and invisible on screen.
Practical examples
HEX to the others
#ff0000 becomes rgb(255, 0, 0) and hsl(0, 100%, 50%). Copy whichever your stylesheet or design tool expects.
Keeping transparency
rgba(255, 255, 255, 0.5) converts to the 8-digit hex #ffffff80 and hsla(0, 0%, 100%, 0.5) — the alpha survives in every format.
Tweaking lightness in HSL
Start from a brand blue, read its HSL, then adjust the lightness number to make a lighter or darker shade — HSL is far easier to reason about than nudging hex digits.
Frequently asked questions
Which input formats are accepted?
HEX (#rgb, #rgba, #rrggbb, #rrggbbaa, with or without the #), rgb() and rgba(), and hsl() and hsla(). Spaces, commas and the slash syntax for alpha all work.
Does it support transparency?
Yes. An alpha channel is preserved across all three formats: it shows up as the last two hex digits, as the fourth value in rgba(), and as the fourth value in hsla().
Why did my color shift by one after converting?
RGB uses whole numbers 0–255 and HSL rounds to whole degrees and percentages, so converting back and forth can move a channel by a single unit. It’s a rounding artefact of integer color spaces and isn’t visible to the eye.
What is the difference between HSL and RGB?
RGB mixes red, green and blue light. HSL describes the same color as hue (which color), saturation (how vivid) and lightness (how bright), which is often more intuitive for creating tints and shades.
Can I use the color picker instead of typing?
Yes. The swatch on the left opens your operating system’s color picker; choosing a color fills the input with its hex, and the other formats update instantly. Note the native picker itself doesn’t handle alpha.
What do the 4- and 8-digit hex forms mean?
They include alpha. #rgba is shorthand where each digit is doubled, and #rrggbbaa spells out the alpha as its own byte — so #ff000080 is red at about 50% opacity.
Are named colors like “red” supported?
Not currently — the tool focuses on the numeric formats. Enter red as #ff0000, rgb(255,0,0) or hsl(0,100%,50%) instead.
Is my color sent anywhere?
No. All parsing and conversion happen in your browser, so nothing you enter is uploaded.
Related tools
Hash Generator
Generate SHA-1, SHA-256, SHA-384 and SHA-512 hashes of text in your browser using the Web Crypto API.
Developer tools
HTML Entity Encoder and Decoder
Encode text to HTML entities or decode named, decimal and hex entities back to characters. In your browser.
Developer tools
JSON Formatter
Beautify, validate or minify JSON in your browser — with clear error messages. Nothing is uploaded.
Developer tools
Number Base Converter
Convert whole numbers between binary, octal, decimal and hexadecimal at once. BigInt-precise, in your browser.
Math & education
Paint Calculator
Work out how many litres of paint you need from wall area, coats and coverage. Runs in your browser.
Construction & home
Base64 Encoder and Decoder
Encode text to Base64 or decode it back, UTF-8 safe and URL-safe tolerant. Runs entirely in your browser.
Developer tools