Trình tạo bảng phối màu

Chọn một màu cơ sở và nhận bảng màu đầy đủ, bổ sung, tương đồng, bộ ba, bộ bốn hoặc đơn sắc. Sao chép bất kỳ ô màu nào dưới dạng HEX, RGB hoặc HSL. Không có gì rời khỏi trình duyệt.

Cách Trình tạo bảng phối màu hoạt động

Công cụ tạo bảng màu xây dựng các bảng màu hoàn chỉnh từ một màu cơ bản bạn chọn: bổ sung (đối diện trên vòng màu), tương tự (màu sắc lân cận), bộ ba (ba màu cách đều nhau), bộ bốn (bốn màu trong hai cặp bổ sung), và đơn sắc (thay đổi độ sáng và độ bão hòa của cùng một màu). Tất cả logic bảng màu chạy trong trình duyệt; không có gì bạn nhập rời thiết bị của bạn.

Mỗi bảng màu được tạo hiển thị các ô màu với giá trị HEX và RGB sẵn sàng để sao chép. Điều này cung cấp cho các nhà thiết kế điểm khởi đầu có cơ sở trong lý thuyết màu sắc thay vì đoán mò. Vì trình tạo có thể hoạt động ngoại tuyến sau khi tải trang đầu tiên, bạn có thể tự do thử nghiệm với màu thương hiệu trong cuộc họp khách hàng mà không cần kết nối mạng. Hãy nhập màu cơ bản của bạn theo bất kỳ ký hiệu nào bạn có, HEX, RGB hoặc HSL, và mỗi ô màu được tạo ra sẽ trả về theo cả ba dạng để bạn có thể sao chép dạng mà công cụ thiết kế của bạn cần.

Tác giả: Bastien Sulyan

Cách sử dụng Trình tạo bảng phối màu, từng bước

Chọn màu cơ bản bằng bộ chọn màu hoặc gõ giá trị HEX.
Chọn loại hòa âm từ các tab: bổ sung, tương tự, bộ ba, bộ bốn hoặc đơn sắc.
Các ô màu bảng màu xuất hiện ngay lập tức với giá trị HEX và RGB của chúng.
Nhấp bất kỳ ô màu nào để sao chép giá trị HEX vào clipboard.
Điều chỉnh màu cơ bản để khám phá các biến thể và xem toàn bộ bảng màu cập nhật.

Trường hợp sử dụng thường gặp

Nhà thiết kế bắt đầu nhận dạng thương hiệu mới chọn màu chính của họ và tạo bảng màu bộ ba để đề xuất ba màu kết hợp với khách hàng.
Lập trình viên xây dựng theme chế độ tối dùng bảng màu đơn sắc để tạo dải tông màu sáng và tối từ một màu thương hiệu duy nhất.
Người tạo nội dung chọn bảng màu tương tự để chọn màu nhấn cho bài thuyết trình cảm thấy gắn kết mà không có tương phản khắc nghiệt.
Nhà thiết kế UI dùng bảng màu bổ sung để xác định màu nhấn tương phản cao nổi bật so với màu thương hiệu chính.

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

Bảng màu bổ sung hoạt động như thế nào?

Màu bổ sung là màu sắc trực tiếp đối diện màu cơ bản trên vòng màu HSL, cách 180 độ. Đặt màu bổ sung cạnh nhau tạo ra tương phản tối đa. Công cụ hiển thị màu cơ bản và phần bổ sung của nó, cộng với các biến thể sáng hơn và tối hơn của mỗi màu.

Sự khác biệt giữa bảng màu bộ ba và bộ bốn là gì?

Bảng màu bộ ba dùng ba màu sắc cách đều nhau 120 độ trên vòng màu. Bảng màu bộ bốn dùng bốn màu sắc cách 90 độ, tạo thành hai cặp bổ sung (còn gọi là bổ sung kép hoặc bảng màu vuông). Bảng màu bộ bốn phức tạp hơn và yêu cầu cân bằng tỉ lệ cẩn thận để tránh nhiễu thị giác.

Các màu tôi chọn có được lưu trữ hoặc gửi đi đâu đó không?

Không. Tạo bảng màu là số học trên biểu diễn HSL của màu cơ bản: xoay góc màu sắc theo lượng cố định, thay đổi độ sáng và độ bão hòa. Mỗi tính toán chạy cục bộ trong trình duyệt; không có gì được gửi đến bất kỳ máy chủ nào.

Tôi có thể xuất bảng màu dưới dạng file CSS hoặc file design token không?

Công cụ hiện tại hiển thị các ô màu với giá trị HEX và RGB có thể sao chép. Để xuất thuộc tính tùy chỉnh CSS đầy đủ hoặc JSON design token, hãy sao chép các giá trị thủ công vào file token hoặc CSS của dự án. Nút xuất chuyên dụng có thể được thêm trong bản cập nhật tương lai.

Trình tạo này có tuân theo tiêu chuẩn lý thuyết màu sắc chính thức nào không?

Các tính toán bảng màu sử dụng công thức xoay màu sắc tiêu chuẩn trong không gian màu HSL, đây là quy ước trong hầu hết các công cụ thiết kế web. Tính đồng đều nhận thức chính xác của HSL có hạn chế so với LAB hoặc OKLCH, nhưng các phép xoay HSL tạo ra các bảng màu phù hợp với quy ước vòng màu mà các nhà thiết kế thường mong đợi.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ lập trình