Designer Toolkit

Toolkit for designers and developers. Pick colors, grab fonts, check WCAG contrast, simulate color blindness and more.

The essential toolkit for designers and developers. Pick colors, grab fonts, check accessibility, simulate color blindness and inspect styles from any webpage — all in one click. Color Picker - Pick any color from any webpage with one click - View colors in HEX, RGB, HSL, and OKLCH formats - Quick copy with customizable default format - Auto-save to history Typography Inspector - Click any text to grab its font styles - Get font family, size, weight, line-height, and more - Copy individual properties instantly WCAG Contrast Checker - Test foreground/background color combinations - See contrast ratio with AA/AAA pass/fail indicators - Use the color picker or type colors manually Color Blindness Simulator - Simulate how pages appear to people with color vision deficiency. - Anomalous trichromacy (protanomaly, deuteranomaly, tritanomaly) - Dichromacy (protanopia, deuteranopia, trianopia) - Monochromacy (achromatopsia, achromatomaly) Styles Grabber - Select any element on a page - Get its computed CSS in a copyable code block - Great for reverse-engineering designs Settings - Light/Dark theme - Set default color format (HEX, RGB, HSL, OKLCH) - Auto-copy on pick - Configurable history limit Perfect for web designers, UI developers, accessibility auditors, and anyone who needs to quickly grab design details from the web.