How different frameworks use color

Palette structure

Tailwind uses hue families with numeric steps: blue-50, blue-100, …, blue-900. Typically 9–10 steps per hue, where lower numbers are lighter tints and higher numbers are darker, more saturated shades.

A neutral set (gray, zinc, slate, stone, etc.) follows the same pattern.

Naming

{hue}-{step} — e.g. blue-500, emerald-600. Semantic names are built on top of these in your own tokens or project config.

Philosophy

• Utility‑first mapping — each step is predictable and easy to reference in code.
• Palettes that "just work" in many contexts, especially for light themes.
• Balance between practical accessibility and visually strong colors.
• Newer releases lean on perceptual color spaces (OKLCH) to make steps more visually even.

When it shines

• You want a ready‑made scale for each hue without designing your own from scratch.
• You like working with numeric steps and utility classes (bg-blue-500, text-slate-900).
• You're building Tailwind‑based UIs or component libraries.

Palette structure

The classic Material 2 palette uses steps 50, 100, 200, …, 900 plus accent shades A100, A200, A400, A700 for brighter variants.

Material You (Material 3) moves to a tonal 0–100 scale per base hue, with different tones mapped to background, surface, on‑color text and other roles in both light and dark themes.

Naming

Classic: Blue 500, Deep Purple A400. Material You introduces semantic tokens: primary, onPrimary, primaryContainer.

Philosophy

• Systematic, spec‑driven design — clear documentation on how and where to use each tone.
• Tight connection between color, elevation, light & dark themes, and surface roles.
• Structured theming within a predictable framework.

When it shines

• You're building Android or Material‑like web apps.
• You want strong guidance on which tones to use for which roles.
• You care about a consistent story for light/dark and elevation.

Palette structure

Radix provides paired light and dark palettes for each hue: blue1–blue12 for light mode and blueDark1–blueDark12 for dark mode, often with alpha variants for transparent overlays.

Steps are tuned for specific UI roles — background layers, borders, solid fills and strong accents — not just a light-to-dark gradient.

Naming

{hue}{index} — e.g. blue9, tomato6, blueDark9. Semantic color names like tomato, grass and amber follow the same index pattern.

Philosophy

• Perception‑driven and UI‑centric — each step is crafted to be useful in actual components.
• Easy light/dark theming: the same index (e.g. blue9 vs blueDark9) plays a similar role in both themes.
• Used heavily in React component libraries like shadcn/ui and Radix UI itself.

When it shines

• You want out‑of‑the‑box light + dark palettes tuned for real UI use.
• You're building design systems in React with token‑based theming.
• You like the idea that colorScale[9] is "solid accent" in both light and dark modes.

Palette structure

Open Color offers 13 hues (gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, orange) each with steps 0–9 from light to dark. The design emphasises predictable, smooth gradients and good default contrast.

Naming

{hue}-{index} — e.g. grape-7, gray-3. Higher indices mean darker and more saturated.

Philosophy

• Pragmatic, open‑source palette for digital products.
• Less stylised than Tailwind or Material — more neutral and reusable.
• Maintained as a small, focused project with a permissive MIT license.

When it shines

• You want a clean, minimalist base palette for UI or content sites.
• You're not tied to a specific framework.
• You value smooth gradients and simple naming — and a compact, easy-to-reason set.