Color & toolsFreemiumFeatured
Rampsmith
Generates accessible 11-step color ramps and checks every pair for contrast
About this resource
Rampsmith turns one brand color into an 11-step ramp from 50 to 950, adjusting lightness and saturation so each step looks evenly spaced. It checks every text and background pair against WCAG 2.2 contrast and the newer perceptual contrast method, then shows which combinations are safe for body text, large text and icons. Exports include CSS variables, a Tailwind config, JSON tokens and a Figma plugin.
It's best for designers setting up a color system and developers who maintain one. The free plan handles 3 palettes; Pro is $6 a month for unlimited palettes and team sharing. The caveat: very saturated yellows and cyans still need manual tweaks.
Highlights
- 01Contrast matrix for every text and background pair
- 02Exports CSS, Tailwind, JSON and Figma variables
- 03Dark mode ramps generated from the same source