Tailwind カラースケール生成

Build a Tailwind-style 50-950 scale from any colour

Tailwind Shades takes a single base colour and produces an eleven-step ramp (50, 100, 200, ..., 950) using OKLCH. The output is ready to drop into a Tailwind theme, paste as CSS variables, or copy as OKLCH variables for native CSS use.

1. Inputs

• Base Colour. HEX field plus native colour picker. The page also reads a ?color= query parameter on first load so you can deep-link a starting point.
• Colour Name. The slug used in CSS variable and Tailwind config output. Auto-sanitised to lowercase, digits, and hyphens.
• Generation Mode. Classic, Hue Shift, Luminance Anchored, Vivid, or Muted. Switching modes regenerates every shade immediately.

2. Shade preview

The horizontal strip shows all eleven shades stacked side by side. The grid below shows each shade with its level number and value in the active notation. Click any swatch to copy that shade.

3. Code output

• CSS Variables. A :root block with a HEX (or current notation) variable per shade.
• CSS Variables (OKLCH). Same shape but with native oklch() values, useful for modern CSS where wider gamut may be picked up by display-P3 browsers.
• Tailwind Config. A drop-in entry for the theme.colors object using the colour name you set.