Phối Màu Hài Hòa

Chọn một màu gốc và ngay lập tức nhận được các bảng màu phù hợp — bổ túc, tương đồng, tam giác, tứ giác, bổ túc phân đôi và đơn sắc. Lý tưởng để xây dựng một bộ màu nhất quán cho giao diện, thương hiệu hoặc tranh minh họa mà không cần tính toán vòng tròn màu thủ công.

Các bước sử dụng

1. Đặt Màu gốc bằng bộ chọn màu, hoặc gõ/dán một mã hex (ví dụ #1677ff) vào ô văn bản bên cạnh. Nếu bạn vừa bấm Mở công cụ hài hòa màu từ trang Chọn màu thì màu đã được nạp sẵn, bỏ qua bước này.
2. Cuộn xuống — công cụ tự động hiển thị sáu thẻ hài hòa: Bổ túc (Complementary), Tương đồng (Analogous), Tam giác (Triadic), Tứ giác (Tetradic), Bổ túc chia (Split-complementary) và Đơn sắc (Monochromatic).
3. So sánh các ô màu trong từng thẻ để tìm bảng màu phù hợp với dự án của bạn.
4. Nhấp vào bất kỳ ô màu nào để sao chép mã hex vào bộ nhớ tạm (sẽ có thông báo xác nhận).
5. Thay đổi màu gốc bất cứ lúc nào để tất cả các bộ màu được tạo lại ngay lập tức.
6. Bấm Mở trong bộ chọn màu ngay cạnh ô nhập để mang màu hiện tại sang trang Chọn màu, nơi bạn đổi được sang mọi cách viết hoặc kiểm tra tương phản — rồi quay lại bằng Mở công cụ hài hòa màu.

Mẹo

• Thẻ Đơn sắc giữ nguyên tông màu và chỉ thay đổi độ sáng — dùng cho các sắc độ tinh tế như nền và trạng thái di chuột.
• Bổ túc (hai màu đối nhau) cho độ tương phản cao, phù hợp làm màu nhấn và nút kêu gọi hành động, trong khi Tương đồng (ba màu liền kề) tạo cảm giác nhẹ nhàng và thống nhất.
• Gõ trực tiếp mã hex để khớp chính xác màu thương hiệu; bộ chọn màu và ô văn bản luôn được đồng bộ.
• Màu gốc xuất hiện trong mọi bộ đúng như bạn nhập — #1677ff vẫn là #1677ff chứ không lệch đi một chút khi đi qua vòng tròn màu — nên ô đầu tiên luôn khớp với mã màu thương hiệu của bạn.
• Trang tự đọc màu từ chính địa chỉ của nó: /color-harmony?color=1677ff mở thẳng vào màu gốc đó. Lưu hoặc chia sẻ liên kết là sáu bảng màu trở lại y nguyên.
• Mọi thứ chạy ngay trong trình duyệt nên bạn có thể thử nghiệm thoải mái — không có gì được tải lên máy chủ.

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

Các loại hài hòa có ý nghĩa gì?

Mỗi bộ được suy ra từ tông màu gốc trên vòng tròn màu: bổ túc là tông đối diện, tương đồng là hai tông liền kề gần nhất, tam giác và tứ giác cách đều nhau quanh vòng tròn, bổ túc chia nằm hai bên màu bổ túc, còn đơn sắc chỉ thay đổi độ sáng.

Màu được sao chép ở định dạng nào?

Màu được sao chép dưới dạng mã hex (ví dụ #13c2c2) — chỉ cần nhấp vào ô màu và dán vào công cụ thiết kế hoặc CSS của bạn.

Tôi có thể tạo liên kết mở thẳng một màu gốc cụ thể không?

Được. Thêm ?color= cùng mã hex vào địa chỉ trang — …/color-harmony?color=1677ff. Dấu # có cũng được, không có cũng được (có thể hiện ra dưới dạng %23); mã rút gọn ba ký tự như f80 vẫn chạy; mã tám ký tự thì phần alpha được bỏ qua. Nếu thiếu hoặc không đọc được giá trị, trang mở bằng màu mặc định chứ không lỗi.

Tôi có thể nhập màu ở định dạng khác ngoài hex không?

Dùng bộ chọn màu để chọn trực quan bất kỳ màu nào, rồi đọc hoặc sao chép mã hex kết quả. Riêng ô văn bản chỉ nhận giá trị hex.