Color Converter

Convert colors between HEX, RGB, and HSL formats, with a handy color picker.

About this tool

Convert a color between HEX, RGB and HSL, the three formats that come up in CSS, design handoffs and image code. Drag on the picker or type a HEX value and the other two update at once, each with its own copy button. It is a quick way to turn a hex code from a style guide into the rgb() or hsl() value your stylesheet needs.

How to use it

  1. Drag on the saturation/value square and hue slider to pick a color, or type a HEX value directly.
  2. RGB and HSL values update automatically to match.
  3. Copy any of the three formats with its dedicated copy button.
  4. Click a preset swatch to jump straight to a common color.

FAQ

What's the actual difference between RGB and HSL?

RGB defines a color by its red/green/blue light components; HSL defines it by hue (the color itself), saturation (intensity), and lightness — HSL is often more intuitive for tasks like "make this color 20% darker" since you just adjust one number.

Why would I need HEX vs RGB vs HSL specifically?

HEX is the most common format in CSS and design tools; RGB is used when you need individual channel values (e.g. for canvas/image manipulation); HSL is convenient when generating color variations programmatically.

Can I type a short hex code like #fff?

Yes. Three-digit and six-digit hex values are accepted, including the leading #. A three-digit value is expanded by doubling each digit, so #1a8 is treated as #11aa88.

Does it support transparency, rgba() or eight-digit hex?

No. The converter works with opaque colors: HEX, RGB and HSL without an alpha channel. If you need transparency, convert the color here and add the alpha value in your CSS, for example rgb(30 144 255 / 50%).

Why can an HSL value convert back to a slightly different color elsewhere?

The HSL numbers are shown as whole numbers, so they are rounded. If you paste the HSL value into another tool and convert it back, a channel can land one step away from the original. Keep the HEX or RGB value as the source of truth and use HSL for exploring variations.

How do I make a color lighter or darker?

Drag the marker in the picker square down for a darker shade or toward the top-left for a lighter one, keeping the hue slider where it is, and read the lightness (the last number in the HSL value) to see the change. Then copy the HEX, RGB or HSL result. HSL is read-only here, so type a HEX value if you want to set an exact color.

Related tools

Guides & comparisons

← All tools · Converters · Blog · Cheat sheets · FAQ