Free Color Picker & Converter Online
Pick colors and convert between HEX, RGB, and HSL formats. Preview colors in real time.
Color formats are an everyday source of friction in design work: your design tool shows HEX, your CSS framework wants HSL, your designer sent an RGB value over Slack, and your accessibility checker reports contrast in a fourth format. This tool takes a color in any common format — HEX, RGB, or HSL — and shows it in all three at once with a live preview swatch. You can nudge lightness, saturation, or hue and see the other values update instantly, which makes it easy to generate a palette from a single brand color or hand-tune a shade to hit a contrast target.
How to use this color picker & converter
- Enter a color in any format: a hex code like #3B82F6, an RGB triple like rgb(59, 130, 246), or an HSL value like hsl(217, 91%, 60%).
- The other formats and a live swatch update as soon as the value parses.
- Use the picker to drag through the color space visually rather than typing.
- Adjust individual HSL channels to lighten, darken, or shift the hue of a base color.
- Click Copy next to the format you want for your code.
Common use cases
- Converting a brand HEX color into HSL so you can tweak lightness in CSS
- Matching a color from a screenshot to its nearest standard code
- Generating a lighter or darker shade of a base color by adjusting HSL lightness
- Producing an RGB value for a library that does not accept HEX
- Checking that two colors are actually the same when one is written in HEX and the other in RGB
Frequently asked questions
What format should I use in CSS?
All three are valid everywhere modern CSS runs. HEX is the most compact (#3B82F6) and is common in design tools. RGB is easiest to compute with (integers 0-255). HSL is easiest to reason about, since you can tweak hue, saturation, and lightness independently. Pick the one whose axes match the change you want to make.
Why do HEX and RGB look identical but HSL looks different?
HEX is just RGB written in hexadecimal — they encode exactly the same values. HSL reshapes the same color space around hue, saturation, and lightness, which are more perceptually intuitive but describe the same final pixel.
What about alpha (transparency)?
Alpha uses rgba() or hsla() in CSS, or an 8-digit HEX like #3B82F680 (the last two hex digits are the alpha channel). If the tool shows alpha controls, the output will include them; otherwise the values represent fully opaque colors.
Are these values the same as what Photoshop or Figma shows?
Yes, for sRGB colors — the default color space of the web and most design tools. If your design tool is configured for a wide-gamut space like Display P3, the numeric values may differ slightly when the color is converted to sRGB for the browser.
Can I get a color from an image?
This tool converts between formats; it does not sample colors from images. Use your operating system's screen color picker (Digital Color Meter on macOS, or PowerToys Color Picker on Windows) to grab a color off any pixel, then paste the HEX value here.