Random Palette Generator

Generate random color palettes. Lock colors you like and regenerate the rest.

#3B82F6
#EF4444
#10B981
#F59E0B
#8B5CF6

CSS Variables

  --color-1: #3b82f6;
  --color-2: #ef4444;
  --color-3: #10b981;
  --color-4: #f59e0b;
  --color-5: #8b5cf6;

JSON Export

[
  {
    "name": "color-1",
    "hex": "#3b82f6"
  },
  {
    "name": "color-2",
    "hex": "#ef4444"
  },
  {
    "name": "color-3",
    "hex": "#10b981"
  },
  {
    "name": "color-4",
    "hex": "#f59e0b"
  },
  {
    "name": "color-5",
    "hex": "#8b5cf6"
  }
]

Shareable URL: ?colors=%233b82f6-%23ef4444-%2310b981-%23f59e0b-%238b5cf6

Examples

Complementary harmony

Input
Harmony: Complementary
Output
Base: #2563eb
Complement: #eb7d25
Fillers: #eb2582, #5eeb25, #ebeb25
Locking all 5 and clicking Generate keeps them; unlocking any one rerolls that slot only.

A complementary palette pairs a base hue with its opposite on the color wheel (180°). The remaining three slots are filled with random hues to round the palette out.

Monochromatic lock-and-roll

Input
Harmony: Monochromatic
Lock: slot 1, slot 3
Output
Locked: #3b82f6, #93c5fd
Generated: #2563eb, #1e40af, #60a5fa

Monochromatic mode generates five lightness variations of the same hue. Locking two and regenerating keeps those shades stable while the base hue shifts.

About this tool

The Random Palette Generator produces a fresh 5-color palette on demand, with optional harmony constraints so the result is not just random — it can be analogous, complementary, triadic, tetradic or strictly monochromatic. Lock the swatches you like and regenerate to keep them while the rest of the palette shifts.

Randomness comes from Math.random() over a 24-bit color space; harmonies are derived from HSL hue offsets (complementary = base + 180°, triadic = +120° / +240°, etc.). The base color for harmonies is itself random, so each click of Generate gives a different starting hue. The current palette is displayed as CSS variables and as a JSON array of `{ name, hex }` objects; the JSON can be copied directly.

How to use

  1. Pick a harmony

    Open the Harmony dropdown and pick Random (5 unrelated colors), Analogous, Complementary, Triadic, Tetradic or Monochromatic. The default is Random.

  2. Click Generate

    Hit Generate to roll a new palette. The first slot in harmony modes is the base color; the rest are derived from it.

  3. Lock colors you want to keep

    Click the Lock icon under any swatch you like. On the next Generate, only unlocked swatches are re-rolled — locked colors stay put.

  4. Export the result

    Copy the JSON export, or select the displayed CSS custom properties for use in a stylesheet or design-token file.

Use cases

Kicking off a new design

When you need a starting palette and have no specific brand yet, use Random or Analogous with no locks to explore ideas quickly.

Iterating on a fixed base color

Lock the brand color you must use and let Generate explore harmonious combinations around it — the tool will roll complements, triads, or tints while keeping the base stable.

Preparing design-token data

Copy the JSON export into a ticket, design review, or token pipeline so every color is recorded as a named hex value.

Common mistakes

Mistake:Clicking Generate without checking the harmony.

Fix:If you want a coherent palette (not five unrelated hues), pick a harmony first — otherwise you will get a Random palette every time.

Mistake:Forgetting to lock before iterating.

Fix:Without locks, every click of Generate replaces the entire palette. Lock the swatches you want to keep before rerolling.

Mistake:Assuming a generated palette is accessibility-safe.

Fix:Random palettes rarely meet WCAG contrast out of the box. Run the result through the Palette Accessibility Checker before adopting it for UI.

Frequently asked questions

References & standards

Related tools

Box Shadow Generator

Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.

Color Blindness Simulator

Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.

Color Contrast Checker

Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.

Color Converter

Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing

Color Extractor

Extract colors from uploaded images by hovering over pixels to get precise color values.

Color Generator

Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.