DEVELOPER TOOLING
Tailwind Palette Generator
Generate calibrated 50–950 color scales formatted for Tailwind CSS v4's modern @theme syntax and Tailwind v3 configuration objects.
50#ECF3FF
100#DFE6FF
200#BECAFF
300#96A2FF
400#7A81FF
500#6366F1
600#4B47D0
700#3727B1
800#260093
900#14005A
950#06002D
Tailwind Component Verification
Subtle alert container: bg-brand-50
Tailwind CSS v4 (@theme)
@theme {
--color-brand-50: #ECF3FF;
--color-brand-100: #DFE6FF;
--color-brand-200: #BECAFF;
--color-brand-300: #96A2FF;
--color-brand-400: #7A81FF;
--color-brand-500: #6366F1;
--color-brand-600: #4B47D0;
--color-brand-700: #3727B1;
--color-brand-800: #260093;
--color-brand-900: #14005A;
--color-brand-950: #06002D;
}Tailwind CSS v3 (tailwind.config.js)
module.exports = {
theme: {
extend: {
colors: {
'brand': {
"50": "#ECF3FF",
"100": "#DFE6FF",
"200": "#BECAFF",
"300": "#96A2FF",
"400": "#7A81FF",
"500": "#6366F1",
"600": "#4B47D0",
"700": "#3727B1",
"800": "#260093",
"900": "#14005A",
"950": "#06002D"
}
}
}
}
};