🎨 Color Stash

A tiny, private color tool for prototyping. Build a personal bank of hex colors, preview them live, and jump back to them instantly.

Live: colorstash.kosta.lol

Why

• Lightweight & static — plain HTML/CSS/JS, no build step, no framework.
• Private — no tracking, no accounts. Your palette lives in your browser's localStorage and never leaves the device.
• Installable & offline — a PWA with a service worker; make zero external network requests and works with no connection at all.
• Deploy anywhere — it's just files. GitHub Pages, Glitch, or any static host.

Features

• Hex input with live validation, plus a native color picker
• Big live preview with HEX / RGB / HSL readouts (click any value to copy)
• WCAG contrast ratings (against white and black, AA / AAA)
• Shades & tints strip generated from the current color
• Color harmonies (complementary, triadic, analogous), one click to apply
• Eyedropper to pick any color on screen (where supported)
• Extract a palette from an image — drop, paste, or pick a photo and its dominant colors are read entirely on-device (canvas + median-cut); the image is never uploaded
• Save, name, reorder (drag), copy, and delete colors from a personal stash
• Share a palette via a link (colors encoded in the URL hash)
• Export / import your palette (with names) as a JSON file, or copy it as developer tokens — CSS variables, OKLCH, SCSS, Tailwind config, or W3C design-token JSON
• Random color generator
• Hexle — a daily color guess: everyone gets the same mystery color (seeded from the date, no server), pick its hex from five options, three wrong guesses lose the day. Streaks and a Wordle-style shareable result
• Three-way theme toggle: system · dark · light
• Toast notifications and smooth micro-animations (respects prefers-reduced-motion)
• Fully responsive, keyboard-accessible, installable as a PWA

Run locally

No dependencies to install. Serve the folder with any static server, e.g.:

python -m http.server 8000
# then open http://localhost:8000

Opening index.html directly works too.

Project structure

index.html               # markup, document head, inline SVG icon sprite
manifest.json            # PWA manifest
sw.js                    # service worker (cache-first, offline)
src/css/styles.css       # all styling (custom-property theming)
src/js/main.js           # core app + shared color helpers (vanilla JS)
src/js/export-pack.js    # feature: developer token export menu
src/js/image-palette.js  # feature: on-device image → palette extraction
src/js/hexle.js          # feature: the daily Hexle game
src/assets/fonts/        # self-hosted JetBrains Mono (woff2)
src/assets/icons/        # PWA / app icons (PNG)

Each feature lives in its own file. They load as plain <script defer> after main.js (no build step, no modules — so opening index.html over file:// still works) and share main.js's global color helpers.

Icons are an inline SVG sprite (from Lucide, ISC) and the font is self-hosted — so the app makes zero external network requests.

Deploy note: the service worker precaches assets under CACHE_NAME in sw.js. Bump that version string whenever you change any cached file, so returning visitors pick up the new build instead of a stale cache.

Roadmap

Planned improvements are tracked in IMPROVEMENTS.md (named colors, JSON export/import, color harmonies, drag-to-reorder, and more).

License

See LICENSE.md.