Tạo Color Palette

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

Presets

primary — 11 shades

Shadevs Whitevs BlackRecommended text
501.07 · Fail19.55 · AAABlack text
1001.20 · Fail17.53 · AAABlack text
2001.47 · Fail14.27 · AAABlack text
3002.06 · Fail10.18 · AAABlack text
4003.15 · AA Large6.66 · AABlack text
5003.68 · AA Large5.71 · AABlack text
6006.19 · AA3.39 · AA LargeWhite text
7008.49 · AAA2.47 · FailWhite text
80011.71 · AAA1.79 · FailWhite text
90015.40 · AAA1.36 · FailWhite text
95018.22 · AAA1.15 · FailWhite text

Export

: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.

#01

Tạo 11 shade từ 1 màu

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.

#02

Nội suy HSL thông minh

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.

#03

Kiểm tra tương phản tích hợp

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.

#04

Xuất CSS, Tailwind hoặc JSON

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.

1

Nhập màu gốc

Dán mã hex của màu thương hiệu hoặc màu chính vào ô nhập liệu.

2

Xem dải màu tạo ra

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.

3

Kiểm tra tương phản

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.

4

Xuất palette

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.

Hệ thống 11 shade (50-950) của Tailwind đã được kiểm chứng trong thực tế — đủ biến thể cho hover/active state, nền, border và text mà không gây quá tải lựa chọn.