colors.codes

Tracking since Apr 21, 2026.

Changelog

• May 3, 2026
  description

  What's new in v0.2.0 (April 2026)
  
  • Inspector mode — hover anywhere on the page, the popup's live swatch mirrors your cursor color in real time. Click the swatch to capture.
  • oklch() and lab() support — the parser now handles modern wide-gamut and perceptual formats.
  • CSS custom-property (design token) detection — works on shadcn/ui and other sites that declare tokens via adoptedStyleSheets.
  • Paste lookup — paste any color string into the popup to resolve it instantly.
  • Redesigned preview card.
  • Parser memoized — heavy pages grid-render ~10× faster.
  • Upgrade-safe content script teardown.
  
  ———
  
  colors.codes pulls the exact palette off any webpage in two clicks — and now tells you what those gnarly modern CSS formats actually are.
  
  Click the toolbar icon on any site. See the most-used colors on the page, each with a real name (not "color #3B5998") and hex code. Select 2–12 to build a palette, then open it on colors.codes to copy as a HEX list, CSS variables, Tailwind config, or a shareable URL.
  
  Inspector mode: flip it on, hover your cursor over any element on the page, and the live swatch in the popup mirrors whatever color is under your cursor in real time. Click the swatch to capture it to your history.
  
  Also ships a native eyedropper (Ctrl/Cmd+Shift+C) — pick any pixel on screen and jump straight to that color's page. Or just paste any color string (hex, rgb, hsl, oklch, lab) into the popup to look it up instantly.
  
  What you get on colors.codes:
  • Real names for every color — not just the curated ones
  • Mood tags, tints, shades, harmonies
  • Related colors and side-by-side comparisons
  • Every hex is a URL — /color/3b5998 works out of the box
  
  What makes it different:
  • Understands modern CSS: oklch(), lab(), color(display-p3 …) — the formats most pickers silently drop
  • Detects CSS custom properties (design tokens) even when they're declared via adoptedStyleSheets — works on shadcn/ui and other modern component libraries where other extensions see nothing
  • No data leaves your browser. No account. No tracking.
  • One-click extraction, no design-tool integration needed
  • Works on any site — no host permissions required
  
  Permissions:
  • activeTab — reads computed styles on the page you're viewing, only when you click the icon or activate Inspector mode
  • scripting — walks the DOM to extract colors, and injects the Inspector content script when you turn it on
  • storage — stores your last 24 picks and saved palettes locally in extension storage. Nothing is uploaded.
  
  No host permissions. Nothing runs in the background without you.

  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.

• May 3, 2026
  short_description

  Grab every color from any page, inspect colors on hover, pick with the eyedropper, copy in any format, save shareable palettes.

  The definitive color library for the web — as a side panel workspace.

• May 3, 2026
  host_permissions

  (empty)

  <all_urls>

• May 3, 2026
  permissions

  activeTab, scripting, storage

  sidePanel, scripting, storage, activeTab

• Apr 26, 2026
  description

  colors.codes pulls the exact palette off any webpage in two clicks.
  
  Click the toolbar icon on any site. See the most-used colors on the page, each with a real name (not "color #3B5998") and hex code. Select 2–12 to build a palette, then open it on colors.codes to copy as a HEX list, CSS variables, Tailwind config, or a shareable URL.
  
  Also ships a native eyedropper — pick any pixel on screen and jump straight to that color's page.
  
  What you get on colors.codes:
  • Real names for every color (not just the curated ones)
  • Mood tags, tints, shades, harmonies
  • Related colors and side-by-side comparisons
  • Every hex is a URL — /color/3b5998 works out of the box
  
  What makes it different:
  • No data leaves your browser. No account. No tracking.
  • One-click extraction, no design-tool integration needed
  • Works on any site — no host permissions required
  
  Permissions:
  • activeTab — reads computed styles on the page you're viewing, only when you click the icon
  • scripting — needed to walk the DOM and extract background/text colors
  
  No host permissions. Nothing runs in the background.

  What's new in v0.2.0 (April 2026)
  
  • Inspector mode — hover anywhere on the page, the popup's live swatch mirrors your cursor color in real time. Click the swatch to capture.
  • oklch() and lab() support — the parser now handles modern wide-gamut and perceptual formats.
  • CSS custom-property (design token) detection — works on shadcn/ui and other sites that declare tokens via adoptedStyleSheets.
  • Paste lookup — paste any color string into the popup to resolve it instantly.
  • Redesigned preview card.
  • Parser memoized — heavy pages grid-render ~10× faster.
  • Upgrade-safe content script teardown.
  
  ———
  
  colors.codes pulls the exact palette off any webpage in two clicks — and now tells you what those gnarly modern CSS formats actually are.
  
  Click the toolbar icon on any site. See the most-used colors on the page, each with a real name (not "color #3B5998") and hex code. Select 2–12 to build a palette, then open it on colors.codes to copy as a HEX list, CSS variables, Tailwind config, or a shareable URL.
  
  Inspector mode: flip it on, hover your cursor over any element on the page, and the live swatch in the popup mirrors whatever color is under your cursor in real time. Click the swatch to capture it to your history.
  
  Also ships a native eyedropper (Ctrl/Cmd+Shift+C) — pick any pixel on screen and jump straight to that color's page. Or just paste any color string (hex, rgb, hsl, oklch, lab) into the popup to look it up instantly.
  
  What you get on colors.codes:
  • Real names for every color — not just the curated ones
  • Mood tags, tints, shades, harmonies
  • Related colors and side-by-side comparisons
  • Every hex is a URL — /color/3b5998 works out of the box
  
  What makes it different:
  • Understands modern CSS: oklch(), lab(), color(display-p3 …) — the formats most pickers silently drop
  • Detects CSS custom properties (design tokens) even when they're declared via adoptedStyleSheets — works on shadcn/ui and other modern component libraries where other extensions see nothing
  • No data leaves your browser. No account. No tracking.
  • One-click extraction, no design-tool integration needed
  • Works on any site — no host permissions required
  
  Permissions:
  • activeTab — reads computed styles on the page you're viewing, only when you click the icon or activate Inspector mode
  • scripting — walks the DOM to extract colors, and injects the Inspector content script when you turn it on
  • storage — stores your last 24 picks and saved palettes locally in extension storage. Nothing is uploaded.
  
  No host permissions. Nothing runs in the background without you.

• Apr 26, 2026
  short_description

  Grab every color from any page, get real names, save as a shareable palette on colors.codes.

  Grab every color from any page, inspect colors on hover, pick with the eyedropper, copy in any format, save shareable palettes.

• Apr 26, 2026
  permissions

  activeTab, scripting

  activeTab, scripting, storage

Permissions & access

Permissions

sidePanelscriptingstorageactiveTab

Host access

<all_urls>

Screenshots