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

Tags

Related resources

More in Color & tools
  • Contrast Ledger

    Color & tools

    Paid

    A Figma plugin that audits every text layer in a file for contrast issues

    $8/mo4.6
    • accessibility
    • figma plugin
  • Palette Press

    Color & tools

    Free

    Pull a usable palette out of any photo, then export it as tokens

    Free4.3
    • palettes
    • image
  • Nibble SVG

    Color & tools

    Open source

    An in-browser SVG optimizer with a side-by-side diff before you export

    Free4.6
    • svg
    • optimization
Live demo · Bezier Bureau— View template →