Build a monochromatic palette
Generate tints, shades and tones around one hue. Built on HSL — pick step count, copy variants. Great starting point for a brand system.
How to use a monochromatic palette
Pick a hue, get HSL-stepped tints/shades/tones — three rows of cohesive variants.
- 01
Choose a hue
Brand primary or any HEX you like.
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
Set step count
9 is a good default. Use 11 for Tailwind-like scales.
Format conversion handles
hex,rgb(),hsl(),oklch(),color(display-p3 …)with proper gamut mapping when crossing colour spaces.stepshex · rgb · hslP3gamut-mappedliven · options9 · live9 stops
options applied · livelive - 03
Inspect 3 rows
Tints lighten in HSL; shades darken; tones desaturate.
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.
readWCAG 2.2APCAAA · AAAcontrastrows · converted3 · readytints / shades / tones
converted · liveWCAG-aware - 04
Copy & ship
JSON of every group or click individual swatches.
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 JSON
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 use monochromatic palettes
Themes, illustration, calm UI.
Brand systems
Stay on-hue while supporting many contrast levels. 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 AACalm UI
Avoid jarring transitions with one-hue palettes. 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-awareHover/focus states
Tint up for hover, shade down for active. 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-uniformTokens
Use JSON output as input for design-token pipelines. 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-safeRapid theming
Spin up a cohesive theme in one minute. 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.
a11y-readyCross-tool
Drop variants into Figma styles. 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.