Color & Theming

Color systems

• ★ Radix Colors — 30 carefully designed scales with light/dark variants and accessibility-aware steps. The default if you're using Radix / shadcn-flavored UIs.
• ★ Tailwind v4 default palette — OKLCH-based, perceptually uniform; the default for new Tailwind projects.
• Open Color — open-source palette; less common in 2026 but still used.
• Material You / M3 dynamic color — for Material Design apps.

Color libraries (programmatic)

• ★ culori — modern color library; OKLCH, OKLab, Hsluv, Display-P3 support; small. The default for new projects.
• chroma.js — older, smaller surface, very popular.
• color (npm) — old workhorse.
• @adobe/leonardo — generate accessible palettes from base colors.

Palette generators

• Realtime Colors — paste a 5-color palette, see it applied everywhere.
• Coolors — palette explorer.
• uicolors.app — Tailwind-style palette generator.
• Palette by Khroma — AI-generated palettes.
• Tints.dev — Tailwind-shape palettes.

Color picking

• react-colorful — tiny, accessible color picker for React.
• react-color — older, bigger.
• vue-color, svelte-colorful — non-React equivalents.

Theming engines

• CSS Custom Properties — the right answer 90% of the time.
• ★ Tailwind v4 @theme — CSS-first themes; light/dark via [data-theme=...].
• next-themes — dark mode toggle for Next.js; SSR-safe.
• vite-plugin-theme — runtime theme switching for Vite apps.
• Pinceau — design-token system for Vue/Nuxt.
• Tokenami — atomic CSS via design tokens.

Design tokens / standards

• Design Tokens W3C draft — emerging standard, JSON-based.
• Style Dictionary (Amazon) — converts design tokens to platform-specific code (CSS, iOS, Android, etc.).
• Tokens Studio (Figma plugin) — design tokens from Figma.

Accessibility / contrast

• @adobe/leonardo — palette generation with target contrast ratios.
• APCA / WCAG contrast checkers — apca-w3 (npm), online checkers.
• culori has APCA / WCAG built-in.

Pick this if…

• Default new project, shadcn-flavored: Radix Colors + Tailwind v4.
• You want OKLCH + programmatic color math: culori.
• Design tokens shared across platforms: Style Dictionary + W3C tokens.
• Light/dark toggle in Next.js: next-themes.