Trình tạo màu tương đồng
Chọn màu cơ sở và khoảng cách góc. Công cụ hiển thị màu cơ sở cùng một màu lân cận ở mỗi bên theo góc đã chọn, bộ ba tương đồng cổ điển, rồi thêm hai màu ngoài cùng ở góc gấp đôi để tạo thành bảng màu năm màu rộng hơn. Bảng màu tương đồng thuộc nhóm phối màu cổ điển hài hòa nhất vì các màu gần nhau có chung sắc nền chủ đạo; do đó chúng thường xuất hiện trong tự nhiên (hoàng hôn, rừng cây) và thiết kế biên tập.
Cách xây dựng một bảng màu tương đồng
-
1
Chọn màu cơ sở
Dán mã hex, bộ ba RGB hoặc giá trị HSL. Các màu trung sắc bão hòa cho bộ tương đồng phong phú nhất.
-
2
Chọn góc lệch
30° là khoảng cách tương đồng cổ điển. 15° cho bộ chặt hơn, gần như đơn sắc; 45° bắt đầu tiến gần phối bổ túc tách đôi.
-
3
Điều chỉnh biến thiên độ sáng
Có thể thay đổi độ sáng trên ba sắc độ để tránh bảng màu phẳng. Làm sáng hai màu cánh tạo cảm giác mềm hơn, kiểu biên tập.
-
4
Xuất màu
Sao chép hex, RGB hoặc HSL. Hữu ích cho biến CSS, style Figma hoặc bảng thông số in ấn.
Phối màu cổ điển so với tương đồng
| Phối màu | Quan hệ góc | Tính chất |
|---|---|---|
| Đơn sắc | 0° (cùng sắc màu, khác độ sáng/độ bão hòa) | Êm, thống nhất |
| Tương đồng | 30° ở hai bên | Hài hòa, tự nhiên |
| Bổ túc | Cách nhau 180° | Tương phản cao, căng |
| Bổ túc tách đôi | Màu cơ sở + 2 sắc màu kề màu bổ túc | Tương phản có sắc thái |
| Bộ ba | Cách nhau 120° | Cân bằng, rực rỡ |
| Bộ bốn | Hai cặp bổ túc | Giàu sắc, phức hợp |
Ví dụ bảng màu tương đồng từ tự nhiên
- Hoàng hôn: vàng → cam → đỏ cam (nhảy 30° về phía ấm).
- Rừng: vàng lục → lục → lam lục.
- Đại dương: lam lục → lam → lam tím.
- Mùa thu: đỏ cam → cam → vàng cam.
Thiết kế với một bộ tương đồng
- Chọn một màu làm chủ đạo (60% diện tích bề mặt), dùng màu thứ hai làm điểm nhấn (30%), và màu thứ ba làm nhấn sáng (10%), quy tắc “60-30-10”.
- Ghép màu tương đồng với một màu trung tính (trắng, đen, xám ấm) cho nội dung chữ và phần khung UI.
- Tránh dùng cả ba màu tương đồng với độ bão hòa bằng nhau cho các mảng lớn, trông sẽ đục. Hãy thay đổi độ sáng hoặc độ bão hòa giữa hai màu cánh và màu cơ sở.
Không gian màu và phép tính góc
Độ lệch 30° được tính trong không gian sắc màu của HSL hoặc HSV, cả hai đều xem sắc màu như một góc (0-360°). Các thao tác vòng màu trong RGB không hoạt động: bạn phải chuyển sang HSL, xoay sắc màu rồi chuyển ngược lại. Đó là việc công cụ thực hiện bên dưới. Đầu ra ở cả ba ký pháp được cung cấp vì CSS, công cụ thiết kế và quy trình in ấn mỗi bên ưu tiên định dạng khác nhau.
Câu hỏi thường gặp
Đơn sắc dùng một sắc màu với độ sáng và độ bão hòa khác nhau (xanh hải quân, xanh dương, xanh da trời). Tương đồng dùng ba sắc màu khác nhau nằm cạnh nhau trên vòng màu (xanh lục lam, xanh dương, xanh tím). Tương đồng có nhiều biến thiên thị giác hơn.
Các màu tương đồng có thể có hỗn hợp mực CMYK chồng lấn, làm giảm tương phản khi in. Hãy kiểm tra bản thử màu trên màn hình (soft-proof) và cân nhắc tăng khoảng cách từ 30° lên 40° cho công việc in ấn.
Có, nhưng hãy giữ một trong ba màu làm màu thương hiệu chủ đạo và đưa hai màu còn lại vào vai trò hỗ trợ (huy hiệu, điểm nhấn). Dùng cả ba cho hành động giao diện chính sẽ gây nhầm lẫn, vì người dùng học cách gắn một màu với lời kêu gọi hành động chính.
Ba màu ở giữa tạo thành phối màu tương đồng cổ điển: màu cơ sở và hai màu lân cận ở góc đã chọn. Hai màu ngoài cùng nằm ở góc gấp đôi và là lựa chọn bổ sung để mở rộng bảng màu. Với khoảng cách mặc định 30°, bộ ba nằm ở ±30° còn cặp ngoài cùng nằm ở ±60°.
Công cụ liên quan
Bộ chuyển đổi Base64 sang Hex
Chuyển chuỗi Base64 thành các byte nền tảng được biểu diễn dưới dạng hệ thập lục phân (hex). Hữu ích để kiểm tra token, khóa, chứng chỉ và JWT.
Trình chuyển đổi Binary sang Hex
Chuyển input binary thành giá trị hexadecimal chữ hoa đơn giản. Ký tự không phải 0 hoặc 1 bị bỏ qua và số 0 ở đầu không được giữ lại.
Trình tạo bảng màu
Tạo bảng màu đơn sắc, tương đồng, bổ túc, bộ ba hoặc bộ bốn từ màu HEX gốc và xuất các biến CSS sẵn sàng sao chép.
Bộ chuyển đổi ASCII sang nhị phân
Chuyển bất kỳ chuỗi ASCII nào sang biểu diễn nhị phân. Mỗi ký tự thành tám bit, phân tách bằng khoảng trắng, sẵn để dán vào trace giao thức hoặc bài tập.
Bộ chuyển đổi ASCII sang Hex
Chuyển văn bản ASCII sang giá trị byte hệ thập lục phân. Đầu ra dùng hai chữ số hex cho mỗi ký tự, sẵn cho memory dump, packet trace hoặc bảng firmware.
Bộ chuyển đổi nhị phân sang bát phân
Chuyển nhị phân sang bát phân bằng cách gom ba bit một lần. Hữu ích cho quyền Unix, hệ thống cũ và hiển thị số gọn hơn.