TLDR Design · STRATEGIES & TACTICS

HOW TO CREATE A COLOR RAMP USED IN DESIGN SYSTEMS

uxdesign.cc6 min read

Summary from the TLDR Design newsletter

A color ramp, also known as a color scale, is a visual representation of how colors transition from light to dark smoothly and continuously. The steps required to create a color ramp are: start with your defined brand colors, adjust lightness at each color stop, adjust saturation as needed, check contrast ratios, repeat for all other colors, and aim for similar lightness and saturation for each stop as the other colors.