ColorDojo：スポイトツール＆カラーピッカー 作成者: Caravaca Labs

Eyedropper tool and color picker extension for Chrome: pick screen colors privately, copy OKLCH, match Tailwind v4, check contrast.

ColorDojo is a private eyedropper tool and color picker extension for developers who need OKLCH, Tailwind matches, and a contrast checker without permanent access to every site. Pick a pixel, copy the value, and keep working.

PICK ONCE, COPY THE FORMAT YOU USE

Choose any screen pixel with Chromium's native eyedropper. ColorDojo shows hex, RGB, HSL, HSV, OKLCH, and Display P3, plus the nearest CSS named color, then copies your default format automatically when auto-copy is enabled. As an rgba color picker it keeps the alpha channel on pasted and imported colors: 8-digit hex or rgb() with alpha, in modern slash or legacy comma syntax. The Alt+Shift+P command puts the pick action under your keyboard, and the toolbar badge turns into a dot of your last picked color.

EDIT CHANNELS BEFORE YOU COMMIT

Picked a color that is almost right? The Edit tab is an HSL color picker with sliders: tune RGB, HSL, or HSV channels, watch the Selected vs new comparison as you drag, then apply. Formats, the Tailwind token, and contrast checks all follow the applied color.

AN EYEDROPPER FOR MAC, WINDOWS, AND LINUX

ColorDojo is an eyedropper extension for every desktop Chrome: the native eyedropper covers screen picks where Chromium provides it. Where it does not, the in-page loupe takes over: a 16x magnifier that samples a single pixel, averages a 3x3, 5x5, 11x11, or 25x25 block, or averages any area you drag. The loupe runs only on the active page and only after your click.

STAY INSIDE THE DESIGN SYSTEM

Every pick is compared locally against the bundled Tailwind CSS v4 palette. ColorDojo shows the closest token, its perceptual delta, paired swatches, and copy actions for both blue-600 and var(--color-blue-600) forms. That is the Tailwind color picker half; theme extraction adds a Tailwind color generator that writes a complete @theme block from the page you are viewing.

CHECK CONTRAST BEFORE THE AUDIT

The built-in WCAG contrast checker shows ratios against white and black the moment you pick. Pair any active color with a history color for WCAG 2.2 AA, large-text, and AAA checks, advisory APCA Lc, and a nearest-lightness suggestion when normal text misses AA.

EXTRACT THE COLORS A PAGE ACTUALLY USES

Run theme extraction only on the active page. ColorDojo combines accessible CSS custom properties with a sampled computed-style census, clusters near-duplicate colors into an OKLCH color palette, and exports CSS variables, a Tailwind v4 @theme block, W3C Design Tokens JSON with OKLCH components, or a plain list in the format you choose.

CONVERT HEX TO OKLCH WITHOUT A CONVERTER TAB

Paste #ef4444, hsl(0 84% 60%), cmyk(0 72 72 6), or oklch(60% 0.2 30) into the palette importer and copy every entry back in the format you need: hex to OKLCH, OKLCH to hex, or HSL to OKLCH, offline, inside the popup.

NO BROWSING-DATA PIPELINE

ColorDojo is a color picker for Chrome with no all-sites host permission and no persistent content script. Inspect and extraction use Chrome's temporary active-tab grant only after your click. The extension makes zero runtime network requests; history and palettes remain in Chrome storage.

The next time a pixel catches your eye, press Alt+Shift+P and bring its color straight into your code.