Trình tạo màu Tailwind CSS

Tạo bảng màu Tailwind CSS từ một màu cơ sở với các sắc độ từ 50 đến 950

Mọi xử lý diễn ra trong trình duyệt của bạn. Không có dữ liệu nào được tải lên.

Offline Ready

Trình tạo màu Tailwind CSS

Tạo bảng màu Tailwind CSS từ một màu cơ sở với các sắc độ từ 50 đến 950

🔒Mọi xử lý diễn ra trong trình duyệt của bạn. Không có dữ liệu nào được tải lên.

Màu cơ sở

Tên màu

Bảng màu (50-950)

50#F2F6FD

100#E3EDFC

200#BDD4FA

300#80AEF9

400#4388F9

500#0B64F4

600#0653D0

700#0343AA

800#033382

900#032359

950#021431

Biến 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;
}

Cấu hình 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',
        },
      },
    },
  },
};