Color Picker

How to Pick a Color

1. Open the picker. Click the colored bar to bring up your system's color selector.
2. Choose your color. The large swatch above updates as you go, so you can see the color at a usable size rather than in a tiny square.
3. Read the codes. The HEX, RGB, and HSL values for your color are listed underneath.
4. Copy what you need. Click the copy button next to any format to put that value on your clipboard.

What This Tool Does

Picking a color is easy; getting it into the format your project expects is the fiddly part. This tool gives you all three common CSS notations for the same color at once, so you can grab a HEX for a stylesheet, an RGB value for a script, or an HSL value for building a set of tints — without converting anything by hand.

Everything runs entirely inside your browser, with no account and no upload.

HEX, RGB, or HSL — Which Should You Use?

HEX is the shorthand you'll see most often in CSS and design tools: six characters describing how much red, green, and blue go into the color. It's compact and universally understood, which makes it the default for most work. RGB describes the same three channels as numbers from 0 to 255, and its rgba() form adds an alpha value, so it's the natural choice when you need transparency.

HSL works differently, describing a color by hue, saturation, and lightness. That makes it far easier to reason about relationships between colors: keep the hue and saturation, change only the lightness, and you have a lighter or darker version of the same color. If you're building a palette of tints and shades for a design system, HSL will save you a lot of guesswork. All three describe the same color — pick whichever fits the job.

Frequently Asked Questions