SiteDesign Systems & Foundations · Theming & color
shadcn/ui theme generator producing OKLCH-based CSS variable sets with live component previews across light and dark modes.
Why it’s a gem
OKLCH-native output means the dark mode is derived, not hand-tweaked.
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.
Visual, parametric CSS editing environment that treats every CSS property as an editable, themeable design parameter.
Single-purpose tool that expands one base colour into a full tint and shade ramp ready for a token file.
Adobe's contrast-first colour tool: define target contrast ratios and it generates the colours, plus adaptive theme output.