tigtools

Công cụ tạo bảng màu

Bắt đầu với một màu cơ bản, chọn kiểu phối màu rồi sao chép bảng màu theo định dạng dự án của bạn.

Chạy ngay trên trình duyệt Không cần đăng ký

Bảng màu

  • #3366cc
  • #8c6500

Màu đã khóa sẽ không đổi khi bạn thay đổi màu cơ sở.

Xuất dưới dạng

Cách sử dụng

  1. Nhập màu cơ bản hoặc chọn một màu. “Tạo màu cơ bản ngẫu nhiên” sẽ chọn màu giúp bạn.
  2. Chọn kiểu phối màu. “Sắc độ sáng và tối” tạo thang màu gồm 11 mức, từ rất sáng đến rất tối.
  3. Khóa màu bạn muốn giữ lại, rồi tiếp tục khám phá các màu cơ bản khác.
  4. Chọn HEX, thuộc tính tùy chỉnh CSS hoặc JSON, đặt tên rồi sao chép mã.

Cách hoạt động

Các kiểu phối màu được tạo bằng cách xoay sắc độ quanh bánh xe màu: phối màu bổ túc thêm sắc độ đối diện (180°), phối màu tương đồng thêm các sắc độ lân cận cách 30° và 60° ở mỗi bên, phối màu bộ ba dùng ba sắc độ cách nhau 120°, phối màu bộ bốn dùng bốn sắc độ cách nhau 90°, còn phối màu bổ túc xen kẽ dùng hai sắc độ nằm cạnh màu bổ túc (150° và 210°).

Việc xoay màu được thực hiện trong OKLCH thay vì HSL. OKLCH giữ độ sáng cảm nhận ổn định, nhờ đó màu vàng và màu xanh dương trong cùng bảng màu có độ sáng tương tự nhau thay vì màu vàng trông chói hơn. Khi màu sau khi xoay nằm ngoài phạm vi hiển thị của màn hình sRGB, độ bão hòa màu sẽ giảm cho đến khi màu nằm trong phạm vi, đồng thời giữ nguyên độ sáng và sắc độ.

Thang sắc độ sáng và tối sử dụng các mức độ sáng OKLCH cố định, được đặt tên từ 50 đến 950, tương tự cách đặt tên của Tailwind CSS. Độ bão hòa màu giảm gần hai đầu trắng và đen để các sắc độ sáng nhất không trông quá rực. Các kiểu phối màu chỉ là điểm khởi đầu: hãy kiểm tra độ tương phản giữa chữ và nền trước khi dùng cho nội dung.

Ví dụ

Màu thương hiệu kết hợp màu nhấn

Màu cơ bản #3366cc khi chọn “Bổ túc” sẽ thêm màu #8c6500, một sắc vàng đất ấm có cùng độ sáng OKLCH. Cặp xanh dương và vàng cam thường được dùng làm màu nhấn bên cạnh màu thương hiệu xanh dương.

Design token cho thư viện thành phần

Chọn “Sắc độ sáng và tối”, đặt tên là “primary” rồi xuất các biến CSS. Bạn sẽ nhận được --primary-50 đến --primary-950, sẵn sàng dùng cho nền (50–100), đường viền (200–300) và chữ (700–900).

Giữ nguyên một màu trong khi khám phá

Khóa màu thứ hai trong bảng màu bộ ba, rồi thử các màu cơ bản khác. Ô màu đã khóa sẽ giữ nguyên giá trị HEX trong khi các màu còn lại thay đổi.

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

Vì sao màu của tôi khác với màu trong công cụ bánh xe màu HSL?

Công cụ này xoay sắc độ trong OKLCH, một không gian màu cảm nhận. Góc sắc độ của OKLCH không hoàn toàn trùng với HSL, nên màu “đối diện” có thể hơi khác so với màu do công cụ bánh xe màu HSL tạo ra.

Tôi có thể dùng JSON trong Tailwind CSS không?

JSON ánh xạ tên với giá trị HEX, theo cùng cấu trúc mà Tailwind chấp nhận cho màu trong cấu hình theme. Trong Tailwind 4, bạn cũng có thể dán các biến CSS vào khối @theme sau khi đổi tên chúng thành --color-…

Bảng màu được tạo có đảm bảo khả năng tiếp cận không?

Không tự động. Kiểu phối màu không cho biết độ tương phản giữa chữ và nền. Hãy kiểm tra từng cặp màu bạn định dùng bằng công cụ Kiểm tra độ tương phản.

Quyền riêng tư

Bảng màu được tạo ngay trên trình duyệt. Màu của bạn không được gửi đi nơi khác hoặc lưu trữ.