Recording...
Spin Results
Wheel Entries
Add, edit, and colorize
0
One spin, five colors, ready to ship. The random palette spinner returns harmonized five-color palettes with hex, RGB, HSL, and contrast checks built in — for designers who want a starting point, not a blank canvas.
Paste your list below, one item per line
The Random Palette Spinner generates a complete five-color palette in a single click, using formal color harmony rules to ensure the colors feel intentional rather than randomly thrown together. Each palette includes a hero color, two supporting colors, an accent, and a neutral — matching the role structure of most real design systems.
It’s built for the moment when a designer or developer needs to start, fast. Maybe you’re prototyping a side project and don’t want to spend forty minutes on Coolors. Maybe you’re building a quick OG image template and need a fresh palette. Maybe you’re testing a brand concept and want twenty palette options to compare. The spinner produces a palette per second, all of them coherent, none of them recycled defaults.
Every output is annotated with hex, RGB, HSL, and OKLCH values, contrast ratios for every pair, and a one-click export to the formats designers actually use: CSS variables, Tailwind config, Figma paint styles, and Style Dictionary tokens.
Analogous — three to five colors that sit next to each other on the wheel (within a 60-degree arc). These palettes feel calm, harmonious, and natural. Great for ambient or wellness-focused brands. Risk: low contrast between colors, so accent moments require additional saturation differences.
Complementary — two colors directly opposite on the wheel, plus tints and shades. High energy, high contrast. Risk: looks aggressive without careful balance.
Triadic — three colors evenly spaced 120 degrees apart. Balanced and vibrant. Risk: easy to make look childish if all three are at full saturation; the spinner mutes two of the three to keep palettes adult.
Split-complementary — a base color plus the two neighbors of its complement. Provides complementary contrast with more nuance. Often the most useful default for product design.
Freeform — no harmony constraint; the spinner runs aesthetic filters but doesn’t enforce a wheel relationship. Useful when you want unexpected results.
The spinner labels every color in the palette with its intended role, so the export drops cleanly into a design system without renaming and re-mapping.
One spin gives you five base colors. A real production palette typically needs more — tint and shade ramps (lighter and darker variants of each color), state colors (success, warning, danger), and semantic tokens that map roles to use cases.
The spinner’s Build Tokens action generates a full tint and shade ramp for each base color (50, 100, 200, 300, 400, 500, 600, 700, 800, 900 in Tailwind’s naming convention) using OKLCH lightness adjustments for perceptually even spacing. It also generates semantic state colors that harmonize with the base palette — an emerald derived from the analogous green region for success, a coral derived from the complementary region for danger.
The result is a starter design system you can drop into a fresh codebase and start building against in under five minutes.