Color Palette Generator
Press Space to generate a new palette. Click any swatch to pick a custom color.
Palette Mood: Professional & Dynamic
Cool yet vibrant, this palette conveys professionalism with a modern edge. Ideal for tech brands and corporate designs that need visual impact.
Export Palette
Download or copy your palette in different formats.
Your Data Never Leaves Your Device
Unlike other color tools that require accounts and server storage, everything here runs 100% in your browser. Built by a cybersecurity professional who believes privacy shouldn't be optional.
100% Client-Side
All color generation and palette creation runs entirely in your browser. Your palettes and exports never leave your device.
No Server Storage
We don't operate backend servers that process your data. This is a static site served via CDN — there's nowhere to store it.
No Tracking Without Consent
Analytics only activate after you explicitly accept cookies. Decline and we track nothing — zero scripts, zero pixels.
Open Architecture
Built as a static export with no API calls. You can verify this yourself — inspect network traffic and see zero outbound data.
How color harmony formulas work
// Base color in HSL: H ∈ [0°, 360°), S ∈ [0, 1], L ∈ [0, 1]
complementary = [H, H+180°] // opposites
analogous = [H−30°, H, H+30°] // neighbors
triadic = [H, H+120°, H+240°] // equilateral
split_complement = [H, H+150°, H+210°] // soft complement
tetradic = [H, H+60°, H+180°, H+240°] // rectangle
monochromatic = [H @ L±5–20%] // same hue, varied lightnessEvery harmony mode is a rule for rotating around the HSL color wheel. Pick a base hue and the generator walks that angle to find its companions, then varies saturation and lightness within a perceptually safe range so every palette holds together. This is how designers have picked balanced colors since Johannes Itten formalized the color wheel in 1961 — the tool just automates the arithmetic.
Examples
SaaS dashboard with analogous palette
You’re building a data dashboard and want the UI to feel calm rather than carnival-bright. Pick a soft blue (H ≈ 210°) and analogous harmony: you’ll get teal, blue, and indigo variants that share a hue family. Lock the middle color as your primary brand blue, then regenerate to explore different lightness stops for backgrounds, cards, and hover states.
Startup logo with triadic energy
A fintech startup wants a logo that reads as trustworthy but fresh. Start with a navy base (H = 220°) and triadic harmony: you’ll get navy + warm orange + leafy green. Use navy for the mark, orange as an accent, and keep green in reserve for success states. The 120° spacing guarantees maximum visual tension between the three anchors.
Editorial site with monochromatic restraint
An essay-focused publication wants each article to feel like its own mood. Pick monochromatic harmony on any hue and the tool varies only lightness — so every color shares the same hue and saturation but ranges from near-white to near-black. This is how the New York Times Magazine does per-feature palettes without clashing with the masthead.
Accessibility-checked marketing site
You’ve generated a palette you love, but the brand pink and the dark gray barely pass WCAG. Enable the Accessibility panel: the contrast matrix shows every pair’s ratio and flags pairs below 4.5:1 (AA body text) or 7:1 (AAA). Swap any pair that fails and regenerate; the tool keeps harmony intact while nudging lightness until the contrast passes.
Common questions
For product UI and dashboards, analogous and monochromatic are the safest — they hold together even when used heavily. For branding and marketing, triadic and split-complementary give you more visual contrast to work with. Complementary is striking but hard to use broadly; keep it to accents. Random is useful for breaking out of a rut when nothing feels right.
WCAG AA requires a 4.5:1 contrast ratio between text and its background (3:1 for large text ≅18pt). AAA raises the bar to 7:1 (4.5:1 for large text). AA is the legal minimum in most jurisdictions for public-facing sites; AAA is best-practice for anything heavy on reading. The contrast matrix in the Accessibility panel shows each pair’s ratio so you can pick text/background combinations that pass.
It re-renders your palette as it would appear to someone with the three most common types of color-vision deficiency: protanopia (red-weak, ≈1% of men), deuteranopia (green-weak, ≈1% of men), and tritanopia (blue-weak, very rare). Simulations are based on the Machado 2009 model — the most accurate current approximation. If two colors collapse into the same gray in any simulation, they’re indistinguishable for that group and you should add a second visual cue (icon, pattern, label).
Yes. Click any swatch in the palette and the color picker opens — paste your brand HEX (e.g. `#1a73e8`) and lock it. Then regenerate: every other color in the palette is computed around the harmony rule from your locked anchor. This is the fastest way to extend an existing brand into a full UI palette without drifting off-hue.
Yes — colors themselves are not copyrightable. You can use any palette this tool generates for commercial projects, personal work, client work, open source, whatever. The tool outputs HEX, RGB, HSL, CSS variables, JSON, and Tailwind config so you can drop them directly into your design system or codebase.
It averages the HSL values of the five swatches and maps them to descriptive keywords. Warm hues (reds/oranges/yellows) with high saturation lean "energetic" and "bold"; cool hues (blues/greens) with low saturation lean "calm" and "professional"; pastels (any hue, low saturation, high lightness) lean "playful" and "soft." The descriptors are suggestive, not prescriptive — treat them as a first read rather than a verdict.