Project 19, Modern UI
Color Picker and Palette Tool
Grab a color from anywhere on your screen, or drop in a photo and get its main colors. Then build shades, harmonies and check if text will be readable.
- Main API
- EyeDropper
- Also uses
- Canvas, Clipboard
- Dependencies
- None
- Your browser
- Checking
Pick a color
Palette from a photo
Drop a photo or click. Try a sample:
Harmonies
Shades
Text contrast
How it works
- Pick a colorThe EyeDropper returns the hex value of any pixel on screen, even outside the browser window.
- Read a photoThe photo is shrunk to 64 by 64 pixels, then the pixels are grouped into buckets to find the main colors.
- Check contrastEach color's luminance is compared with the text color to get a ratio, and the page marks AA and AAA passes.
// Pick any pixel on screen (Chrome, Edge)
const { sRGBHex } = await new EyeDropper().open(); // "#c2255c"
// WCAG contrast ratio between two colors
const lum = ([r, g, b]) => {
const f = (c) => (c /= 255) <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
};
const ratio = (a, b) => (Math.max(lum(a), lum(b)) + 0.05) / (Math.min(lum(a), lum(b)) + 0.05);
// 4.5 or more passes AA for body text