Color palette reference

Gradient Color Palettes

Gradient palettes are a starting point for deciding which colors can move into one another. The final result depends on direction, interpolation, area, and the content placed above it.

Useful for

  • Hero backgrounds and promotional surfaces
  • Illustrations, banners, and selected states
  • Soft depth behind cards and navigation

Pairing notes

Choose a quiet endpoint before adding a vivid midpoint. If the gradient sits behind text, reserve a lower-noise region and use an opaque or translucent content surface where needed.

Contrast note

A gradient can pass contrast in one area and fail a few pixels later. Test text across the whole surface or add a consistent overlay that preserves readability.

Continue with GradientDeck

Use the open the css gradient generator to turn this family into an interface-ready system, or read choosing gradients, mesh, and glass for the implementation decisions behind the visual output.

Editorial reviewed 2026-07-05.