The latest articles on DEV Community by Mike (@mikepick). https://dev.to/mikepick https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4199184%2F3d32c29b-4bdb-439a-aecc-cbe438de23b1.png https://dev.to/mikepick en Mike Wed, 21 Oct 2026 21:22:05 +0000 https://dev.to/mikepick/i-kept-drawing-rectangles-in-figma-to-save-colors-so-i-built-a-color-board-1k87 https://dev.to/mikepick/i-kept-drawing-rectangles-in-figma-to-save-colors-so-i-built-a-color-board-1k87 <p>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.</p> <p>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.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F08gx6a9ki1okrnhod978.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F08gx6a9ki1okrnhod978.png" alt=" " width="800" height="479"></a></p> <p>So I built PickXColor: a free color picker where every color you pick lands on an infinite board.</p> <h2> What it does </h2> <ul> <li>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).</li> <li>Each color becomes a card named after the closest of about 5,000 color names.</li> <li>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.</li> <li>Group cards with ⌘G, duplicate them, undo, pan and zoom. It's meant to feel like a design tool.</li> </ul> <h2> Decisions I made </h2> <ul> <li> <strong>No account.</strong> 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.</li> <li> <strong>Paste anything.</strong> ⌘V accepts HEX, rgb(), hsl(), oklch() and CSS color names, in bulk. ⌘C copies a selection as a hex list you can paste anywhere.</li> <li> <strong>Names over numbers.</strong> "Radical Red" is easier to talk about in a design review than #FF385C.</li> </ul> <h2> What's next </h2> <p>If you work with color, I'd love your feedback: <a href="https://pickxcolor.com" rel="noopener noreferrer">https://pickxcolor.com</a>. What's the one thing you'd want on a color card that isn't there?</p> design resources webdev