Colorscodes

colors.codes — the definitive color library for the web, as a side panel workspace.

A complete color toolkit that lives next to the page you're working on. Open it from the toolbar (or Alt+Shift+C / ⌥+Shift+C) and the side panel rides along as you browse — picking, organizing, and exporting colors without breaking your flow.

What's inside

1) EyeDropper — pixel-accurate color picking from anywhere on the page (or any visible window via Chrome's native picker).
2) Inspector — see every color the active page actually uses: extracted from CSS, gradients, design- system tokens (including adoptedStyleSheets), and dominant image colors.
3) Palette builder — collect colors into named palettes. Drag to reorder, edit on the fly, autosave to local storage.
4) Image — drop or paste an image, sample its dominant colors, build a palette from a photo or screenshot.
5) Harmony — generate complementary, analogous, triadic, and split-complementary schemes from any base color.
6) Contrast — WCAG AA/AAA contrast checker with live preview and pass/fail per text size.
7) Tailwind export — turn any palette into a @theme block (Tailwind v4) or tailwind.config extension (v3) with auto-generated semantic names. Includes an alpha-stops mode for opacity scales.
8) Gradient — visual gradient builder with live OKLCH/HSL/RGB interpolation.
Color creator — full HSL / OKLCH / hex editor with format conversion.
9) History & favorites — every color you pick is saved locally; star the ones you love.
10) Curated library — hundreds of named colors organized by mood, family, and tag, browsable inside the panel.

Built for designers and developers

a) Works on any site — no account required.
b) Everything stays on your device. No analytics, no tracking, no servers.
c) Light and dark themes; respects prefers-reduced-motion.
d) Keyboard-first: Alt+Shift+C / ⌥+Shift+C opens the panel; ? shows shortcuts.

What's new in 1.0.0

Complete rebuild from the ground up as a side-panel workspace (the previous popup release stays available for users who prefer that flow). New tools: Tailwind export, Harmony, Gradient builder, Image color extraction, Color creator. Refreshed dark UI, OKLCH-native color pipeline, IndexedDB-backed persistence for palettes and history.

Privacy

No data ever leaves your browser. No accounts, no analytics, no third-party scripts. The extension uses local storage (IndexedDB) for your palettes, history, and favorites — and that's it.

Visit colors.codes for the web library and color games.