Cách dùng Tạo bảng màu Tailwind
- Nhập màu thương hiệu của bạn dưới dạng HEX, RGB, HSL hoặc OKLCH.
- Đặt tên cho bảng màu (ví dụ
brand). Tên này sẽ tạo rabg-brand-500và các class tương tự. - Giữ tùy chọn “bước gần nhất” để màu của bạn rơi đúng vào sắc độ có độ sáng tương ứng, hoặc ép về bước 500.
- Chọn định dạng xuất và sao chép vào file cấu hình Tailwind, CSS hoặc SCSS của bạn.
Thang màu 50–950 là gì?
Các hệ thống thiết kế như Tailwind CSS mô tả mỗi màu dưới dạng một dải sắc độ: 50 là tông gần trắng dùng cho nền, 500 là màu cốt lõi, còn 900–950 là các sắc độ đậm dùng cho chữ và chế độ tối. Có đủ cả dải màu giúp bạn tạo trạng thái hover và active, viền, badge và giao diện tối một cách nhất quán, thay vì phải tự ước lượng một phiên bản sáng hơn hoặc tối hơn mỗi lần.
Công cụ này tạo thang màu như thế nào?
- Màu của bạn được chuyển sang OKLCH, một không gian màu đồng đều về mặt cảm nhận, nên mỗi bước có khoảng cách thị giác đều nhau.
- Mỗi bước có độ sáng mục tiêu được mô phỏng theo bảng màu của Tailwind v4 (khoảng 97% ở 50 và khoảng 26% ở 950). Màu của bạn được đặt vào bước gần nhất, còn các mục tiêu lân cận sẽ dịch chuyển nhẹ để dải màu chảy liền mạch qua màu đó.
- Độ đậm màu (chroma) đạt đỉnh quanh 500–600 và giảm dần về hai đầu, giống như các bảng màu được chỉnh tay, nhờ vậy các tông nhạt không bị chói và các tông đậm không bị xỉn.
- Mọi sắc độ nằm ngoài gamut sRGB đều được ánh xạ lại bằng cách giảm độ đậm màu, trong khi vẫn giữ nguyên sắc độ (hue) và độ sáng.
Cách sử dụng bảng màu
Tailwind v4 đọc màu từ CSS: dán khối @theme vào stylesheet chính của bạn, và các class như bg-brand-100 sẽ xuất hiện. Tailwind v3 dùng theme.extend.colors trong tailwind.config.js. Các định dạng biến CSS và SCSS hoạt động trong mọi dự án, kể cả Webflow, nơi bạn có thể tạo biến màu tương ứng trong bảng Variables.
Mẹo về khả năng tiếp cận
Theo kinh nghiệm chung, chữ trên nền trắng cần một sắc độ đủ đậm để đạt tỷ lệ 4.5:1 (thường là 600 trở xuống), còn chữ trên nền tối thường hoạt động tốt từ 300 trở lên. Gợi ý dưới mỗi ô màu sẽ cho bạn biết điều này. Để kiểm tra các cặp màu cụ thể, hãy dùng Công cụ kiểm tra tương phản hoặc Công cụ kiểm tra APCA.
Cũng được tìm dưới tên: tailwind color generator, tailwind palette generator, thang màu 50-950, tạo màu tailwind, bảng màu thương hiệu, tạo shade tailwind, công cụ tạo màu tailwind.
Các công cụ dùng kèm tốt với Tạo bảng màu Tailwind
- Trích xuất bảng màu từ ảnh — Tìm bảng màu của bất kỳ hình ảnh nào: ảnh chụp, logo, ảnh chụp màn hình hay bản thiết kế.
- Trộn màu — Chọn hai màu và số bước để có các màu chuyển tiếp pha đều nhau, phù hợp cho gradient, viền, biểu đồ và trạng thái hover.
- CSS Variables sang Tailwind — Chuyển các biến màu :root thành theme Tailwind chỉ với một lần dán.
- Chuyển đổi màu OKLCH — Khám phá không gian màu OKLCH đồng đều về mặt thị giác với thanh trượt trực tiếp, xem màu có nằm trong sRGB hay không, và sao chép các giá trị HEX, RGB, HSL dự phòng tương ứng.