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