ColorPickr: Contrast Checker & Design System

Pick colors, check contrast on any page, and build a design system from one brand color.

ColorPickr lives in Chrome’s side panel and stays open while you work. Pick any color on screen and copy it in the format your work needs, from everyday HEX and RGB to wide-gamut spaces like OKLCH and Display P3. Check contrast against any background and get the closest color that passes, with the hue kept. Hover check shows the contrast of any text you point at. The page palette lists every color a site uses, most used first. With ColorPickr Pro: Page Check reads every piece of text on the page against the background it really sits on, ranks the problems, and outlines them on the page with a suggested fix. Design System turns one brand color into full 50 to 950 scales with success, warning, error and info colors, and flags any pair that blurs together for color-blind users. Export ready-to-use themes for Tailwind, CSS and Figma, in light and dark modes. Color vision preview shows the whole page as people with red, green or blue color blindness see it. Pro is a 14-day free trial, then $19.99 once. One key covers the ColorPickr Mac app and this extension on up to 3 devices. No account. No tracking. Colors stay on your machine.