Color Scale Generator

Generate beautiful and consistent color scales from a single base color.

50#1B0D26

H: 274°S: 49%L: 10%

100#321649

H: 273°S: 54%L: 19%

200#4A1D6D

H: 274°S: 58%L: 27%

300#612293

H: 273°S: 62%L: 35%

400#7926BA

H: 274°S: 66%L: 44%

500#9031DB

H: 274°S: 70%L: 53%

600#A452E5

H: 273°S: 74%L: 61%

700#B875EE

H: 273°S: 78%L: 70%

800#CC99F5

H: 273°S: 82%L: 78%

900#E0BFFA

H: 274°S: 86%L: 86%

950#F4E7FE

H: 274°S: 92%L: 95%

Controls

Base Color

Steps (11)

Hue Shift (0°)

Curves

Saturation

50%90%

Lightness

10%95%

Color Scale FAQ

What is a color scale?

A color scale (or color ramp) is a set of related colors that transition smoothly. It's essential for creating harmonious UIs, data visualizations, and branding. For example, a scale can provide shades for buttons from light (hover) to dark (pressed).

How do I use the controls?

Start by entering a base color, then fine-tune your scale:

Hue Shift: Adds a slight color variation to the ends of the scale for a more dynamic, natural feel.
Saturation: Controls the color's intensity. A common technique is to have lower saturation for dark shades and higher for mid-tones.
Lightness: Controls the brightness, from dark to light.

What do the curves in the chart represent?

The chart visualizes how saturation and lightness change across your color scale. This helps you understand the 'shape' of your scale and how the colors progress from dark to light, ensuring a smooth and visually pleasing transition.