Nhập 1 màu hex, tạo ngay bảng màu 11 shade (50→950) theo phong cách Tailwind — copy CSS variables, Tailwind config hoặc JSON
| Shade | vs White | vs Black | Recommended text |
|---|---|---|---|
| 50 | 1.07 · Fail | 19.55 · AAA | Black text |
| 100 | 1.20 · Fail | 17.53 · AAA | Black text |
| 200 | 1.47 · Fail | 14.27 · AAA | Black text |
| 300 | 2.06 · Fail | 10.18 · AAA | Black text |
| 400 | 3.15 · AA Large | 6.66 · AA | Black text |
| 500 | 3.68 · AA Large | 5.71 · AA | Black text |
| 600 | 6.19 · AA | 3.39 · AA Large | White text |
| 700 | 8.49 · AAA | 2.47 · Fail | White text |
| 800 | 11.71 · AAA | 1.79 · Fail | White text |
| 900 | 15.40 · AAA | 1.36 · Fail | White text |
| 950 | 18.22 · AAA | 1.15 · Fail | White text |
:root {
--color-primary-50: #f5f7f9;
--color-primary-100: #e5ebf5;
--color-primary-200: #c5d6f2;
--color-primary-300: #92b6f1;
--color-primary-400: #5490f3;
--color-primary-500: #3b82f6;
--color-primary-600: #0a58d7;
--color-primary-700: #0846ab;
--color-primary-800: #09347c;
--color-primary-900: #08234f;
--color-primary-950: #07152c;
}Điểm nổi bật
Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.
Nhập bất kỳ màu hex nào, công cụ tự động tạo dãy 11 shade từ 50 (rất nhạt) đến 950 (rất đậm) như Tailwind Colors.
Sử dụng thuật toán nội suy trong không gian màu HSL để tạo dải màu mượt mà, tự nhiên và nhất quán.
Hiển thị tỉ lệ tương phản của từng shade với nền trắng/đen để biết shade nào dùng được cho văn bản.
Copy palette dưới dạng CSS variables, config Tailwind hoặc JSON để dùng ngay trong dự án.
Cách sử dụng
Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.
Dán mã hex của màu thương hiệu hoặc màu chính vào ô nhập liệu.
Công cụ hiển thị ngay 11 ô màu từ 50 đến 950 với mã hex và giá trị HSL tương ứng.
Xem cột tỉ lệ tương phản để xác định shade nào đạt chuẩn WCAG cho văn bản trên nền sáng/tối.
Chọn định dạng mong muốn (CSS / Tailwind / JSON) và copy để tích hợp vào dự án.
Câu hỏi thường gặp
Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.