Pick, Extract & Generate Colors — Free Online
for Designers & Developers
A complete collection of free online color tools — pick, extract, and generate beautiful colors for your next project.
Most Popular Color Tools
Pick the right tool for your color workflow
Color Palette Generator
- Generate harmonious palettes
- Multiple color theory rules
- Export as CSS / copy codes
Color Converter
- HEX, RGB, RGBA, HSL, CMYK & HSV
- Alpha channel & transparency
- Real-time conversion & copy
Popular Guides & Use Cases
Learn how to use our tools for specific scenarios
Pick Color from Image
Extract exact color codes from any photo, screenshot, or image file
Pick Color from PDF
Extract colors from brand guidelines, reports, and documents
Pick Color from Logo
Extract brand colors from any company logo for web and design
Color Palette for Website
Generate perfect color schemes for your website with CSS export
Why Use Our Color Tools?
Everything you need for color work, all in one place
Instant Color Codes
Our Color Picker lets you select any color and instantly get HEX, RGB, and HSL values.
Extract from Images
With the Image Color Picker, extract colors from any image for your designs.
Harmonious Palettes
Use the Palette Generator to create beautiful color combinations.
Accessible Contrast
Use the Contrast Checker to verify your color combinations meet WCAG accessibility standards.
Which tool do you actually need?
Five tools, one question each. If you can name what you are holding - a screen, a file, a number, a decision - the row below tells you where to go.
| You want to | Use | What comes out | Where it runs |
|---|---|---|---|
| Read the color of a pixel on my display | Color Picker | HEX, RGB, RGBA, HSL, HSLA, HSV and CMYK, plus a history of the last 8 picks | Desktop Chrome, Edge and Opera only |
| Get colors out of an image file | Image Color Picker | The HEX of any pixel you click, and a palette of up to 10 dominant colors | Any browser, phones included |
| Turn one color value into another | Color Converter | Seven notations from one input, including 8-digit HEX with alpha | Any browser |
| Build a set of colors that agree | Palette Generator | Five related colors from six harmony rules, exportable as CSS, SCSS, JSON, SVG, Tailwind or PNG | Any browser |
| Prove text is readable on a background | Contrast Checker | The WCAG ratio plus AA and AAA verdicts for normal and large type | Any browser |
| Choose the colors for a whole site | Color Palette for Website | A worked method for assigning roles to the colors you generated | Read it anywhere |
The EyeDropper API that screen picking depends on is not implemented in Firefox, Safari or any mobile browser. Where it is missing, take a screenshot and use the Image Color Picker - it needs nothing more exotic than a canvas.
Nothing you work on leaves this device
Every tool here is a piece of JavaScript that runs inside your browser tab. The image you drop into the Image Color Picker is decoded by the browser's own File API, drawn onto a canvas, and read back a pixel at a time. There is no upload step in the code, no account to attach a file to, and no server-side copy of anything. The same applies to the Color Picker: the EyeDropper API returns one color to the page and the page keeps it in that tab.
Your colors persist between visits through local storage on the machine you are using, which is why there is no sync feature and no reason to create one. Clearing your browser data removes them, and no one else can see them either way.
The honest exception is measurement: visiting a page sends its address and standard browser metadata to the traffic analytics this site loads. That is a page view, not your work. The exact list of what is collected and how it is anonymised is in the privacy policy.
How a color becomes three numbers
Screens make color by adding light, so every color you see is a recipe of red, green and blue. Each channel is stored as a whole number from 0 to 255, which gives 256 possibilities per channel and 16,777,216 combinations in total. That is the whole of what follows: HEX is simply those same three bytes written in base 16, so #ff5733 is 255 red, 87 green and 51 blue wearing a different notation.
HSL and HSV restate the same triple the way a painter thinks about it - which hue it is, how saturated it is, how light it is - which is why they are easier to reason about when you want a lighter or more muted relative of a color, and why converting between them rounds to whole numbers. CMYK is a different system entirely, describing ink that subtracts light rather than a screen that emits it, which is why a HEX-to-CMYK conversion is a formula rather than a translation.
Alpha - transparency - is a fourth channel, and adding it to a six-digit HEX produces eight characters: #ff573380 is the same orange at half opacity. If you want the arithmetic behind any of it, the Color Converter shows every notation for one value at once.
Frequently Asked Questions
Quick answers to common questions
Explore All Tools
Everything you need for color work, completely free.