GradientAccessible color scales from one brand color, where the step number tells you the contrast. Light and dark mode, OKLCH, export for Tailwind and CSS.
npx @sweberdev/gradient "#e30613" --format tailwind --out app/gradient.cssGradient turns one brand color into eleven steps from 50 to 950, for light and dark mode, plus a grey tinted with your hue. Most palette generators space lightness evenly, so contrast depends on the hue: blue-600 passes on white, yellow-600 often does not. Gradient solves every step for a fixed contrast instead. Step 500 always reaches 3:1, step 600 4.5:1 and step 800 7:1 against the page, in dark mode against black, for every color you start from.
Colors are computed in OKLCH and brought into sRGB by lowering chroma only, so the contrast stays where it was solved. Every step comes with a readable text color for buttons and badges. Export the palette as a Tailwind CSS v4 theme, a Tailwind v3 config, CSS custom properties, W3C design tokens or JSON, from code or with one CLI command. No dependencies, MIT-licensed.
Example
A short exampleCopy it into your project.
scripts/colors.ts
import { checkPalette, createPalette, toTailwind } from "@sweberdev/gradient"
import { writeFileSync } from "node:fs"
const palette = createPalette({ brand: "#e30613", accent: "#0a84ff" })
writeFileSync("app/gradient.css", toTailwind(palette))
// bg-brand-50, text-brand-700, bg-brand-600 text-brand-on-600 …
console.log(checkPalette(palette).every((c) => c.pass)) // trueFeatures
What you getFree under MIT, with Pro on top.
Free, MIT
- Eleven steps from one color, with fixed contrast per step: 500 ≥ 3:1, 600 ≥ 4.5:1, 800 ≥ 7:1 on the page
- Dark mode with the same step numbers and the same promises, so one set of classes works in both modes
- OKLCH throughout, with gamut mapping that never moves lightness
- A neutral grey tinted with your brand hue, and a readable text color for every step
- Export as Tailwind CSS v4 theme, Tailwind v3 config, CSS variables, W3C design tokens or JSON
- Contrast checks for CI, also when you pin your exact brand color
- CLI and a zero-dependency library that runs in Node.js and the browser
FAQ
QuestionsShort answers.
Does Gradient keep my exact brand color?
By default the closest step gets your hue and chroma, with lightness adjusted to the contrast of that step. Pass --pin to keep the exact color; the contrast check then tells you if that breaks a promise.
Why are the colors in OKLCH?
OKLCH is perceptually even: the same lightness looks equally bright in every hue, and chroma changes do not shift the hue. All browsers since 2023 support it. Use the hex export for older ones.
Does a passing contrast check make my site accessible?
It covers the contrast criteria of WCAG 2.2 (1.4.3, 1.4.6 and 1.4.11). It cannot tell whether information depends on color alone or how the colors are used. For checks of the whole site, see Surjection.
Is there a paid version?
No. Gradient is MIT-licensed and complete. It is also the color foundation of the upcoming UI library Lattice.
Articles
ArticlesGuides and release notes.
2026-10-05
Gradient 0.1.0 releasedAccessible OKLCH color scales from one brand color. The step number tells you the contrast, in light and dark mode. Export for Tailwind, CSS variables and design tokens.