🎨

tạo bảng màu

Tạo bảng màu đẹp từ màu cơ sở. Xuất dưới dạng CSS, HEX hoặc JSON.

Công cụ thiết kế Chạy cục bộ Không gửi dữ liệu
bảng màu HSL bổ sung thiết kế
Màu cơ sở
Loại bảng màu
Số lượng (chỉ đơn sắc): 5
5
Định dạng xuất
Xem trước bảng màu
Xuất

Công cụ tạo bảng màu là gì?

Tạo bảng màu đẹp từ màu cơ sở. Chọn phối màu bổ sung, tương tự, bộ ba hoặc đơn sắc và xuất dưới dạng CSS, HEX hoặc JSON.

Cách sử dụng công cụ tạo bảng màu

  1. Chọn màu cơ sở bạn muốn xây dựng.
  2. Chọn kiểu bảng màu như bổ sung, tương tự hoặc đơn sắc.
  3. Xem lại các mẫu màu đã tạo và điều chỉnh màu cơ sở nếu cần.
  4. Sao chép các giá trị HEX bạn muốn tái sử dụng trong hệ thống thiết kế hoặc mockup.

Công cụ liên quan

🎨
chọn màu
Chuyển đổi màu giữa HEX, RGB, HSL và CMYK
 🌈
tạo gradient CSS
Tạo gradient tuyến tính và xuyên tâm bằng CSS với xem trước trực tiếp
 ⚖️
kiểm tra contrast WCAG
Kiểm tra tỷ lệ tương phản màu WCAG AA và AAA để đảm bảo khả năng tiếp cận
Hiểu về bảng màu ▾
Ví dụ
Đầu vào Tạo bảng màu bổ sung từ màu xanh lam cơ sở:
Đầu ra Màu bổ sung nằm đối diện trực tiếp trên vòng tròn màu, tạo nên cặp màu có độ tương phản cao và rực rỡ.
Các trường hợp sử dụng phổ biến
  • Xây dựng hệ thống màu giao diện từ màu thương hiệu cơ sở
  • Tạo màu nhấn phụ trợ cho biểu đồ hoặc hình minh họa
  • Khám phá các hướng bảng màu trước khi bàn giao cho thiết kế
  • Tạo nhanh bộ màu cho bài đăng mạng xã hội hoặc slide
Câu hỏi thường gặp
Làm thế nào để chọn đúng kiểu phối màu?

Dùng phối màu bổ sung cho thiết kế táo bạo, độ tương phản cao. Dùng phối màu tương tự cho chủ đề UI mềm mại, hài hòa. Dùng phối màu bộ ba khi cần ba màu nhấn cân bằng. Dùng phối màu đơn sắc khi ưu tiên sự đơn giản và thanh lịch.

Bảng màu có kiểm tra độ tương phản cho khả năng truy cập không?

Công cụ này tập trung vào việc tạo phối màu hài hòa. Để kiểm tra độ tương phản WCAG, hãy dùng công cụ Contrast Checker hoặc WCAG AA Checker trên trang này.

Tôi có thể xuất bảng màu sang Figma hoặc CSS không?

Có — dùng định dạng xuất CSS để nhận thuộc tính tùy chỉnh CSS sẵn sàng dán, hoặc sao chép từng giá trị HEX để dán vào bất kỳ công cụ thiết kế nào.

Thanh trượt số lượng đơn sắc dùng để làm gì?

Khi dùng kiểu Đơn sắc, bạn có thể điều khiển số sắc độ nhạt và đậm được tạo (3–10). Điều này cho bạn thang màu xám hoặc thang màu pha chi tiết để làm việc.