For years my color workflow was this: see a color I liked, open Figma, draw a rectangle, eyedrop the color into it, type the hex code underneath. Repeat until the file was a mess of rectangles.
Color picker apps solved half of it. They pick a color and copy the hex code, and then the color is gone. I wanted the rectangles, just without Figma.
So I built PickXColor: a free color picker where every color you pick lands on an infinite board.
What it does
- Press I and click any pixel on your screen. It uses the browser's EyeDropper API, so it works outside the browser tab too (Chrome, Edge and other Chromium browsers; Safari and Firefox get the system picker).
- Each color becomes a card named after the closest of about 5,000 color names.
- Click a card for HEX, RGB, HSL, HSV, OKLCH and CMYK values, Tailwind-style shades, WCAG contrast, and export code for CSS, Tailwind, SCSS, SwiftUI, Jetpack Compose and design tokens.
- Group cards with ⌘G, duplicate them, undo, pan and zoom. It's meant to feel like a design tool.
Decisions I made
- No account. The board lives in your browser's local storage. That keeps the app free to run (it's a static site) and means there's nothing to sign up for.
- Paste anything. ⌘V accepts HEX, rgb(), hsl(), oklch() and CSS color names, in bulk. ⌘C copies a selection as a hex list you can paste anywhere.
- Names over numbers. "Radical Red" is easier to talk about in a design review than #FF385C.
What's next
If you work with color, I'd love your feedback: https://pickxcolor.com. What's the one thing you'd want on a color card that isn't there?
Top comments (0)