Global ToolBox

Trình Tạo Bảng Màu

Chọn một màu gốc và tạo ngay lập tức một bảng màu chuyển từ sáng sang tối, sẵn sàng để sao chép vào hệ thống thiết kế của bạn.

🔒 Xử lý cục bộ ngay trên trình duyệt của bạn

Loading…

Cách sử dụng

  1. Nhập mã hex vào ô "Màu gốc", hoặc nhấp vào bảng chọn màu để chọn màu trực quan.
  2. Ngay khi một màu hợp lệ được nhận dạng, toàn bộ bảng màu sẽ tự động xuất hiện bên dưới — không cần nhấn nút nào.
  3. Bảng màu trải dài từ một tông rất sáng đến một tông rất tối, tất cả đều giữ cùng tông màu (hue) với màu gốc của bạn.
  4. Nhấp vào bất kỳ ô màu nào để sao chép mã hex của nó vào bộ nhớ tạm — một thông báo "Đã sao chép!" ngắn gọn sẽ cho bạn biết thao tác đã thành công.

Tính năng

  • Tạo ra một thang màu 9 bước mượt mà từ sáng đến tối từ bất kỳ màu gốc nào
  • Giữ nguyên tông màu và độ bão hòa ở mọi bước, giống như các thang màu có sẵn của Tailwind
  • Bao gồm chính xác màu gốc bạn đã nhập trong bảng màu, không chỉ là giá trị gần đúng
  • Sao chép mã hex của bất kỳ ô màu nào chỉ với một cú nhấp
  • Hoạt động 100% phía trình duyệt — màu của bạn không bao giờ rời khỏi trình duyệt

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

Công cụ này có gửi màu của tôi đi đâu không?

Không. Toàn bộ bảng màu được tạo bằng các phép tính JavaScript đơn giản ngay trong trình duyệt của bạn — không có gì bị tải lên hay gửi đến máy chủ.

Các sắc độ được tính toán như thế nào?

Công cụ chuyển đổi màu gốc của bạn sang HSL, sau đó giữ cố định tông màu và độ bão hòa trong khi thay đổi độ sáng đều đặn từ rất sáng đến rất tối. Màu gốc chính xác của bạn được đặt ở giữa thang màu.

Tôi có thể dùng những bảng màu này trong Tailwind hoặc các hệ thống thiết kế khác không?

Có. Bảng màu này tuân theo cùng nguyên lý với các thang màu 50/100/.../900 của Tailwind — một dải chuyển từ sáng sang tối của một tông màu duy nhất — vì vậy bạn có thể sao chép trực tiếp các mã hex vào theme hoặc biến CSS của riêng mình.

Tôi có thể nhập những định dạng màu nào?

Chỉ hỗ trợ mã hex, có hoặc không có dấu # ở đầu, dạng viết tắt 3 ký tự (như #abc) hoặc dạng đầy đủ 6 ký tự (như #3b82f6). Hãy dùng bảng chọn màu nếu bạn muốn chọn trực quan hơn.

Vì sao tôi thấy thông báo lỗi?

Văn bản bạn nhập không khớp với định dạng màu hex nào được nhận dạng. Hãy đảm bảo nó có dạng như #3b82f6 (hoặc 3b82f6, hoặc dạng viết tắt #abc).

Công cụ liên quan

Color ConverterChuyển đổi màu sắc giữa HEX, RGB và HSL ngay lập tức, ngay trong trình duyệt của bạn.Trình tạo Gradient CSSTạo gradient CSS tuyến tính hoặc xuyên tâm một cách trực quan và sao chép CSS sẵn sàng sử dụng, ngay trong trình duyệt của bạn.