How ChromaKit Works
No servers, no accounts, no uploads — every palette, contrast score and export on ChromaKit is computed on your device, right in the browser. Here is exactly how.
The short version
- Enter an idea or a color. Type a prompt like “ocean blue”, pick a color with the native picker, or paste any HEX, RGB or HSL value.
- Generate. The harmony engine builds a five-color palette around your input using real hue math — instantly, because nothing is sent to a server.
- Customize and lock. Edit any swatch and regenerate the rest as often as you like; locked colors stay put while everything around them changes.
- Check accessibility. The contrast checker scores your color pairs against WCAG AA and AAA thresholds for text and UI elements.
- Copy or export. Grab HEX, RGB, HSL or CSS variables, download PNG, SVG, JSON or CSS, or save the palette in your browser.
How prompt understanding works
ChromaKit is honest about its “AI”: it is a built-in interpreter that runs on your device, not a chatbot in the cloud. The tool ships with a dictionary of color-related keywords, grouped into families such as materials, nature, moods and styles. Every entry maps to ranges of hue, saturation and lightness. When you type a prompt, ChromaKit scans it for dictionary matches and builds the palette inside those ranges.
Take “ocean blue”: the keywords steer the hue toward blue with moderate saturation, spread across lightness from deep sea to seafoam. “Luxury gold” lands on warm amber hues with rich saturation, plus the deep tinted neutrals that make metallic palettes feel expensive.
Prompts with no dictionary matches do not fail — they fall back to a seeded pleasant palette, so the same prompt always produces the same tasteful starting point. And because the whole lookup is plain JavaScript running locally, no request ever leaves the browser.
How harmony math works
Every color is handled in HSL, which makes the classic harmony rules into simple hue rotations: keep saturation and lightness broadly stable, then move around the color wheel. Complementary adds 180°, split complementary adds 150° and 210°, triadic adds 120° and 240°, tetradic adds 90° and 270°, and analogous steps ±30° on either side of the base hue. Random mode spreads hues evenly so results stay balanced rather than muddy.
A generated palette defaults to five colors: three chromatic swatches from the harmony math, plus a light tinted neutral for backgrounds and a dark tinted neutral for text. Both neutrals carry a trace of your base hue, which is why the result feels cohesive instead of plain black and white bolted onto color.
How contrast checking works
WCAG measures the difference between two colors as a ratio of their relative luminance. Luminance converts each RGB channel to a linear scale and weights it — green counts for roughly 71%, red for 21% and blue for 7% — because human eyes are most sensitive to green. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two colors; perfect black on white scores 21:1.
The thresholds are 4.5:1 for normal text (AA), 3:1 for large text and essential UI elements (AA), and 7:1 for AAA normal text. ChromaKit computes the ratio live and flags each target as pass or fail as you edit. For the full rules — and the common ways palettes fail them — read the WCAG color contrast guide.
How image extraction works
When you drop in a JPG, PNG or WebP, the file is read with the FileReader API and drawn onto a small canvas, so there are far fewer pixels to crunch. A median-cut style quantization then repeatedly splits the color space around its densest clusters, and the most frequent buckets are returned as the dominant colors, with near-duplicates merged. Because FileReader and Canvas are local browser APIs, the image is never uploaded — you could go offline after loading the page and extraction would still work.
How exports are generated
Exports are strings assembled in JavaScript. CSS variables and JSON are template-generated from the palette, and the design-token export maps swatches to names like Primary, Secondary, Accent, Background, Surface, Text, Muted, Border, Success, Warning and Error. PNG files are drawn on a canvas and handed over through canvas.toBlob(), while SVG files are serialized markup. Every download is a client-side blob URL — nothing ever touches a server.
What never happens
- No uploads — your images, prompts and palettes never leave your device.
- No accounts — no sign-up, email address or password, ever.
- No tracking — no analytics beacons and no advertising cookies.
- No server — there is no backend for your data to be sent to.
That list is a design decision, not a promise bolted on afterwards. With no backend, there is nowhere for data to go: saved palettes and your theme preference live in your browser’s localStorage, and share links encode the colors directly in the URL.
Ready to see it in action? Open the tool, type an idea and export your first palette — it takes about a minute.