Monochromatic Palette Generator

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
• Palette Generator — Harmonious colour schemes from a base colour
• 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