Tailwind CSS Farbgenerator

Tailwind CSS-Farbpaletten aus einer Grundfarbe mit Abstufungen von 50 bis 950 generieren

Die gesamte Verarbeitung findet in Ihrem Browser statt. Es werden keine Daten hochgeladen.

Offline Ready

Tailwind CSS Farbgenerator

Tailwind CSS-Farbpaletten aus einer Grundfarbe mit Abstufungen von 50 bis 950 generieren

🔒Die gesamte Verarbeitung findet in Ihrem Browser statt. Es werden keine Daten hochgeladen.

Grundfarbe

Farbname

Farbpalette (50-950)

50#F2F6FD

100#E3EDFC

200#BDD4FA

300#80AEF9

400#4388F9

500#0B64F4

600#0653D0

700#0343AA

800#033382

900#032359

950#021431

CSS-Variablen

:root {
  --color-primary-50: #F2F6FD;
  --color-primary-100: #E3EDFC;
  --color-primary-200: #BDD4FA;
  --color-primary-300: #80AEF9;
  --color-primary-400: #4388F9;
  --color-primary-500: #0B64F4;
  --color-primary-600: #0653D0;
  --color-primary-700: #0343AA;
  --color-primary-800: #033382;
  --color-primary-900: #032359;
  --color-primary-950: #021431;
}

Tailwind-Konfiguration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': {
      50: '#F2F6FD',
      100: '#E3EDFC',
      200: '#BDD4FA',
      300: '#80AEF9',
      400: '#4388F9',
      500: '#0B64F4',
      600: '#0653D0',
      700: '#0343AA',
      800: '#033382',
      900: '#032359',
      950: '#021431',
        },
      },
    },
  },
};