Sourcefile Club

Color & toolsFreemiumFeatured

Rampsmith

Generates accessible 11-step color ramps and checks every pair for contrast

Get resource (opens in a new tab)rampsmith.example

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

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

    • accessibility
    • figma plugin
    • wcag
    Paid$8/mo

  • Palette Press

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

    • palettes
    • image
    • tokens
    FreeFree

  • Nibble SVG

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

    • svg
    • optimization
    • open source
    Open sourceFree
Live demo · Sourcefile Club— View template →