Press Space to generate harmonious color palettes, lock the colors you like, then copy HEX codes or export CSS variables, Tailwind and JSON. Everything is made in your browser and nothing is uploaded.
Color Palette Generator
Press Space to generate harmonious color palettes, lock the colors you like, then copy HEX codes or export CSS variables, Tailwind and JSON. Everything is made in your browser and nothing is uploaded.
Palettes are generated and checked in your browser and nothing is uploaded. A share link carries only the color codes in the part after the #, and your mode, style and size choices are remembered on this device only.
The Color Palette Generator builds a set of colors that belong together. Press Space or the Generate button and a new palette of two to ten colors appears, from fully random picks spread as far apart as possible to classic harmonies around a base color: analogous, complementary, split-complementary, triadic, tetradic, monochromatic, shades and tints. Lock any color you like and the others keep changing around it, step back through your last thirty palettes with undo, and drag the swatches into a new order. Every color shows its HEX, RGB and HSL values, the nearest named color and its exact WCAG contrast against white and black text. When a palette is ready, copy it as HEX codes, CSS variables, SCSS, a Tailwind snippet or JSON, or share a link that carries only the color codes.
Features
Nine generation modes: random, analogous, complementary, split-complementary, triadic, tetradic, monochromatic, shades and tints
Random palettes in a chosen style (any, vibrant, pastel, muted, dark or light) with the colors always kept clearly apart
A base color field that builds every harmony around your brand color or a favorite shade
Lock buttons that hold chosen colors in place while the rest regenerate, so you can refine a palette step by step
Two to ten colors, drag-to-reorder or arrow buttons, and undo and redo through the last 30 palettes
HEX, RGB and HSL values, the nearest named color and the exact WCAG contrast of white and black text on every swatch
A contrast checker that rates any text and background pair from your palette against AA and AAA
Export as a HEX list, CSS variables, SCSS, a Tailwind snippet or JSON, plus a share link that holds only the color codes
How to use the Color Palette Generator
Choose a mode and, for Random, a style; add a base color if you want the palette built around one
Press Space or Generate until a color you like appears, then lock it so it stays while the others change
Click a swatch to copy its HEX code, open its details for RGB, HSL and contrast, and drag swatches into the order you want
Check text contrast on any pair, then open Export and copy the palette as CSS variables, SCSS, Tailwind or JSON
Example
Input
Mode: Analogous · base color #2a9d8f · 5 colors
Output
#3d4dc3 #2b668a #2a9d8f #69d391 #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three
Analogous colors sit next to each other on the color wheel, up to 30 degrees apart. The contrast ratios use the WCAG formula, so each swatch tells you which text color to put on it.
Common errors & troubleshooting
Pressing Space does not make a new palette. — Space only generates when no button, link or text field has keyboard focus, because those keep Space for themselves. Press Tab until nothing is highlighted, or click the Generate button.
The Generate button is greyed out. — Every color is locked, so there is nothing left to change. Unlock at least one color with its lock button or the L key.
A shared palette link opens an empty or different palette. — The colors live in the part of the address after the # sign. If a chat app cut the link short, copy the whole address again; a hash that is not two to ten valid six-digit HEX codes is ignored.
The Tailwind snippet does not change my existing colors. — It adds a palette group under theme.extend.colors. Paste it into the colors object of your config and use classes such as bg-palette-1 or text-palette-3.
Frequently asked questions
How do the harmony modes in the Color Palette Generator work?
Each mode picks hues at fixed distances around the color wheel from a base hue: analogous colors sit up to 30 degrees apart, complementary uses the opposite hue, split-complementary the two hues beside it, triadic spaces three hues 120 degrees apart and tetradic four hues 90 degrees apart. Monochromatic, shades and tints keep one hue and change its lightness and saturation, and Random spreads the colors as far apart as it can.
How do I generate a color palette around my brand color?
Type or pick your brand color as the base color, then choose a harmony mode. The base is placed in the palette and kept fixed, and the other colors are built around it every time you press Space. Switch between analogous, complementary and triadic to see how far from the brand color you want the palette to travel.
How do I keep some colors and change the rest in the Color Palette Generator?
Lock the colors you like with the lock button on a swatch or the L key. A locked color stays in its position while a new palette is generated around it, and undo returns to the previous palette if the new one is worse. Locking every color disables Generate.
How does the Color Palette Generator check text contrast?
It uses the WCAG formula, which compares the relative luminance of two colors. Normal text needs a ratio of at least 4.5 to 1 for AA and 7 to 1 for AAA; large text needs 3 to 1 and 4.5 to 1. Every swatch shows the ratio for white and black text, and the contrast checker rates any text and background pair from the palette.
How do I export a palette to CSS variables or Tailwind?
Open the Export panel and choose a format. CSS variables gives a :root block with --color-1 to --color-5, SCSS gives $color variables, Tailwind gives a palette group to paste into theme.extend.colors, and JSON and the HEX list give plain arrays. Each one has a copy button.
Can I share a palette I made with the Color Palette Generator?
Yes. The address in your browser always holds the current colors after a # sign, for example #264653-2a9d8f-e9c46a, and Copy link copies it. Anyone who opens it sees the same palette. The part after # is never sent to a server, and only your mode, style and size choices are remembered on this device.
Related tools
Image Color Palette Extractor — Extract a dominant color palette from an image as HEX, RGB and HSL with CSS variables.
Color Format Converter — Convert a color across HEX, RGB, HSL, HWB, LAB, LCH and OKLCH with a live swatch.
Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
Tailwind Color Generator — Generate a full 50-950 Tailwind color scale from one brand color, with config-ready output.
CSS Gradient Generator — Design linear, radial and conic CSS gradients with live color stops and copy the code.
Image Color Picker — Upload an image and pick colors from any pixel to get HEX, RGB and HSL values, in your browser.
Color Blindness Simulator — See any image the way people with protanopia, deuteranopia or tritanopia see it.
Cache-Control Header Builder — Assemble a correct HTTP Cache-Control header from plain toggles and human time units, with copy-ready nginx, Apache, and meta snippets.
Meta Tag Generator — Generate SEO, Open Graph and Twitter Card meta tags for your page from a simple form.
CSP Header Generator — Build a Content-Security-Policy header from directive toggles, with report-only and copy output.