Your colour sits at 600. Click any step to copy it.
Used in the code.
/* Tailwind v4: in your CSS. Use bg-brand-500, text-brand-900... */
@theme {
--color-brand-50: #f1f7ff;
--color-brand-100: #e0eeff;
--color-brand-200: #c1ddff;
--color-brand-300: #98c8ff;
--color-brand-400: #65abfa;
--color-brand-500: #3e8ee3;
--color-brand-600: #2875c5;
--color-brand-700: #1d61a6;
--color-brand-800: #19508a;
--color-brand-900: #174372;
--color-brand-950: #09294b;
}Tailwind v4's own colours are written in OKLCH. HEX works everywhere, including older browsers and design apps.
A common way to use a scale.
Spring workshop dates are out
Background 50, badge 100, border 200, text 700 and 900, button 600 with a 700 hover.
Your colour mixed with white, black and grey in 10% steps.
Tints mixed with white
Shades mixed with black
Tones mixed with grey
Free Color Shades Generator by Hiyaly