Color Palette Generator
Harmonious colour schemes from a base colour. Free, and runs entirely in your browser — nothing you enter is uploaded, stored or sent to a server.
About Palette Generator
Pick a base colour and get a scheme built on colour-wheel relationships: analogous for calm and cohesive, complementary for maximum contrast, split-complementary for contrast with less tension, triadic and tetradic for vivid multi-colour sets, and monochromatic, shades or tints for a single-hue scale.
Harmony schemes are a starting point, not a finished design system. Take the hues, then adjust lightness and saturation for the roles you actually need — one accent, one or two neutrals, and a small set of feedback colours.
Where it helps
- Eight schemes covering both harmonious and high-contrast relationships.
- Three to twelve colours, with hex values ready to copy.
- Shades and tints produce the tonal scale a design system needs.
- Instant iteration from any base colour, entirely offline.
Limits
- Generated colours are not checked for contrast; verify each text pairing separately.
- Wheel harmony is mathematical, not perceptual — equal hue steps do not look equally spaced.
- Cultural meaning is not considered: red, white and green carry different connotations by market.
- Colour alone should never carry meaning, whatever the palette; pair it with text or an icon.
Frequently asked questions
Which scheme suits a product interface?
Usually monochromatic or analogous for the interface itself, with one complementary accent reserved for primary actions.
How many colours does a design system need?
Fewer than people expect: one brand hue with a tonal scale, a neutral scale, and semantic colours for success, warning and error.
Are these palettes accessible?
Not automatically. Harmony says nothing about contrast — check every text and background pairing in the Contrast Checker.
Why do two colours at equal hue steps look unbalanced?
Perceived lightness varies by hue: yellows read much lighter than blues at the same nominal lightness. Adjust by eye afterwards.
Related tools
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- Contrast Checker — WCAG contrast ratio for text and UI colours
- Gradient Generator — Build linear, radial and conic CSS gradients
- CSS Formatter — Format stylesheets with consistent indentation
- Image Colour Picker — Pick a colour out of a picture and read it back
- Random Colour Generator — Random colours from a seed you can keep, in a range you choose
More Colors & Design tools
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- Contrast Checker — WCAG contrast ratio for text and UI colours
- Image Colour Picker — Pick a colour out of a picture and read it back
- Gradient Generator — Build linear, radial and conic CSS gradients
- Random Colour Generator — Random colours from a seed you can keep, in a range you choose
- Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
- Border Radius Generator — Round corners evenly, one by one, or into a blob
- CSS Animation Generator — Build a keyframe animation and watch it run
- Cubic Bezier Editor — Plot an easing curve and feel what it does
- Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
- Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
- Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
- Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
- Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
- Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
- Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
- Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
- Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
- CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
- Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
- Web Font Previewer — Set your own text in a font file before you ship it