Two-colour gradients: 30 pairs that always work

A two color gradient is a blend from one colour to another, and it is the safest gradient you can make: two colours are easy to choose, easy to recolour and easy to keep consistent. Whether a pair works comes down to two things, how far apart the hues are on the colour wheel and how different they are in lightness. Get those right and almost any two colours make a good gradient. Below are the rules, then thirty pairs that follow them.

Rule 1: watch the hue distance

Hue distance is how far apart two colours sit on the colour wheel, measured in degrees. It predicts what happens in the middle of the blend, which is where two-colour gradients succeed or fail.

Distances in the first row are analogous colours. Distances in the last row are complementary colours, which look striking side by side but need help when blended.

Rule 2: give it a lightness difference

Two colours of the same lightness make a gradient that feels flat, as if it is not going anywhere. A clear difference in lightness gives the blend direction, like light falling from one side. It also creates a practical advantage: text can sit at the darker end in white, or at the lighter end in a dark ink.

Close-hue pairs

These pairs sit within about 60 degrees of each other. They are impossible to make muddy and look good on almost anything, from buttons to full-screen backgrounds. Blueberry and Tide, for example, are both blue moving towards violet, which reads as a single colour catching the light.

Light-to-dark pairs

These pairs keep one hue family and change lightness from pale to deep. They are the most versatile two-colour gradients: calm enough for a whole page, and with a dark end ready for white type. They also make excellent brand gradients, because they extend a single brand colour rather than adding a new one. See monochromatic colour schemes for the theory.

Contrast pairs that stay clean

These pairs are further apart, between about 90 and 150 degrees, but each one has a bright midpoint when blended the default way. Peach and violet pass through mauve, cyan and magenta through periwinkle, orange and magenta through hot pink. They are more energetic than close pairs, good for launches, music and anything that should stand out.

Moving the midpoint

By default, a two-colour gradient is half and half. CSS lets you move the point where the two colours are evenly mixed with a colour hint: a bare percentage between the stops. Push it towards one end and the other colour takes over more of the surface, without adding a third colour.

/* Even blend: the mix point sits at 50% */
.even   { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }

/* Colour hint at 25%: violet arrives early and fills most of the box */
.violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); }

/* Colour hint at 75%: blue holds on for most of the box */
.blue   { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); }

Where to put text on a two-colour gradient

A two-colour gradient has a built-in layout: one end is lighter and one is darker. Put the words at the end that contrasts most with your type colour, and let the other end carry the colour. For white type, that is the darker end; for dark ink, the lighter one. Never centre small text over the midpoint of a light-to-dark pair, because the contrast changes across the line. Text on a gradient covers the checks in detail.

Making a two-colour gradient your own

Two-colour gradients are popular precisely because they are safe, so the popular pairs are everywhere. To make one recognisable, change something people notice without thinking about it: a steeper or unusual angle (see gradient angle), a shifted midpoint, a fine grain, or a third colour used only at one edge. When you are ready to go beyond two, the 60 gradient colour combinations are grouped by mood.

If you already know the two colours you want, you can type them into the Market search, such as "blue and violet", and design with the Marks built around them.