Tailwind CSS 颜色生成器

从基础颜色生成 Tailwind CSS 调色板，色阶从 50 到 950

所有处理均在浏览器中完成，不会上传任何数据。

Offline Ready

Tailwind CSS 颜色生成器

从基础颜色生成 Tailwind CSS 调色板，色阶从 50 到 950

🔒所有处理均在浏览器中完成，不会上传任何数据。

基础颜色

颜色名称

调色板（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 变量

: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 配置

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