Xây dựng bảng màu hài hòa từ vòng màu tương tác — áp dụng quy tắc hài hòa như analogous, complementary hoặc triad, rồi sao chép bất kỳ giá trị nào ngay lập tức.

Độ sáng 100%
Quy tắc hài hòa
Màu đang chọn
HEX
RGB
HSL
Bảng màu

Chọn quy tắc hài hòa và màu cơ sở, sau đó kéo các điểm đánh dấu trên vòng để tinh chỉnh. Nhấp vào bất kỳ ô màu nào để sao chép, hoặc đặt làm màu cơ sở mới.


Giới thiệu về Tạo bảng màu

Trình Tạo Bảng Màu xây dựng các bảng phối màu hài hòa từ một bánh xe màu tương tác. Chọn một màu gốc, chọn một quy tắc hài hòa: tương đồng, đơn sắc, bộ ba, bổ túc, bổ túc chia đôi, hình vuông hoặc tùy chỉnh hoàn toàn, và công cụ tính ngay ra bảng màu phù hợp, với các điểm đánh dấu có thể kéo trên bánh xe để tinh chỉnh.

Mỗi mẫu màu hiển thị giá trị HEX, RGB, HSL và HSB, và bất kỳ màu nào trong bảng cũng có thể được đặt làm màu gốc mới chỉ với một cú nhấp. Thanh trượt độ sáng dịch chuyển toàn bộ bảng phối sáng hơn hoặc tối hơn trong khi các quan hệ sắc độ vẫn được giữ nguyên, giúp việc khám phá các biến thể của một bảng phối rất nhanh chóng.

Mọi thứ được tính toán trực tiếp trong trình duyệt của bạn bằng toán học lý thuyết màu trên bánh xe HSV, không có tải lên và không có kết nối máy chủ nào. Khi bảng màu đã ưng ý, hãy sao chép từng giá trị riêng lẻ, toàn bộ màu cùng lúc, các biến CSS dựng sẵn hoặc xuất ra JSON.

Cách sử dụng Tạo bảng màu

  1. Chọn màu gốc bằng bảng chọn màu, nhập giá trị, hoặc nhấp "Ngẫu nhiên".
  2. Chọn một quy tắc hài hòa như tương đồng, bổ túc, bộ ba hoặc hình vuông.
  3. Kéo các điểm đánh dấu trên bánh xe và điều chỉnh thanh trượt độ sáng để tinh chỉnh bảng phối.
  4. Nhấp vào một mẫu màu để sao chép, hoặc đặt nó làm màu gốc mới để lặp lại quy trình.
  5. Xuất bảng màu bằng "Sao chép tất cả", "Sao chép biến CSS" hoặc "Sao chép JSON".

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

Có, hoàn toàn miễn phí. Phép tính bảng màu chạy toàn bộ trong trình duyệt của bạn nên không có tín dụng, tài khoản hay giới hạn sử dụng nào.

Mỗi quy tắc đặt các màu còn lại trong bảng ở các góc cố định quanh bánh xe màu so với màu gốc: bổ túc nằm đối diện (180°), bộ ba cách nhau 120°, tương đồng giữ các màu lân cận gần nhau, bổ túc chia đôi nằm hai bên màu đối diện, và hình vuông đặt bốn sắc độ cách nhau 90°.

Các bảng phối tương đồng hoặc đơn sắc là an toàn nhất cho giao diện vì tạo cảm giác nhẹ nhàng, gắn kết. Dùng bổ túc hoặc bổ túc chia đôi khi bạn cần một màu nhấn mạnh cho nút bấm và lời kêu gọi hành động nổi bật trên nền sắc độ chủ đạo.

Có. Chuyển sang quy tắc Tùy Chỉnh và kéo từng điểm đánh dấu độc lập trên bánh xe, hoặc bắt đầu từ bất kỳ quy tắc hài hòa nào rồi kéo các điểm đánh dấu để điều chỉnh, công cụ sẽ luôn cập nhật bảng màu khi bạn di chuyển chúng.

Mỗi mẫu màu hiển thị giá trị HEX, RGB, HSL và HSB, tất cả đều có thể sao chép riêng lẻ. Bạn cũng có thể sao chép toàn bộ bảng màu dưới dạng giá trị thô, dưới dạng thuộc tính tùy chỉnh CSS sẵn sàng cho stylesheet, hoặc dưới dạng JSON để chuyển cho mã nguồn hay công cụ thiết kế.


Tìm kiếm phổ biến
tạo bảng màu bánh xe màu sắc tạo phối màu hài hòa màu bổ sung phối màu tương đồng tạo bảng màu miễn phí
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.
Báo cáo sự cố

Thêm công cụ miễn phí này vào trang web của riêng bạn — sao chép và dán mã bên dưới.