Color Converter
HEX, RGB and HSL in three linked fields — edit any one or pick visually, and every format plus the live swatch updates instantly.
:root {
--brand-color: #a78bfa;
--brand-color-rgb: 167, 139, 250;
}Conversion math runs entirely in your browser — no color data leaves this page.
HEX, RGB and HSL — same color, three notations
All three formats describe the same 16.7 million sRGB colors, just from different angles. #a78bfa packs the red, green and blue channels into three hex byte pairs; rgb(167, 139, 250) spells out the same channels in decimal 0–255. hsl(255, 89%, 76%) is the human-friendly view: a hue angle on the color wheel (0° red, 120° green, 240° blue), saturation from grey to vivid, and lightness from black to white. Because they're equivalent, conversion is pure math — this tool implements it directly, handling 3-digit shorthand hex like #abc (which expands to #aabbcc) as well as the full 6-digit form.
Why designers reach for HSL
HEX and RGB are what browsers and design files store, but they're opaque to humans — you can't look at #a78bfa and know how to make it darker. In HSL the operations become obvious: lower the lightness for a hover state, drop the saturation for a disabled state, shift the hue by 180° for a complementary accent. A common workflow is to pick a brand color visually, convert it here, derive the variants in HSL, and copy the HEX back into your stylesheet. The generated CSS variable snippet gives you both the HEX value and the raw RGB channel triplet — the latter is useful for alpha composition patterns like rgba(var(--brand-color-rgb), 0.5).
FAQ
What's the difference between 3-digit and 6-digit hex?
#abc is shorthand where each digit is doubled: it equals #aabbcc. It can only express colors whose channel bytes have repeated digits, so pickers output the 6-digit form. Both are valid CSS and this tool accepts both, with or without the leading #.
Why don't my HSL values round-trip to exactly the same numbers?
HSL values here are rounded to whole degrees and percent for readability, and several nearby HSL triplets can map to the same RGB color. The displayed color is always exact — only the human-readable HSL representation is rounded, which is the standard behavior of design tools and browser dev-tools.
Does this handle alpha/transparency?
The converter works on opaque colors — the 6-digit HEX, rgb() and hsl() forms. To add transparency in CSS, append an alpha channel to any of them: #a78bfa80, rgb(167 139 250 / 0.5) or hsl(255 89% 76% / 0.5) — the color part is exactly what you copy from here.
Free tools are just the start
Deploy your next app on bare-metal cloud with per-second billing — your first app is free, no credit card required.
More free tools
Placeholder paragraphs plus fake names, emails, phone numbers and addresses for testing UIs.
Convert JSON to spreadsheet-ready CSV or CSV back to JSON — nested objects flattened, both directions.
Test regular expressions against your text with live match highlighting and capture groups.
Compare two blocks of text or code line by line and see exactly what was added or removed.
Count words, characters, sentences and paragraphs with reading and speaking time estimates.
Convert text between camelCase, snake_case, kebab-case, PascalCase, Title Case and more.