CSS Color Picker & Converter
Pick a color or type one in HEX, RGB, or HSL, and get every other format back instantly with alpha support.
About the CSS Color Picker & Converter
This picker lets you set a color with the native swatch or by typing HEX, RGB(A), or HSL(A) directly into the text field, and the parser figures out which format you used. Every value below updates together, so switching from a hex code to an HSL string and back never loses the color you started with. The alpha slider only changes the RGBA/HSLA readouts and the swatch behind them, since plain HEX and HSL don't carry transparency on their own.
How format auto-detection actually works
The text field doesn't have a format dropdown, it runs your input through three separate regular expressions in sequence, hex first, then rgb()/rgba(), then hsl()/hsla(), and uses whichever one matches. The rgb/hsl patterns are deliberately permissive about spacing: they accept both the classic comma-separated legacy syntax (rgb(59, 130, 246)) and the newer CSS Color Module 4 space-separated syntax (rgb(59 130 246 / 0.5)), including either a comma or a forward slash before the alpha value. The HSL pattern similarly accepts an optional deg suffix on the hue number, since modern CSS permits hsl(217deg, 91%, 60%) as well as the bare-number form.
Hex can encode alpha too, most people just don't use that form
Alongside the familiar 6-digit and 3-digit shorthand hex, this tool also recognizes 8-digit hex (#rrggbbaa) and 4-digit shorthand (#rgba), where the extra two (or one) characters at the end encode the alpha channel as a 0-255 value converted to a 0-1 fraction. This format is valid, standard CSS and has been supported in every major browser since around 2017, but it's used far less often than rgba() in practice, mostly because it's harder to read transparency at a glance from a hex tail than from an explicit decimal like 0.5. Type an 8-digit hex into the text field and this tool will correctly split out its alpha value into the alpha slider and the RGBA/HSLA rows.
Why the alpha slider is separate from the native color picker
The browser's built-in <input type="color"> element only ever stores and returns a plain 6-digit opaque hex value, there's no way to set or read transparency through it. That's why this tool keeps alpha on its own slider entirely outside the native picker's control, adjusting the picker only updates the RGB portion of the current color, while the alpha slider independently controls the fourth channel used in the swatch preview and the RGBA/HSLA output rows.
The quiet logic that stops your typing from being overwritten
Every render pass normally rewrites the text input to match the current color, which would be disruptive if it happened while you're actively mid-keystroke typing a different but equivalent format. To prevent that, the internal render function takes a skipText flag: when you're typing directly into the text field, it's set to true so your own raw input is left alone, and the five read-only rows below still update live from what you've typed so far. The flag only gets skipped when the change originates from the color picker swatch or the alpha slider, where overwriting the text field with a freshly formatted string is exactly what you'd want.
A precision note on round-tripping between hex and HSL
RGB-to-HSL conversion involves division and trigonometric-style ratio math that doesn't always land on a whole number, and this tool rounds the displayed hue, saturation, and lightness to whole-number degrees and percentages for readability. That means converting a color to HSL and then back to hex can occasionally drift by ±1 in a channel value compared to where you started, a rounding artifact inherent to color space conversion in general, not a bug specific to this tool, every color picker that displays rounded HSL values has the same limitation.
Frequently Asked Questions
How does the tool know if I typed hex, RGB, or HSL?
It tests your input against three regular expressions in order, hex first, then rgb()/rgba(), then hsl()/hsla(), and uses whichever pattern matches. There's no manual format selector, the parser detects the format automatically from the syntax you typed.
Can I type both the legacy comma syntax and the newer space/slash CSS syntax?
Yes, both rgb()/rgba() and hsl()/hsla() patterns accept the classic comma-separated form and the CSS Color Module 4 space-separated form with a slash before the alpha value, along with an optional deg suffix on HSL's hue number.
Does hex support transparency?
Yes, via 8-digit hex (#rrggbbaa) or its 4-digit shorthand (#rgba), where the trailing characters encode alpha. It's valid, well-supported CSS since around 2017, just less commonly used than rgba() since decimal alpha values are easier to read at a glance.
Why is there a separate alpha slider instead of using the color picker directly?
The native HTML color picker input only stores an opaque 6-digit hex value with no transparency support at all. This tool works around that limitation by tracking alpha independently on its own slider, which then feeds into the RGBA, HSLA, and swatch preview.
Will the text field overwrite what I'm typing while I type it?
No, the tool tracks whether an update originated from your typing versus the picker or alpha slider, and skips rewriting the text field when you're the one actively typing, so your raw input stays intact while the other format rows still update live.
Why might converting a color to HSL and back to hex give a slightly different value?
HSL values are rounded to whole-number degrees and percentages for readability, and that rounding can introduce a ±1 drift in an RGB channel when converting back. This is a general property of color space conversion with rounded display values, not specific to this tool.