Palette Studio — Color Palette & Theme Builder Web App

Palette Studio — Color Palette & Theme Builder Web App

A fast, polished color tool for designers, developers, and everyone in between. Browse 1,057 color scales, build a complete UI theme in one click, check contrast and color-blind safety, then export straight to CSS, Tailwind, SCSS, or design tokens. Built with Svelte 5 + Vite and zero-dependency color math — about 43 KB of gzipped JS on the first screen.

What's Included

• Full source code — Svelte 5 components, color math library, data build scripts, and tests
• Offline single-file build — palette-studio.html (~700 KB) with JS, CSS, fonts, and data inlined; double-click to open
• Thai user guide — help.html, a two-column illustrated guide
• Prebuilt palette data — palettes.json and names.json, regenerated with one command

Easy & Pro Modes

• Easy — 5 shades labelled Lightest → Darkest, plain-language readability ("Easy to read / Big text only"), mood chips, and one-click copy
• Pro — all 11 shades (50–950), WCAG 2.2 ratios with AA/AAA, APCA Lc, source and tone filters, every export format

Key Features

• Theme builder — Primary, Secondary, Accent (complementary / analogous / triadic / split), brand-tinted Neutral, plus Success / Warning / Error; lock roles and shuffle the rest, with a live light/dark preview
• 1,057 scales — Tailwind v4, Radix Colors, Open Color, and ~990 generated scales from curated color names
• Smart search — by name, hue, mood, or source; type a #hex to find close matches or generate a scale from it; built-in eyedropper
• Details panel — HEX / RGB / HSL / OKLCH / CMYK / CSS var, contrast vs white and black, and color harmonies
• Mockups — Landing, Dashboard, and Mobile app templates in light/dark UI and three viewport sizes
• Contrast matrix — 13×13 grid in WCAG 2.2 or APCA
• Vision check — protanopia, deuteranopia, tritanopia, and achromatopsia simulation
• Export — CSS variables (with light/dark semantic roles), Tailwind v4 @theme, Tailwind v3 config, SCSS, JSON, W3C Design Tokens (DTCG), SVG, and PNG — in HEX, OKLCH, RGB, or HSL
• Shareable URLs, saved palettes and history, light/dark/system theme
• Keyboard shortcuts — / search, Space random, ←/→ shade, 1–5 tabs, E export

Tech Stack

• Svelte 5 (runes) + Vite
• Zero-dependency color math — OKLab/OKLCH, gamut mapping, WCAG, APCA, color-vision simulation
• Lucide icons, DM Sans + Space Grotesk + JetBrains Mono (self-hosted)
• Virtualized palette list, lazy-loaded views, static output for any host

Perfect For

• UI/UX designers building brand palettes
• Front-end developers who need Tailwind or CSS tokens fast
• Agencies checking client colors for accessibility
• Developers who want a self-hosted color tool or a Svelte 5 reference project

Deploy the static build anywhere — or just open the single HTML file.