Color Palette Generator

This color palette generator is for anyone who wants a handful of colors that actually belong together: homeowners doodling paint and trim, renters testing accent ideas, folks in marketing nailing a mood, and developers who need tokens without the busywork. Start from one seed color on the wheel or typed as hex. Pick a harmony type next: complementary opposites, a monochromatic ramp, analogous neighbors, a triadic trio, or a tetradic rectangle. How many swatches you get follows the harmony (two for complementary, three for mono, analogous, or triadic, four for tetradic), same story the wheel is telling. Harmony buttons sit up top with tiny wheel doodles so you’re not digging through menus. Each swatch lists its hex in uppercase, picks readable text automatically, and sometimes adds a friendly nearest CSS named color when we’re confident it won’t fib.

Behind the scenes, hues relate on a circle (roughly matching how designers talk about “warmer,” “cooler,” or “opposite”). On screen you work with hex and an interactive wheel; the underlying harmony math follows standard color-wheel relationships for each preset mode.

Begin with Seed color: drag the interactive wheel or type six hexadecimal digits with or without a hash (updates apply after a short pause while typing). Invalid hex is ignored until complete. Surprise me picks a random seed and harmony and clears locks. Under Harmony, only one mode is active at a time; the active button uses a border tinted by your seed. Swatch count is determined by the harmony type, not a separate control.

That little subtitle is the nearest official CSS keyword when we’re sure it isn’t embarrassing. We match in CIELAB (ΔE) and bail out when the fit is weak so oddball grays don’t park on greens or blues. Eyes still beat formulas, so treat names as chatter at the coffee machine; hex wins arguments. Need industrial-grade tolerances for print runs? Polish these hex values elsewhere. Here we stay small, fast, and browser-only.

WCAG contrast compares relative luminance of foreground and background using the standard sRGB gamma correction curve. This generator evaluates each generated color against pure white and pure black to bracket common extremes. Real interfaces rarely use pure white or pure black alone, so your component backgrounds may produce different ratios in practice. Use passes as a green light for rough typography pairing and fails as a prompt to lighten, darken, or shift hue before setting body copy atop decorative fills. Decorative icons and oversized headings have looser thresholds under WCAG, but the 4.5 to 1 badge keeps expectations aligned with body text defaults.

Product folks drop PNG snapshots into decks, then lift the same hex codes into Figma variables. Engineers paste the CSS chunk into tokens or Storybook without retyping a digit. If you’re repainting, share that PNG with your partner or contractor so everyone sees the same vibe, then confirm with real samples in your house. Teachers can spin the wheel live because swatches chase along. Nothing uploads to our servers, so palettes for your living room or a hush-hush brand stay on the device you’re using. Tap + Save current when you want a keepsake row in Recent palettes; clear history when your list gets messy.

Harmony rules don’t care if you’re staring at a hero banner or a hallway wall. Complementary and analogous palettes still feel deliberate in real rooms. Try monochromatic rows when you want ceiling, walls, and trim whispering the same hue, or tetradic sets when you crave a gutsy pillow, tile stripe, or door pop against quieter paint. We can’t beam your bedroom lighting into the screen or bottle pigment chemistry here; we can give you a sane thread so you’re not drowning in unrelated chips.