🎨 ColorPicker Studio

Interactive color wheel, scheme designer, font pairing, and style guide exporter — runs entirely in your browser.

Everything is local. No accounts, no API calls. Themes save to your browser's local storage. Exports generate client-side using jsPDF and docx.js.

🎨 Color Wheel

Click or drag on the wheel to set your base color's hue and saturation. Use the Lightness slider below for lightness. The slider above Lightness controls saturation independently. All color fields (HEX/RGB/HSL/HSV/CMYK) update in real time.

Click a HEX field to type a color directly (e.g. #6c5ce7)
Copy button (📋) next to each field copies the value to clipboard
Name field shows the nearest CSS named color

🎭 Scheme Designer

Generate a harmonic color palette from the base color.

Scheme	What it does
Analogous	Colors within `hue-spread` degrees of base. Soft, harmonious feel.
Complementary	Base + opposite (180° away). High contrast.
Split-Complementary	Base + two colors adjacent to its complement. Balanced tension.
Triadic	Three colors equally spaced (120° apart). Vibrant.
Tetradic	Rectangle on the wheel. Rich, complex.
Square	Four colors 90° apart. Bold.
Monochromatic	Same hue, varying lightness. Minimal.
Shades	Darker variants of base.
Tints	Lighter variants of base.
Evenly Spaced	N colors at equal hue intervals around the full wheel.

Pick a color count (3, 5, 7, or 9). Click any swatch in the result grid to promote it as the new base color.

🏷️ Color Roles

Map each generated color to a design role: Primary, Secondary, Accent, Background, Surface, Text, Muted. Roles drive the Style Guide preview and all exports. Roles auto-assign intelligently based on lightness (darkest = text, lightest = background) but you can override any with the dropdowns.

🔤 Font Chooser

Browse ~40 fonts across Sans, Serif, Display, Mono, Handwriting, and System categories. Popular Google Fonts (Inter, Roboto, Montserrat, Playfair, Bebas Neue, JetBrains Mono, Pacifico, etc.) are preloaded from Google's CDN. System fonts (Arial, Georgia, Helvetica, etc.) need no download.

Click a category chip to filter
Click a font card to select
Click Assign selected to Heading or Assign selected to Body

Tip: The classic pairing advice is "sans-serif for body, serif for headings" — or the reverse. Try Playfair Display + Inter, or Montserrat + Lora.

👁️ Style Guide Preview

Live rendering of your theme applied to real UI elements: headings H1–H4, body paragraphs, muted text, four button styles (primary/secondary/accent/outlined), a card component with labels, and inline code samples. Edit any color or font above and the preview updates immediately.

Give your theme a name at the top of this section, then click 💾 Save theme to stash it to local storage.

🖼️ Extract Palette from Image

Drop any image file. ColorPicker runs a k-means color clustering algorithm on the pixels to extract 5, 7, or 9 dominant colors. Click any extracted swatch to promote it to your base color and scroll back to the wheel.

Works with JPEG, PNG, WebP. Large images are auto-downscaled to 300px before clustering for speed.

♿ Contrast Checker

Automatically tests key pairs in your scheme against WCAG 2.1 contrast ratios:

Level	Normal text	Large text
AA	4.5:1	3:1
AAA	7:1	4.5:1

Green badges pass, red fail. If a pair fails, adjust lightness or swap the role assignment.

💾 Saved Themes

Themes save to browser local storage. Each entry records the base color, scheme settings, role map, and font choices. You can:

Load — apply any saved theme
Delete — remove individual themes
Export all as JSON — download your whole theme library
Import JSON — add themes from a saved file
Clear all — nuke everything

Local storage is per-browser. Clearing browser data deletes your themes. Use the JSON export for backups.

📤 Export Formats

Format	Contents	Best for
HTML	Self-contained HTML page with palette, roles, typography samples, components, and CSS tokens	Sharing, archiving, web preview
PDF	Multi-page printable style guide with swatches, roles table, type samples, CSS tokens	Print, client delivery
DOCX	Word document with colored tables for swatches and roles, heading/body type samples	Brand books, editable delivery
CSS	Pure CSS file with `--color-*` custom properties and font variables	Drop into a web project
Tailwind	`tailwind.config.js` snippet extending theme colors and fonts	Tailwind projects
JSON	Design tokens in a portable JSON format	Tool-to-tool transfer, custom pipelines

⌨️ Tips & Tricks

Start with an image. Drop a photo you like → extract its palette → click a swatch to base your scheme on it.
Generate, then refine. Let the scheme designer propose colors, then click a good one to rotate the whole scheme around it.
Use "Shades" or "Tints" mode when you need a ramp (like Tailwind's 50–900 scale) from a single base color.
Check contrast first. Scroll to the Contrast section before exporting — fixing accessibility issues later is a pain.
Export CSS + Tailwind together — they give you drop-in tokens for almost any web project.
PDF for client approval, DOCX for editing. PDFs are final; DOCX is editable if the client wants to rename tokens or add notes.

🛠️ Troubleshooting

Fonts look wrong in the preview

Google Fonts may take a second to load on first visit. Wait a moment and the previews will reflow.

PDF/DOCX export fails or looks empty

Both exports rely on CDN libraries (jsPDF, docx.js) loaded from jsdelivr. Check your internet connection and browser console. Ad blockers occasionally block CDN scripts.

Image extract shows muddy browns

K-means is sensitive to the sample set. Try a different image crop, or increase to 7–9 colors to get more diverse results.

My theme disappeared

Browser cleared its local storage (common with privacy mode or "clear cache"). Next time, use Export all as JSON to back up your themes.

← Back to ColorPicker Studio