Toolbox101 All tools

Converters

Convert colors between HEX, RGB and HSL

Color converter reads a color in any common CSS notation and prints it as HEX, RGB and HSL together, with a swatch of the color. Frontend developers use it when a design file hands over #3498db and the code needs rgb(52, 152, 219) or hsl(204, 70%, 53%). It accepts 3, 4, 6 and 8-digit hex with or without the #, rgb() and rgba(), hsl() and hsla(), bare 52 152 219 triples and CSS color names such as rebeccapurple. When there is an alpha value, the output includes it.

Open Color Converter in the app Browse all tools

How to use Color Converter

  1. Open Color Converter in the Toolbox101 app.
  2. Paste a color into the Color box: #3498db, #f80, rgb(52, 152, 219), hsl(204, 70%, 53%) or a color name.
  3. Read the HEX, RGB and HSL lines in the Output box, with a swatch of the color beside them.
  4. Click Copy to take all three lines for your CSS, canvas code or issue comment.

Worked example

Color Converter returns the output below for this input.

Input

#3498db

Output

HEX: #3498DB
RGB: rgb(52, 152, 219)
HSL: hsl(204, 70%, 53%)

Check it yourself: open Color Converter and enter the same input.

Frequently asked questions

Does it handle three-digit shorthand like #fff?

Yes. #fff is expanded to #ffffff, and #f80 to #ff8800. The four-digit form with alpha, #f80a, is expanded the same way.

Can I paste the hex code without the hash symbol?

Yes. 3498db and #3498db give the same result, in upper or lowercase. The output always writes the hex in uppercase with the #.

What happens with an 8-digit hex or an rgba() value?

The alpha channel is kept. #3498dbaa gives HEX: #3498DBAA, an rgba(52, 152, 219, 0.67) line and an hsla(...) line, so nothing is dropped. Fully opaque colors print without an alpha part.

Does it convert RGB and HSL back to hex?

Yes, in every direction: paste whichever notation you have and all three are printed. rgb(52 152 219) with spaces, rgb(20%, 60%, 86%) with percentages and hsl(204deg 70% 53%) all work. A value it cannot read gets a message listing the accepted forms.

Use Color Converter now

Open Color Converter in the app

Runs in your browser. Nothing you type is uploaded.