Cách tạo bảng màu cho thiết kế của bạn
Màu sắc là một trong những điều đầu tiên bạn nhận thấy ở một trang web, một ứng dụng hoặc một thiết kế. Một bảng màu được chọn tốt tạo ra một kết xuất nhất quán và chuyên nghiệp. Một bảng màu được chọn kém làm cho ngay cả nội dung tốt cũng trông lệch lạc.
Không cần phải là một nhà thiết kế để chọn màu sắc tốt. Lý thuyết màu sắc cung cấp các công thức đáng tin cậy.
Các chế độ hài hòa màu sắc
Chúng dựa trên các mối quan hệ giữa các màu trên bánh xe màu:
Bổ sung — hai màu đối lập (ví dụ xanh dương và cam). Tương phản mạnh, năng động. Lý tưởng cho các kêu gọi hành động cần nổi bật.
Tương tự — ba màu cạnh nhau trên bánh xe (ví dụ xanh dương, xanh lam-xanh lá, xanh lá). Hài hòa và êm dịu. Lý tưởng cho các nền và kết xuất tự nhiên.
Ba màu — ba màu cách đều trên bánh xe (ví dụ đỏ, vàng, xanh dương). Sống động và cân bằng. Lý tưởng cho các thiết kế vui tươi hoặc sáng tạo.
Bổ sung phân chia — một màu cộng với hai màu lân cận của bổ sung của nó. Tương phản tương tự với bổ sung nhưng ít căng thẳng hơn.
Đơn sắc — các sắc thái, độ sáng và tông khác nhau của một màu duy nhất. Luôn hài hòa, nhưng có thể thiếu sự thú vị thị giác nếu được sử dụng quá nhiều.
Cách tạo một bảng màu
- Chọn một chế độ hài hòa — chọn Ngẫu nhiên, Tương tự, Bổ sung, Ba màu hoặc một chế độ khác để cố định các mối quan hệ giữa các màu.
- Khóa các màu bạn thích — khi bạn tìm thấy một màu để giữ, hãy khóa nó và tạo lại những màu khác cho đến khi toàn bộ bảng màu hòa hợp.
- Xuất — sao chép mã HEX, biến CSS, hoặc lưu bảng màu dưới dạng hình ảnh.
Xây dựng một bảng màu có thể sử dụng được
Một bảng màu, đó không chỉ là một bộ màu đẹp. Đối với một dự án thực, bạn cần:
- Màu chính — màu thương hiệu của bạn, được sử dụng cho các nút, liên kết và các yếu tố giao diện chính
- Màu phụ — hỗ trợ màu chính, được sử dụng cho các yếu tố tương tác ít nổi bật hơn
- Màu trung tính — xám hoặc các tông giảm bớt cho văn bản, nền và đường viền (phần lớn của giao diện của bạn)
- Màu nhấn — được sử dụng tiết chế để làm nổi bật, thông báo hoặc báo hiệu một trạng thái quan trọng
- Màu lỗi/thành công — đỏ cho lỗi, xanh lá cho thành công (thường tách biệt khỏi bảng màu)
Mẹo
- Bắt đầu với một màu — chọn một màu chính bạn thích, sau đó sử dụng một chế độ hài hòa để tìm các màu bổ sung. Đơn giản hơn việc cố gắng chọn 5 màu một cách độc lập.
- Kiểm tra trên nội dung thực — một bảng màu trông tốt trong mẫu màu có thể không hoạt động khi áp dụng cho văn bản, nút và nền thực. Luôn kiểm tra với giao diện thực.
- Xác minh độ tương phản — các màu đẹp là vô ích nếu văn bản không thể đọc được. Đưa các kết hợp văn bản/nền của bạn qua một trình kiểm tra độ tương phản để tuân thủ WCAG (tỷ lệ 4,5:1 cho văn bản thường).
- Ít hơn là tốt hơn — một thiết kế với 3 màu được chọn tốt trông chuyên nghiệp hơn một thiết kế với 7. Sử dụng màu trung tính cho phần lớn giao diện và để dành các màu sáng cho điều cần thiết.
Câu hỏi thường gặp
Một bảng màu nên có bao nhiêu màu?
Hầu hết các thiết kế hoạt động tốt nhất với 3 đến 5 màu — một màu chính, một phụ, một trung tính và một hoặc hai màu nhấn. Ngoài đó, thiết kế có thể trông hỗn loạn.
Hài hòa màu sắc là gì?
Hài hòa màu sắc chỉ định các kết hợp dễ chịu để nhìn, dựa trên các vị trí của các màu trên bánh xe màu. Các hài hòa phổ biến là bổ sung (màu đối lập), tương tự (màu liền kề) và ba màu (ba màu cách đều).
Làm thế nào để xác minh các màu của tôi có thể tiếp cận được?
Sử dụng một trình kiểm tra độ tương phản để xác thực rằng các màu văn bản và nền của bạn tuân thủ các tiêu chuẩn tiếp cận WCAG. Tỷ lệ tối thiểu cho văn bản thường là 4,5:1 (cấp AA).
Tôi có thể xuất bảng màu của mình không?
Có. Bạn có thể sao chép các màu thành mã HEX, biến CSS, hoặc xuất bảng màu thành hình ảnh để sử dụng trong Figma, Canva, Sketch, v.v.