SiteDesign Systems & Foundations · Theming & color
Single-purpose tool that expands one base colour into a full tint and shade ramp ready for a token file.
Why it’s a gem
One job, done fast — the fastest path from brand hex to usable ramp.
Free browser tool generating and browsing hundreds of shadcn/ui theme variable sets with instant copy-paste CSS output.
Thirty-two twelve-step colour scales where each step has a defined UI role, with automatic dark and alpha variants.
Theme editor and extended component gallery for shadcn/ui, with visual token editing and exportable theme files.
shadcn/ui theme generator producing OKLCH-based CSS variable sets with live component previews across light and dark modes.
Visual, parametric CSS editing environment that treats every CSS property as an editable, themeable design parameter.
Adobe's contrast-first colour tool: define target contrast ratios and it generates the colours, plus adaptive theme output.