Thiết kế / Màu sắc

Trình tạo thang màu Tailwind

Biến một màu thương hiệu thành bảng màu Tailwind CSS đầy đủ từ 50 đến 950, được xây dựng trong OKLCH như màu của Tailwind, rồi sao chép dưới dạng CSS chủ đề Tailwind 4, cấu hình Tailwind 3 hoặc biến CSS.

Trình tạo thang màu Tailwind: Mỗi sắc độ sử dụng độ sáng, độ bão hòa màu và độ lệch nhẹ của sắc độ mà các bảng màu riêng của Tailwind có ở cấp độ đó, được đo trong không gian màu OKLCH, sau đó dịch chuyển để màu của bạn nằm chính xác ở sắc độ đã chọn. Các màu xám sử dụng các họ màu xám của Tailwind. Những màu nằm ngoài gam sRGB không thể hiển thị được sẽ được đưa vào bằng phương pháp ánh xạ gam màu CSS Color 4, giống như trình duyệt; đầu ra Tailwind 4 giữ nguyên các giá trị OKLCH, còn các định dạng khác sử dụng mã hex. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục
Công cụ hằng ngày
Lượt chạy
Trong trình duyệt của bạn
Chi phí
Miễn phí · không cần đăng ký
Trạng thái khả dụng
Sẵn sàng sử dụng
Trình tạo thang màu TailwindXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

50#f2f8ffoklch(97.6% 0.012 250.3)
100#dfecffoklch(93.9% 0.029 258.1)
200#bcd9ffoklch(87.6% 0.061 255.8)
300#8fbeffoklch(79.3% 0.106 256.6)
400#5e9cffoklch(69.6% 0.16 259.5)
500#3b82f6oklch(62.3% 0.188 259.8)
600#2668daoklch(54.2% 0.187 260.6)
700#1f57b6oklch(47.7% 0.163 260.6)
800#1f4997oklch(42.3% 0.137 261.4)
900#20417coklch(38.4% 0.109 261.4)
950#15274coklch(27.9% 0.073 263.2)

CSS (@theme)

@theme {
  --color-brand-50: oklch(97.6% 0.012 250.3);
  --color-brand-100: oklch(93.9% 0.029 258.1);
  --color-brand-200: oklch(87.6% 0.061 255.8);
  --color-brand-300: oklch(79.3% 0.106 256.6);
  --color-brand-400: oklch(69.6% 0.16 259.5);
  --color-brand-500: oklch(62.3% 0.188 259.8);
  --color-brand-600: oklch(54.2% 0.187 260.6);
  --color-brand-700: oklch(47.7% 0.163 260.6);
  --color-brand-800: oklch(42.3% 0.137 261.4);
  --color-brand-900: oklch(38.4% 0.109 261.4);
  --color-brand-950: oklch(27.9% 0.073 263.2);
}

Các sắc độ tuân theo độ sáng, độ bão hòa màu và độ lệch sắc độ của chính các bảng màu Tailwind, được đo bằng OKLCH, vì vậy thang màu được tạo từ blue-500 của Tailwind chỉ khác màu xanh của Tailwind vài mức khó nhận biết. Các màu nằm ngoài phạm vi sRGB được đưa vào bằng phương pháp ánh xạ gam màu của CSS Color 4.

Sử dụng thang màu

Một cách dùng phổ biến là dùng 50–100 cho nền trang và thẻ, 200–300 cho đường viền, 500–600 cho nút và liên kết, 700 cho trạng thái di chuột, và 800–950 cho văn bản trên nền sáng. Hãy kiểm tra các cặp văn bản và nền bằng công cụ kiểm tra độ tương phản màu.

Để chuyển đổi một màu đơn giữa hex, RGB, HSL và OKLCH, hãy dùng bộ chuyển đổi màu; để bắt đầu từ một bức ảnh, hãy dùng công cụ trích xuất bảng màu.

Tailwind 4 và OKLCH

Tailwind CSS 4 định nghĩa màu bằng OKLCH, có thể mô tả các màu vượt ngoài sRGB trên màn hình có gam màu rộng. Kết quả Tailwind 4 ở đây vẫn nằm trong sRGB, vì vậy màu sắc trông giống nhau trên mọi màn hình.

Cách sử dụng

  1. Chọn màu của bạn hoặc dán mã hex của màu đó.
  2. Chọn sắc độ mà màu đó nên dùng, thường là 500, hoặc để trình tạo tự sắp xếp.
  3. Sao chép mã cho Tailwind 4, Tailwind 3 hoặc các biến CSS thông thường.

Quyền riêng tư và giới hạn

Mọi thứ được tạo trong trình duyệt của bạn.

Công cụ liên quan

Bộ chuyển đổi màuCông cụ kiểm tra độ tương phảnTrích xuất bảng màu

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

Tại sao nên dùng OKLCH?

Các bước bằng nhau về độ sáng trong OKLCH trông như những bước bằng nhau đối với mắt ở mọi sắc độ. Vì vậy, thang màu vàng và xanh dương được xây dựng theo cùng một cách sẽ có độ tương phản tương đồng, điều mà HSL không làm được.

Màu thương hiệu của tôi nên là sắc độ nào?

Thông thường là 500 hoặc 600, nơi Tailwind giữ những màu mạnh nhất. Màu rất nhạt như màu pastel phù hợp hơn với 200 hoặc 300; hãy chọn Tự động để đặt màu dựa trên độ sáng của màu đó.

Văn bản trên các sắc độ này có dễ đọc không?

Thông thường, văn bản màu trắng cần sắc độ 600 hoặc tối hơn, còn văn bản màu tối cần sắc độ 400 hoặc sáng hơn. Tuy nhiên, hãy kiểm tra từng cặp bằng công cụ kiểm tra độ tương phản.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản