Free tool · Color
← All toolsColor picker with HEX, RGB and HSL.
Pick a color, dial in the alpha, and copy it in whichever notation your code needs. Paste a hex code to start from a known value.
- Privacy
- Runs in your browser. Nothing is uploaded.
- Account
- None needed.
- Price
- Free.
Click a row to copy.
How it works
- 01
Pick
Drag in the square for saturation and lightness, the first bar for hue, the second for opacity.
- 02
Or type
Paste a hex such as #0ea5e9 or 0ea5e9 into the field and the picker jumps to it.
- 03
Copy
Click any row to copy HEX, RGB, HSL or a ready CSS declaration.
About
What this tool does
An online color picker for people who end up pasting the value into code. Everything you can copy is already in a valid syntax: a six- or eight-digit hex, rgb() or rgba(), hsl() or hsla(), and a CSS color declaration.
Opacity is part of the picker, so a translucent overlay or a tinted border can be chosen visually and copied as rgba or an eight-digit hex. The swatch shows the result over both a light and a dark surface, which is the quickest way to judge a semi-transparent color.
To take a color from a photo or screenshot instead, use the image color picker, which samples pixels and builds a palette from the file.
Walkthrough
Under a minute.
Questions
- They describe the same color. HEX and RGB are the channel values your screen uses; HSL expresses hue, saturation and lightness, which is easier to adjust by hand.
More tools
Image color picker
Pull a palette from any image. Click to copy.
App icon generator
App icons at every size from one artwork.
MRR meter
An ASCII progress bar for your MRR, ready to paste in a tweet.
Need a finished mockup rather than a quick edit? Open the editor and drop the same image.
Featured on Hacker News, Product Hunt, Reddit and Peerlist.