Color Scale Generator.

One base colour, N lighter and M darker shades — every step is tunable. Use the saturation, lightness, and hue shift sliders to bend each end of the ramp, then mix toward any target colour. Great for design system scales, dark-mode pairs, and Tailwind-style ramps.

:root {
  --scale-50: #A9B5A6;
  --scale-100: #88AA88;
  --scale-200: #67A274;
  --scale-300: #449C69;
  --scale-400: #1D9A6C;
  --scale-500: #108E78;
  --scale-600: #078080;
  --scale-700: #00596E;
  --scale-800: #003555;
  --scale-900: #001B3D;
  --scale-950: #000925;
}