Color Palette Generator

Most palette generators want you to gamble. You mash the spacebar, a fresh row of five random colors drops in, and you keep rolling until something looks okay. That is fun for browsing but not much help when you already have the color you have to build around, a brand blue, a client's exact hex, the one shade that can't move. That is the case this tool is built for. Give it your color and it holds that color as the anchor, then lays out every harmony the wheel offers from that single point: complementary, analogous, triadic, tetradic, split-complementary, and a full monochromatic ramp, all six schemes at once. Nothing shuffles, the set only redraws when you change the base color. It's free, it runs in your browser, and the only thing that ever leaves your device is the base color, and only when you press Share or Embed to send somebody the palette.

Look at one harmony rule on its own and you can't judge whether it's the right one, you can only tell whether it looks fine in isolation. Put them next to each other and the choice basically makes itself. A bold complementary pair sits next to a calmer analogous run, all of it derived from the same starting color, so you compare real options instead of guessing. Every swatch shows its hex, with the RGB printed underneath for reference. Click a swatch to copy the hex, and Copy all grabs the whole row of hex values as a comma-separated list you can paste straight into CSS.

1. Set your base color. Click the picker to choose one by eye, or type a hex into the field. #2563eb, 2563eb without the hash, and short three-digit #abc (it expands to #aabbcc for you) all work.
2. Read the six schemes. They regenerate the instant your color changes, each with a one-line note on what it's good for. Nothing to press.
3. Copy the color you want. Click any swatch and its hex lands on your clipboard. The RGB is printed right underneath for reference, so if your code wants rgb(...), you can read it off and type it in.
4. Take a whole palette at once. Copy all on any scheme puts every hex in that row on your clipboard, comma-separated. Drop it into a CSS variables block, a Tailwind config, or a design file.
5. No starting color? Randomize. The button drops in a random base so you can explore. Whatever you land on stays put until you change it.

Six options sounds like a lot to weigh, but in practice you lean on two or three.

Split-complementary is the one I pull up most. You get most of the punch of a straight complementary pair, but instead of one jarring opposite you use the two colors flanking it, so the contrast lands without that harsh vibrate two pure opposites can give you. It's bold and safe at the same time, which is rare.

Monochromatic is the hardest scheme to get wrong. One hue, stepped from a pale tint down to a deep shade, nothing else in play so there's nothing to clash with. This is what most app interfaces actually want: depth for hover states, cards, and dividers without dragging in a second color. It maps cleanly onto the 100-through-900 ramp a design system uses.

The rest are situational. Complementary (opposite on the wheel) is maximum contrast, perfect for a single accent that has to be seen, like a call-to-action button, but overpowering if you spread it around, so use it in small doses. Analogous (neighbors, roughly thirty degrees apart) is the calm, cohesive look you see on wellness brands and soft gradients. Triadic (three colors evenly spaced) gives you variety that still feels controlled.

Tetradic is the scheme that most often goes wrong. Four strong hues, two complementary pairs, and it sounds rich until you try it and everything fights for attention. If you go tetradic you have to let one color dominate and keep the other three as support. Split them evenly and the result looks chaotic.

Harmony is about how hues relate on the wheel. Legibility is a different question, whether a person can actually read text of one color sitting on top of another, and that comes down to the difference in lightness, not the hue relationship at all.

Two colors can be textbook-perfect complementary, dead opposite on the wheel, and still share almost the same lightness. They can look great side by side and still be close to unreadable as text on a background, worse in bright sun on a phone.

Use the harmony to pick your hues, then push the lightness of the pair apart until it clears a real contrast target. The Web Content Accessibility Guidelines set 4.5:1 for normal body text and 3:1 for large text and UI components. And never let color be the only thing carrying meaning, back it with an icon, a label, or an underline so someone who can't tell red from green still gets it.