Chuyển tới nội dung chính
Beru

Tạo dải sắc Tailwind

Biến một màu thành dải sắc từ 50 đến 950 và sao chép dưới dạng theme Tailwind v4, biến CSS hoặc cấu hình v3.

Màu gốc

Dùng cho tên biến: chữ thường, số và dấu gạch ngang.
Kiểu dải

Giữ nguyên sắc độ, bước giống Tailwind. Màu gốc của bạn tương đương khoảng mức 430.

Dải màu: primary

  1. 50#f1f5fc
  2. 100#dde9fb
  3. 200#bed6fc
  4. 300#90b9fa
  5. 400#5190f7 · ≈ gốc
  6. 500#1669e6
  7. 600#1053bb
  8. 700#0a4296
  9. 800#063173
  10. 900#062453
  11. 950#041532

Mã

Tailwind v4 @theme
@theme {
  --color-primary-50: #f1f5fc;
  --color-primary-100: #dde9fb;
  --color-primary-200: #bed6fc;
  --color-primary-300: #90b9fa;
  --color-primary-400: #5190f7;
  --color-primary-500: #1669e6;
  --color-primary-600: #1053bb;
  --color-primary-700: #0a4296;
  --color-primary-800: #063173;
  --color-primary-900: #062453;
  --color-primary-950: #041532;
}

Chạy ngay trên trình duyệt; những gì bạn nhập không rời khỏi trang này.

Cách hoạt động

Dải sắc từ màu gốc

Màu gốc được đặt vào bậc mà nó giống nhất, mười một bậc còn lại (50, 100 đến 900, 950) được sinh quanh nó trong OKLCH, giữ sắc độ và điều chỉnh dần độ sáng và độ đậm.

Năm chế độ đổi tính cách dải màu: classic giữ sắc độ đều, hue shift làm đầu sáng ấm và đầu tối lạnh, anchored đẩy hai đầu về trắng và đen, vivid giữ độ đậm tối đa sRGB cho phép, muted giữ vẻ trầm.

Mã dùng ngay

Sao chép dải màu dưới dạng khối @theme của Tailwind v4, biến CSS ở HEX hoặc OKLCH, hay mục tailwind.config cho v3. Tên bạn đặt trở thành tên biến.

Công cụ khác

Tất cả 238 công cụ