Gerador de Cores Tailwind CSS

Gere paletas de cores Tailwind CSS a partir de uma cor base com tons de 50 a 950

Todo o processamento acontece no seu navegador. Nenhum dado é enviado.

Offline Ready

Gerador de Cores Tailwind CSS

Gere paletas de cores Tailwind CSS a partir de uma cor base com tons de 50 a 950

🔒Todo o processamento acontece no seu navegador. Nenhum dado é enviado.

Cor Base

Nome da Cor

Paleta de Cores (50-950)

50#F2F6FD

100#E3EDFC

200#BDD4FA

300#80AEF9

400#4388F9

500#0B64F4

600#0653D0

700#0343AA

800#033382

900#032359

950#021431

Variáveis CSS

: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;
}

Config Tailwind

// 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',
        },
      },
    },
  },
};