Color Converter

How to use it

1. Type or paste a color in any of the supported formats: hex (3, 4, 6 or 8 digits, with or without #), rgb(), rgba(), hsl() or hsla().
2. The format is detected automatically and all three representations update at once.
3. The preview swatch shows the exact rendered color; the color picker stays in sync and can be used in reverse.
4. Click the copy button next to a value to take the HEX, RGB or HSL text into your stylesheet.

Common use cases

• CSS authoring — turn a design tool's hex code into HSL for a custom property scale.
• Debugging computed styles — paste a devtools rgba() string and read the hex equivalent.
• Alpha handling — 4- and 8-digit hex inputs are accepted; the alpha channel is acknowledged and the opaque core color is converted.
• Design review — verify that two formats describe the same color.

Why it stays private

Parsing and conversion are a few dozen lines of arithmetic running in your tab. No color is transmitted, logged or stored; reload the page and everything is gone.

FAQ

Q: Which formats does the input accept? A: Hex codes with 3, 4, 6 or 8 digits with or without the hash, rgb() and rgba() with comma or slash separators, and hsl() or hsla() with percentage saturation and lightness.

Q: What happens to the alpha channel? A: Formats that carry alpha are accepted and identified, but the converted output describes the opaque color; the alpha value itself is not forwarded, so check the source if transparency matters.

Q: Why do my HSL numbers differ slightly from another tool? A: Values are rounded to whole degrees and whole percentages after conversion. Tools that keep more decimals can differ by a rounding step, which is visually imperceptible.