Tailwind Color Converter

Paste any color as hex, rgb, hsl or oklch to convert it, find the closest Tailwind CSS colors, and build a matching 50 to 950 shade scale for Tailwind v4 or v3.

Your color

Closest Tailwind colors

Shade scale from your color

Name

Click a shade to copy its hex. The 500 keeps your color's hue and saturation.

Code

@theme {
  --color-brand-50: oklch(97.5% 0.012 281.1);
  --color-brand-100: oklch(93.9% 0.03 281.7);
  --color-brand-200: oklch(88.4% 0.058 281.9);
  --color-brand-300: oklch(81.1% 0.097 281.4);
  --color-brand-400: oklch(70.9% 0.155 281.3);
  --color-brand-500: oklch(61.9% 0.211 281.3);
  --color-brand-600: oklch(54.1% 0.216 281.2);
  --color-brand-700: oklch(46% 0.192 281.3);
  --color-brand-800: oklch(39% 0.163 281.3);
  --color-brand-900: oklch(33% 0.137 281.3);
  --color-brand-950: oklch(25% 0.102 280.8);
}