Item logo image for colors.codes

colors.codes

5.0(

1 rating

)
ExtensionArt & Design2 users
Item media 5 (screenshot) for colors.codes
Item media 1 (screenshot) for colors.codes
Item media 2 (screenshot) for colors.codes
Item media 3 (screenshot) for colors.codes
Item media 4 (screenshot) for colors.codes
Item media 5 (screenshot) for colors.codes
Item media 1 (screenshot) for colors.codes
Item media 1 (screenshot) for colors.codes
Item media 2 (screenshot) for colors.codes
Item media 3 (screenshot) for colors.codes
Item media 4 (screenshot) for colors.codes
Item media 5 (screenshot) for colors.codes

Overview

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

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.

Details

  • Version
    1.0.0
  • Updated
    April 27, 2026
  • Size
    243KiB
  • Languages
    English
  • Developer
    Juan-Paul du Preez
    Oelixdorfer Straße 63 Itzehoe 25524 DE
    Website
    Email
    simplyoddapps@gmail.com
    Phone
    +49 160 92293830
  • Trader
    This developer has identified itself as a trader per the definition from the European Union and committed to only offer products or services that comply with EU laws.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes
Google apps