Tailwind Color Generator

Tailwind v3 config

// tailwind.config.{js,ts} module.exports = { theme: { extend: { colors: { brand: { 50: "#f9fafb", 100: "#f8fafc", 200: "#e7edf7", 300: "#b1c9f0", 400: "#73a3f1", 500: "#3b82f6", 600: "#186af0", 700: "#145acb", 800: "#154aa1", 900: "#143b79", 950: "#112b54", }, }, }, }, };

Tailwind v4 @theme

@import "tailwindcss"; @theme { --color-brand-50: #f9fafb; --color-brand-100: #f8fafc; --color-brand-200: #e7edf7; --color-brand-300: #b1c9f0; --color-brand-400: #73a3f1; --color-brand-500: #3b82f6; --color-brand-600: #186af0; --color-brand-700: #145acb; --color-brand-800: #154aa1; --color-brand-900: #143b79; --color-brand-950: #112b54; }

CSS variables

:root { --brand-50: #f9fafb; --brand-100: #f8fafc; --brand-200: #e7edf7; --brand-300: #b1c9f0; --brand-400: #73a3f1; --brand-500: #3b82f6; --brand-600: #186af0; --brand-700: #145acb; --brand-800: #154aa1; --brand-900: #143b79; --brand-950: #112b54; }

Utility class names

bg-brand-50 text-brand-50 bg-brand-100 text-brand-100 bg-brand-200 text-brand-200 bg-brand-300 text-brand-300 bg-brand-400 text-brand-400 bg-brand-500 text-brand-500 bg-brand-600 text-brand-600 bg-brand-700 text-brand-700 bg-brand-800 text-brand-800 bg-brand-900 text-brand-900 bg-brand-950 text-brand-950