Bảng màu

Màu red của Tailwind CSS

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

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

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

red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-950

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

Tailwind v4 (CSS, @theme)

@theme {
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          50: '#fef2f2',
          100: '#fee2e2',
          200: '#fecaca',
          300: '#fca5a5',
          400: '#f87171',
          500: '#ef4444',
          600: '#dc2626',
          700: '#b91c1c',
          800: '#991b1b',
          900: '#7f1d1d',
          950: '#450a0a'
        }
      }
    }
  }
}

Biến CSS (HEX)

:root {
  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --red-950: #450A0A;
}

Thêm màu Tailwind

slategrayzincneutralstoneorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

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

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

Trong Tailwind v3, red-500 là #EF4444, tức rgb(239, 68, 68). Trong Tailwind v4, nó được định nghĩa là oklch(63.7% 0.237 25.331).

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

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

Framework khác

Bảng màu Tailwind CSSBảng màu Material DesignBảng màu BootstrapBảng màu của các framework

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.