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.
Lighter end
Darker end
: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;
}Build a consistent color ramp from one brand color
A color scale turns one base color into a sequence of lighter tints and darker shades. Use the ramp for surface fills, borders, hover states, charts, and emphasis while keeping each step related to the same starting hue. Adjust the number of steps and tune lightness, saturation, and hue shift independently to make the transition suit your interface rather than accepting a fixed set of swatches.
Check the ramp in the interface where it will be used
Review the light and dark ends against the actual page background. A smooth visual progression does not guarantee that every adjacent pair has enough contrast for text or controls. Test the combinations used for labels and buttons with the WCAG contrast checker, then export the scale in the format your design or development workflow needs.