Step a color darker / lighter
Generate 5 darker and 5 lighter variants from one HEX. Step size adjustable. Quick way to build hover/focus/active variants.
How to step a color
Pick a base, choose your step %, see 5 darker and 5 lighter variants live.
- 01
Set the base
Pick the brand or theme color to step from.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallivebase · colorhex · sRGB#3b82f6
loaded · normalisedOKLCH · ready - 02
Choose step %
10% per step is good for hover states. 5% for subtle shading.
Format conversion handles
hex,rgb(),hsl(),oklch(),color(display-p3 …)with proper gamut mapping when crossing colour spaces.stephex · rgb · hslP3gamut-mappedlivestep · options10% · live±10 / 20 / 30…
options applied · livelive - 03
Browse variants
5 darker and 5 lighter shades displayed at once.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
scanWCAG 2.2APCAAA · AAAcontrastout · converted10 · readydark…light
converted · liveWCAG-aware - 04
Copy and use
Click any swatch for HEX, or copy the whole scale.
Copy formats any swatch in the chosen syntax (
#aabbcc,rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.copyclipboardCSS varspalette JSONblobok · copiedready · done✓ Copied
shipped · ready to shipsuccess
Colour work that survives accessibility audits
Use OKLCH for manipulation
OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.
Test against WCAG 2.2
4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.
Mind gamut clipping
P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.
Colour blindness affects 8%
Use the Color Blindness simulator to check critical UI before launch.
Don’t hardcode hex
Use CSS variables. Light/dark themes become trivial when colours are tokenised.
Dark mode isn’t inverted
Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.
When to darken or lighten
Hover/active states, theming, shadows.
Hover states
Step a primary 10% lighter for hover, 10% darker for active. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.
WCAG 2.2 AATonal scales
Quick alternative to manually tuning Tailwind shades. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).
P3-awareBrand variants
Match the right contrast for backgrounds and borders. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.
perceptually-uniformShadows
Generate a darker tone for box-shadow color. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.
gamut-safeQuick fixes
Adjust one color to fix a barely-failing contrast check. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.
a11yCross-tool
Drop variants into Figma styles or design tokens. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.
design-tokenFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.