About ChromaKit

What ChromaKit does

ChromaKit is a free color palette generator and a small suite of companion tools that runs entirely in your browser. At its core is a prompt-based palette generator: describe the mood you are after — “ocean blue”, “luxury gold”, “cozy autumn” — and it returns a five-color palette built with real color harmony rules. A Surprise Me button gives you an instant starting point, and seven harmony modes (Random, Monochromatic, Analogous, Complementary, Split Complementary, Triadic and Tetradic) steer the results in a specific direction.

From there, everything is editable. You can lock the colors you like, start from a custom color entered as HEX, RGB or HSL, and read every swatch in all three formats with per-format copy buttons. A shade generator produces tint and shade steps from 50 to 950 for any color, a gradient generator turns your palette into linear and radial CSS gradients, and a live website preview shows how the colors behave on an actual page layout.

When the palette feels right, a built-in WCAG contrast checker tests your pairings against accessibility thresholds, the image color extractor pulls dominant colors from your own JPG, PNG or WebP files, and the export panel produces CSS variables plus PNG, SVG and JSON downloads. Full design tokens — Primary, Secondary, Accent, Background, Surface, Text, Muted, Border, Success, Warning and Error — export in CSS, JSON and Tailwind formats, and palettes you save can be reopened or shared with a plain URL. Everything above is free, with no signup anywhere in the flow.

Who it is for

ChromaKit was built for anyone who needs colors that work together — no design degree required. You will probably feel at home if you are:

• A web or UI/UX designer building an interface color system with semantic roles like Surface, Text and Border.
• A frontend developer who wants design tokens and CSS variables ready to paste into a codebase.
• A brand or graphic designer exploring directions for a new identity.
• A marketer or content creator who needs consistent colors across channels without buying design software.
• A student learning color theory and wanting to see harmony rules and contrast ratios applied live.
• A small business that needs a coherent palette for a website, deck or storefront.

If you have ever eyeballed colors in an image editor and hoped for the best, ChromaKit gives you the math, the previews and the contrast scores instead.

How the generator works

ChromaKit's “AI” is honest about what it is: on-device keyword interpretation. When you type a prompt, your browser matches the words against a color vocabulary and adjusts hue, saturation and lightness accordingly — no remote model, no queue, no waiting, and the page keeps working even if your connection drops.

On top of that vocabulary sit the classic rules of color harmony — mathematical relationships on the color wheel such as analogous, triadic and complementary — plus contrast checks based on the WCAG relative-luminance formula. The result is a palette that looks intentional rather than random. The how it works page explains each step, and the generator itself is the fastest way to see it in action.

Browser-based and privacy-first

ChromaKit has no accounts, no signup and no server-side processing. The colors you generate never leave your device unless you deliberately share a palette URL. When you extract colors from an image, the file is processed locally with the browser's canvas API and is never uploaded anywhere.

Saved palettes and your theme preference are stored only in your browser's localStorage, so they stay on your machine and disappear if you clear site data. The privacy policy describes exactly what is — and is not — collected.

Design philosophy

Three principles shape every part of the tool:

• Fast. Pure HTML, CSS and vanilla JavaScript — no frameworks, no tracking scripts, no spinners.
• Accessible. Keyboard-friendly controls, support for reduced-motion preferences, and a contrast checker built into the workflow rather than bolted on afterwards.
• Honest. Every button does what it claims. There are no fake limits, no locked “premium” features and no claim of a cloud AI — because there isn't one, just deterministic color math running on your device.