Palette & gradient

Create random harmonious palettes and CSS gradient code.

Click a color card to copy its HEX.

CSS gradient

Angle 120°

Every project starts with the same small problem: you need five colours that look like they belong together, and staring at a colour picker rarely produces them. Picking one shade at a time tends to give you five unrelated colours rather than a palette.

This tool does two things. It rolls a harmonious five-colour set you can regenerate until something clicks, and it builds a two-colour CSS gradient with a live preview and copyable code.

How it works

Generating a palette

Press Generate random palette and five swatches appear with their HEX values printed on them. Click any swatch to copy that HEX to your clipboard — the card flashes to confirm.

The set is not five random colours. A base hue is chosen at random, then three shades are taken close to it and two from roughly the opposite side of the colour wheel, each with its own saturation and lightness. That gives you a dominant family plus a contrasting accent, which is the shape most usable palettes take. Keep pressing until a set feels right; nothing is saved, so there is no cost to regenerating.

Building the gradient

The gradient section is separate from the palette. Pick a start colour and an end colour, then drag the Angle slider. The preview bar and the CSS below update as you move it.

Angle	Direction the colour travels
`0deg`	bottom to top
`90deg`	left to right
`180deg`	top to bottom
`135deg`	top-left to bottom-right

CSS gradient angles point in the direction the gradient ends, which is why 0deg runs upward rather than to the right. If a gradient looks flipped, add or subtract 180.

The code it gives you

The output is a single declaration, for example background: linear-gradient(120deg, #1a56db, #0e9f6e);. Paste it into any rule that accepts a background. Because it is a background image rather than a colour, it will not appear on an element with no height, and background-color cannot be used as a fallback in the same declaration — put the fallback on a separate line above it.

Terms explained

Hue: The position of a colour on the 360-degree colour wheel. Colours with nearby hues look related; colours roughly opposite each other read as contrast.
Analogous colours: Shades sitting next to each other on the wheel. They blend comfortably, which is why most of a palette is usually built from them.
Accent colour: A shade taken far from the main hues, used sparingly for buttons, links and warnings so they stand out against the rest.
HEX: A colour written as six hexadecimal digits after a hash, two each for red, green and blue — the form the swatches copy.
linear-gradient(): The CSS function that fades between two or more colours along a straight line. It produces a background image, not a background colour.
Gradient angle: The degree value that sets the direction of the fade. 0deg points up, 90deg points right, and the value increases clockwise.

Frequently asked questions

How do I use five colours without the result looking busy?

A common split is one dominant colour for large areas, two supporting shades for surfaces and borders, and the contrasting colours reserved for small elements such as buttons or badges. If everything on the page is competing, you are usually using the accent too generously rather than holding the wrong palette.

Are the generated colours accessible for text?

Not automatically. A palette can be pleasant and still fail contrast requirements, particularly mid-tone colours behind white text. Check any colour pair you intend to use for body text with a contrast checker before committing to it.

Why does my gradient look like it has a grey band in the middle?

Browsers blend gradients in sRGB, and two saturated colours from opposite sides of the wheel pass through a dull midpoint on the way. Adding a third stop of your own in the middle, or choosing two colours closer in hue, removes the band.

Can I get more than two colours into the gradient?

The builder outputs two stops, but the syntax is extensible. Copy the code and add further colours inside the parentheses, separated by commas — `linear-gradient(90deg, #1a56db, #7c3aed, #ec4899)` is valid, and you can pin each stop with a percentage.

Are the palettes saved anywhere?

No. Everything runs in your browser and nothing is stored, so a regenerated palette is gone for good. Copy the HEX values you want to keep before pressing the button again.