Tailwind Palette Tailwind 팔레트 생성기
Enter a single base color (HEX) and instantly generate an 11-shade Tailwind palette (50–950). It uses an OKLCH lightness scale to spread shades evenly from a light 50 to a dark 950, pinning your input color to its nearest step. Click any shade to copy its HEX, or copy the whole palette as a Tailwind v4 @theme block, v3 config or CSS variables.
@theme {
--color-brand-50: #F1F6FF;
--color-brand-100: #DFEAFF;
--color-brand-200: #C6DAFF;
--color-brand-300: #A0C0FF;
--color-brand-400: #6D9CFF;
--color-brand-500: #4B83FF;
--color-brand-600: #3A70EB;
--color-brand-700: #2659D2;
--color-brand-800: #1545BD;
--color-brand-900: #0735AD;
--color-brand-950: #001667;
}About this tool
What it is, who it's for, how it works and why you'd use it.
Tailwind Palette Generator is a tool that builds an 11-shade Tailwind CSS color palette (50–950) from a single base color.
It is for front-end developers working with Tailwind CSS and designers who need to define color scales and design tokens.
Enter a base HEX and shades from 50 to 950 are generated along an OKLCH lightness scale; copy a shade by clicking it, or copy the palette as Tailwind config, an @theme block or CSS variables.
You get a consistent light-to-dark scale instantly without hand-tuning each step, speeding up design systems and theme tokens.