Converts a colour between HEX, RGB, RGBA, HSL, and HSLA at once. Fast, free, and built for simple browser-based workflows.
Enter a colour in any format, then click Convert Colour.
728 x 90 In-Content Ad
Color Converter is a free online tool that converts a colour between HEX, RGB, RGBA, HSL, and HSLA at once. Type a colour in any format -- or pick one visually -- and every equivalent value appears immediately, ready to copy into your CSS.
It is useful when a designer hands you a colour as a HEX code but your codebase uses HSL for easier lightness adjustments, when you are matching a brand colour from a style guide that only lists RGB values, or when you need to add transparency to an existing solid colour and want the RGBA or HSLA equivalent without doing the math by hand.
Everything runs inside your browser, so the colours you convert are never sent to a server or logged anywhere. That makes no real difference for a public brand colour, but it means you can paste in colours from an unreleased design or private style guide without a third party ever seeing them.
Type a value into Colour Value (HEX, RGB, HSL, or a name like tomato), or use the colour picker instead.
Or just press Enter in the Colour Value field -- both trigger the same conversion.
See the swatch, all six output formats, and whether light or dark text suits the colour.
Click the copy icon beside any format, or click a shade in the strip below to copy its HEX.
Yes! All our tools are 100% free to use with no hidden costs, no registration required, and no credit card needed.
Absolutely. All tools run entirely in your browser (client-side). Your data never leaves your device and is not sent to our servers.
Yes, once the page is loaded, the tool will continue to work even if you lose internet connection since it runs in your browser.
There is no strict character limit, but very large amounts of text (100,000+ characters) may slow down your browser.
Yes! All our tools are free for both personal and commercial use.
HEX in 3, 4, 6, or 8 digit form, rgb()/rgba(), hsl()/hsla(), and any of the 148 standard CSS colour names like rebeccapurple or tomato. The browser's own colour engine resolves each one, so anything valid in a stylesheet works here too.
They are the same colour mixed toward black or white in fixed steps, from -60% to +80%, giving you a quick set of lighter and darker variants for hover states, borders, or backgrounds without picking each one by hand.
It calculates the colour's relative luminance from its red, green, and blue values. Brighter colours get a "use dark text" recommendation; darker colours get "use light text" -- the same logic behind accessible contrast checks.
Yes. If you enter an 8-digit HEX, rgba(), or hsla() value with an alpha channel, that transparency carries through to every output format, including the alpha-aware HEX result.
The value has to be a form the browser itself recognises as a valid CSS colour. Check for typos or a missing comma in rgb()/hsl() -- the error message suggests a working example format.
No. Picking a colour just fills the same input with its HEX value and runs the same conversion, so both methods produce identical results.