Màu fuchsia của Tailwind CSS

11 sắc độ của màu fuchsia trong Tailwind CSS, từ fuchsia-50 (sáng nhất) đến fuchsia-950 (tối nhất). Bấm vào một giá trị để sao chép.

Các sắc độ của fuchsia

HEX và RGB theo Tailwind v3; OKLCH theo Tailwind v4. Bấm vào một giá trị để sao chép.

fuchsia-50

fuchsia-100

fuchsia-200

fuchsia-300

fuchsia-400

fuchsia-500

fuchsia-600

fuchsia-700

fuchsia-800

fuchsia-900

fuchsia-950

Sao chép toàn bộ bảng màu

Tailwind v4 (CSS, @theme)

@theme {
  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
  --color-fuchsia-400: oklch(74% 0.238 322.16);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        fuchsia: {
          50: '#fdf4ff',
          100: '#fae8ff',
          200: '#f5d0fe',
          300: '#f0abfc',
          400: '#e879f9',
          500: '#d946ef',
          600: '#c026d3',
          700: '#a21caf',
          800: '#86198f',
          900: '#701a75',
          950: '#4a044e'
        }
      }
    }
  }
}

Biến CSS (HEX)

:root {
  --fuchsia-50: #FDF4FF;
  --fuchsia-100: #FAE8FF;
  --fuchsia-200: #F5D0FE;
  --fuchsia-300: #F0ABFC;
  --fuchsia-400: #E879F9;
  --fuchsia-500: #D946EF;
  --fuchsia-600: #C026D3;
  --fuchsia-700: #A21CAF;
  --fuchsia-800: #86198F;
  --fuchsia-900: #701A75;
  --fuchsia-950: #4A044E;
}

Thêm màu Tailwind

slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple pink rose

Câu hỏi thường gặp

Mã HEX của Tailwind fuchsia-500 là gì?

Trong Tailwind v3, fuchsia-500 là #D946EF, tức rgb(217, 70, 239). Trong Tailwind v4, nó được định nghĩa là oklch(66.7% 0.295 322.15).

Làm sao dùng Tailwind fuchsia trong dự án của tôi?

Dùng các class như bg-fuchsia-500, text-fuchsia-700 hoặc border-fuchsia-200. Trong Tailwind v4, bạn cũng có thể dùng biến CSS var(--color-fuchsia-500) trong CSS của riêng bạn.

Framework khác

Tailwind CSS, Material Design và Bootstrap là thương hiệu của chủ sở hữu tương ứng. Các giá trị lấy từ tài liệu và gói công khai của họ: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.