Color Palette Generator

Build harmonious palettes instantly. Pick a color, choose a harmony, copy your swatches.

How the Color Palette Generator Works

Pick a base color with the color picker or type a HEX value directly. Choose one of five harmony rules — Complementary, Analogous, Triadic, Split-Complementary, or Monochromatic. The tool generates a 5-color palette using HSL math, entirely in your browser.

Each swatch has a lock icon 🔒 — click it to freeze a color you like. Press Regenerate (or the spacebar) and only the unlocked swatches get fresh values. You can also click Edit on a swatch to type an exact HEX value.

Your palette and harmony are encoded in the page URL. Copy the URL to share your exact palette — anyone opening the link sees the same colors. Useful for Slack, email, or saving in your notes.

Toggle the output format between HEX, RGB, HSL, and OKLCH. OKLCH is the modern CSS Color 4 standard — it gives you perceptually uniform lightness, which is ideal for building reliable design tokens. The format affects what gets copied when you click a swatch.

The Export button opens a menu with ready-to-paste snippets for CSS custom properties, SCSS variables, Tailwind config, JSON, and downloadable SVG. Keyboard shortcuts: Space regenerates, C copies the whole palette, keys 1 to 5 copy individual swatches.

Below the palette, four panels help you evaluate and reuse your work: a live UI mockup, a WCAG contrast matrix, a local history (last 20 palettes) with favorites, and an image-to-palette extractor. Everything is calculated in your browser — no API calls, no tracking, no account.

Feature reference

Lock and regenerate

Clicking the lock icon on a swatch freezes that color. Regenerate (button or spacebar) recomputes only the unlocked swatches using the base color and harmony rule. Use this to iterate on a palette while keeping one or two anchor colors — typical when you have a fixed brand color and need the four surrounding swatches to match it.

Shareable URL

Your palette is encoded in the query string as ?p=hex1-hex2-hex3-hex4-hex5&h=analogous&f=hex. A trailing ! on a hex marks it as locked. Click "Share link" to copy the current URL; opening it on any device restores the exact palette, harmony, and format.

Color formats: HEX, RGB, HSL, OKLCH

HEX (#RRGGBB) stays the universal default for sharing and CSS. RGB maps directly to sRGB channels for legacy tooling. HSL is useful when you want to tweak a color by hue, saturation, or lightness intuitively. OKLCH — from CSS Color Module 4 — uses a perceptually uniform space where equal steps in L feel equally bright; it powers modern design systems like Tailwind v4 and Radix UI. The format toggle affects what you copy from swatches, not the generated palette.

Export options

Clicking Export opens a panel with five tabs: CSS (custom properties like --palette-1 to --palette-5), SCSS (dollar variables), Tailwind (colors.palette scale ready to paste in tailwind.config.js), JSON (with hex + rgb + hsl for each swatch), and SVG (downloadable file with five rectangles to import in Figma, Illustrator, or Sketch). Every format includes a Copy button; SVG also offers a direct download.

Keyboard shortcuts

Press Space to regenerate the unlocked swatches. Press C to copy the full palette (all five hex codes, comma-separated) to your clipboard. Press 1 through 5 to copy an individual swatch. Shortcuts are disabled when you're typing in an input, so they never conflict with editing the base color.

UI preview panel

A mini mockup with a heading, body copy, a primary button, a secondary button, and a muted card — all built with your palette. Colors are assigned automatically by luminance: the lightest swatch becomes the background, the darkest becomes text, and the remaining colors fill accent, muted, and border roles. This reveals instantly whether your palette actually works in a real interface (vs. looking nice as abstract squares).

WCAG contrast matrix

A 5×5 matrix showing the contrast ratio between every pair of swatches. Badges indicate WCAG compliance: AAA (≥ 7:1, the strictest), AA (≥ 4.5:1, the legal baseline for most body text), AA+ (≥ 3:1, large text only), or ✕ (fail). Read it as 'text color from the column, background from the row.' Use it to pick safe text/background pairs from your palette before shipping.

Color vision simulation

Switches the preview (swatches, UI mockup, contrast matrix) to simulate how your palette looks for the three most common color vision deficiencies: protanopia (red-blind, ~1% of men), deuteranopia (green-blind, ~6% of men), and tritanopia (blue-blind, rare). The underlying palette data stays unchanged — copied HEX codes remain your originals. Uses Brettel/Machado transformation matrices applied in RGB space.

History and favorites

Every palette you generate is saved locally in your browser (up to the last 20). Click a history entry to restore it instantly. Click the star ★ icon next to a palette to pin it to Favorites, which are unlimited. Everything lives in localStorage under keys color-palette-history-v1 and color-palette-favorites-v1 — no server, no account. Use Clear to wipe a list if you want a fresh start.

Image-to-palette extraction

Drop an image (or click to choose a file) and the tool runs k-means clustering on the pixels to extract 5 dominant colors. The image is downscaled to at most 120 pixels per side before analysis to keep it fast even on mobile. Everything happens in your browser — the image never leaves your device. Use it to match a brand to a photo, extract colors from a logo, or start a palette from a mood board image.

Color Theory Fundamentals

Color theory starts with the color wheel — a circular arrangement of hues that reveals relationships between colors. The three primary colors (red, yellow, and blue in traditional pigment theory; red, green, and blue in light-based additive models) can't be created by mixing other colors. Secondary colors come from mixing two primaries: orange (red + yellow), green (yellow + blue), and violet (blue + red). Tertiary colors fill the gaps between primary and secondary hues, giving names like red-orange, yellow-green, and blue-violet. Knowing where a color sits on the wheel is the foundation for every harmony rule this tool uses.

Colors carry strong psychological associations that vary by culture but follow some universal patterns. Warm colors — reds, oranges, and yellows — are associated with energy, urgency, and warmth. They tend to advance visually (appearing closer to the viewer) and you'll see them a lot in calls to action, food branding, and sports design. Cool colors — blues, greens, and purples — evoke calm, trust, and spaciousness. They recede visually and dominate healthcare, finance, and tech branding. Neutral colors (black, white, grey, beige) provide breathing room and contrast without competing with the dominant palette. Understanding the emotional weight of your chosen hues helps you pick colors that reinforce rather than undermine your design's intent.

The harmony rules built into this tool each solve a different design problem. Complementary schemes (colors opposite on the wheel, 180° apart) create maximum contrast and visual tension — powerful for hero sections and product highlights, but tiring for extended reading. Analogous schemes (neighboring hues, 30°–60° apart) feel cohesive and natural, ideal for backgrounds, illustrations, and calm interfaces. Triadic schemes (three colors equally spaced at 120°) offer vibrant variety while maintaining balance, commonly used in playful or creative brands. Split-complementary softens the harshness of a pure complementary pair by shifting one of the two opposing colors by 30°. Monochromatic palettes use a single hue at different saturations and lightnesses — ultra-cohesive, elegant, and easy to get right.

Choosing Colors for Accessibility

Beautiful palettes are only effective if all users can actually perceive them. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios that ensure text stays readable against its background. For normal-sized body text (below 18pt or 14pt bold), the minimum contrast ratio is 4.5:1. For large text — headings and bold text at 18pt or larger — the threshold relaxes to 3:1. The enhanced WCAG AAA level requires 7:1 for normal text and 4.5:1 for large text. These ratios compare the relative luminance of the foreground and background colors. Pure white (#FFFFFF) on pure black (#000000) achieves 21:1 — the maximum possible — while medium grey on light grey might only achieve 2:1, which fails every accessibility standard.

Turns out, color blindness affects approximately 8% of men and 0.5% of women of Northern European descent. The most common form is red-green color blindness (deuteranopia and protanopia), which makes it hard to distinguish reds from greens. Designing with color blindness in mind means never relying on color alone to convey meaning — always pair color cues with shape, texture, icons, or labels. For example, a dashboard that shows errors in red and successes in green should also use an X icon for errors and a checkmark for successes. Tools like the Colour Contrast Analyser and browser extensions such as NoCoffee let you simulate various forms of color vision deficiency and test your palette before shipping.

Frequently Asked Questions

What exactly is color harmony?
Color harmony is about how colors relate to each other on the color wheel. Harmonious combinations feel aesthetically pleasing because they follow predictable patterns of hue, saturation, and lightness. It's why some palettes just click and others feel off even if you can't say why.
What is the difference between complementary and split-complementary?
Complementary uses two colors directly opposite on the color wheel (180° apart) — high contrast but can be visually harsh. Split-complementary uses a base color plus two colors adjacent to its complement (150° and 210°) — still striking but gentler and more versatile.
Can I use these palettes in commercial projects?
Yes. The tool generates palettes based on color theory math. Colors themselves cannot be copyrighted, so any palette you generate is free to use in any project, commercial or personal.
What color formats does this tool support?
Four output formats: HEX (#RRGGBB), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)), and OKLCH (the CSS Color 4 standard). Internally the harmony rules are applied in HSL space because hue rotations are simple there. OKLCH is recommended for modern design systems because it offers perceptually uniform lightness — a color at L=60% looks equally bright regardless of its hue.
Which harmony is best for UI design — any rule of thumb?
For most user interfaces, analogous or monochromatic schemes give the cleanest results because they avoid visual tension and let content take center stage. A common approach: use a monochromatic palette for backgrounds and surfaces, then introduce a single complementary accent color for primary buttons and interactive elements. Triadic schemes work well for dashboards or playful apps that need visual variety without becoming chaotic. Avoid pure complementary schemes for large text areas — the vibrating effect between opposite hues at full saturation is genuinely fatiguing for extended reading.
How do I check if my palette meets WCAG contrast requirements?
After generating your palette, test each foreground-background color pair using a dedicated contrast checker. This tool includes a built-in WCAG contrast matrix below the palette that shows the ratio for every pair and flags them as AAA (≥ 7:1), AA (≥ 4.5:1), AA+ (≥ 3:1 for large text only), or fail. External validators like WebAIM's Contrast Checker are also helpful when you want to verify a specific pair. As a quick rule of thumb: dark text on light backgrounds and light text on dark backgrounds tend to pass; medium-value colors paired together frequently fail and should be avoided for body text.
How do I lock a color and regenerate the rest of the palette?
Click the lock icon in the top-right of any swatch to freeze that color — it gets a filled background with an inverted icon. Then click the Regenerate button (or press the spacebar) and only the unlocked swatches are recomputed based on the base color and harmony. This workflow is essential when you have a fixed brand color and want the four supporting colors to harmonize with it. You can lock multiple swatches at once; the remaining swatches will be recomputed on each regenerate.
What is OKLCH and should I use it instead of HEX?
OKLCH is a CSS Color Module 4 color space that stores a color as Lightness, Chroma (saturation), and Hue. Unlike HEX or HSL, OKLCH is perceptually uniform — two colors with the same L value look equally bright to the human eye, regardless of their hue. This makes it ideal for building consistent design systems: you can generate tonal scales (100, 200, 300…) that feel balanced. Modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+) support oklch() natively in CSS. For sharing a single color or pasting into legacy tools, stick with HEX. For design systems and dark/light theme palettes, prefer OKLCH.
Is my palette saved? Can I get it back later?
Yes, in two ways. First, every palette you generate is automatically added to a local History (the last 20 palettes), stored in your browser via localStorage. Click the History tab below the swatches to restore any previous palette. Second, you can star ⭐ any history entry to pin it to Favorites (unlimited). Nothing is sent to a server — the data lives only in your browser under the keys color-palette-history-v1 and color-palette-favorites-v1. Clearing your browser storage erases them. For sharing or transferring across devices, use the Share link button instead — it encodes the palette in the URL.
How does the image-to-palette extraction work? Is my image uploaded?
The image never leaves your device. When you drop or select a file, the tool loads it into an in-memory canvas, downscales it to at most 120 pixels per side for speed, and runs a k-means clustering (k=5, 8 iterations) on the RGB values of the pixels. The five resulting cluster centers are returned as your dominant colors and are then sorted by luminance for a natural palette order. No network request, no upload — everything is computed client-side in JavaScript.
Why does the palette look different when I select a color vision simulation?
The Vision toggle simulates how the palette appears to someone with protanopia (red-blind), deuteranopia (green-blind), or tritanopia (blue-blind). Approximately 8% of men of Northern European descent have some form of color vision deficiency. The tool applies published Brettel/Machado transformation matrices in RGB space to every displayed color, so the swatches, UI preview, and contrast matrix all reflect what that user would see. The underlying palette data is not modified — copied HEX codes, URL sharing, and exports all use your original colors. Use the simulation to verify your palette still communicates correctly without relying on color alone.
Can I share a specific palette by URL?
Yes. Your palette, harmony, and format are encoded in the page URL as ?p=hex1-hex2-hex3-hex4-hex5&h=analogous&f=oklch. A trailing ! on a hex (e.g., ff0000!) marks that swatch as locked. Click the "Share link" button to copy the current URL to your clipboard — anyone opening the link sees the exact same palette, including locked swatches, on any device. The URL updates automatically 300ms after any change, so you never need to "save" manually.