Tailwind-Farbpalettengenerator

Erzeugen Sie aus einer einzigen Markenfarbe eine vollständige Tailwind-CSS-Palette (50–950) mit wahrnehmungsbezogen gleichmäßigen Abstufungen.

Tailwind CSS nutzt für jede Farbfamilie eine elfstufige Zahlenskala (50, 100–900, 950), wobei 500 üblicherweise der Grundton ist.

Im OKLCH-Farbraum erzeugte Skalen ergeben wahrnehmungsbezogen gleichmäßige Schritte — jede Abstufung erscheint dem Auge gleich weit entfernt.

Markenfarbe

Erzeugte Palette

100

200

300

400

500

600

700

800

900

950

colors: {
  brand: {
    '50': '#eaf0fa',
    '100': '#d2e1f9',
    '200': '#9ec1fa',
    '300': '#6da2f8',
    '400': '#3c83f6',
    '500': '#0b64f4',
    '600': '#0950c3',
    '700': '#073c92',
    '800': '#052861',
    '900': '#071936',
    '950': '#060d19',
  },
}

--color-brand-50: #eaf0fa;
--color-brand-100: #d2e1f9;
--color-brand-200: #9ec1fa;
--color-brand-300: #6da2f8;
--color-brand-400: #3c83f6;
--color-brand-500: #0b64f4;
--color-brand-600: #0950c3;
--color-brand-700: #073c92;
--color-brand-800: #052861;
--color-brand-900: #071936;
--color-brand-950: #060d19;

Markenfarbe

Erzeugte Palette

100

200

300

400

500

600

700

800

900

950

colors: {
  brand: {
    '50': '#eaf0fa',
    '100': '#d2e1f9',
    '200': '#9ec1fa',
    '300': '#6da2f8',
    '400': '#3c83f6',
    '500': '#0b64f4',
    '600': '#0950c3',
    '700': '#073c92',
    '800': '#052861',
    '900': '#071936',
    '950': '#060d19',
  },
}

--color-brand-50: #eaf0fa;
--color-brand-100: #d2e1f9;
--color-brand-200: #9ec1fa;
--color-brand-300: #6da2f8;
--color-brand-400: #3c83f6;
--color-brand-500: #0b64f4;
--color-brand-600: #0950c3;
--color-brand-700: #073c92;
--color-brand-800: #052861;
--color-brand-900: #071936;
--color-brand-950: #060d19;