Cách phối màu website: 6 kiểu phối và quy tắc 60-30-10

Cách phối màu website hiệu quả gồm ba việc: chọn một màu chủ đạo (thường lấy từ logo), chọn một kiểu phối trên vòng màu (đơn sắc, tương đồng, bổ túc, bổ túc xen kẽ, bộ ba hoặc bộ bốn), rồi chia tỷ lệ theo quy tắc 60-30-10 và kiểm tra độ tương phản để chữ luôn dễ đọc. Bài này hướng dẫn từng bước, kèm ví dụ áp dụng cho website doanh nghiệp.

Bài tập trung vào kỹ thuật phối màu. Nếu bạn muốn biết mỗi màu gợi cảm xúc gì và hợp với ngành nào, hãy đọc bài ý nghĩa của màu sắc trong thiết kế web.

Vòng màu: công cụ nền tảng để phối màu

Vòng màu truyền thống có 12 màu, chia ba nhóm:

• Màu bậc 1 (màu gốc): đỏ, vàng, lam.
• Màu bậc 2: cam, lục, tím, tạo ra bằng cách pha hai màu bậc 1 cạnh nhau.
• Màu bậc 3: đỏ cam, vàng cam, vàng lục, lam lục, lam tím, đỏ tím, tạo ra bằng cách pha một màu bậc 1 với màu bậc 2 kế bên.

Trên màn hình, màu được hiển thị theo hệ RGB và ghi bằng mã HEX (ví dụ #0B63CE). Mỗi màu còn có thể điều chỉnh độ sáng (pha trắng hoặc đen) và độ bão hòa để tạo ra cả một dải sắc độ từ một màu gốc.

6 kiểu phối màu website cơ bản

1. Phối màu đơn sắc

Dùng một màu với nhiều sắc độ đậm nhạt khác nhau. Kết quả gọn gàng, dễ đồng bộ, hợp với website doanh nghiệp, tư vấn, công nghệ. Điểm yếu: thiếu điểm nhấn, nên thường thêm một màu nhấn riêng cho nút hành động.

2. Phối màu tương đồng

Dùng hai đến bốn màu nằm cạnh nhau trên vòng màu, ví dụ lam, lam lục, lục. Cảm giác hài hòa, tự nhiên; hợp với website du lịch, nghỉ dưỡng, thực phẩm sạch. Chọn một màu làm chủ đạo, các màu còn lại làm phụ để tránh rối.

3. Phối màu bổ túc (tương phản)

Dùng hai màu đối diện nhau trên vòng màu, như lam và cam. Độ tương phản cao giúp nút bấm và ưu đãi nổi bật. Không nên dùng hai màu bổ túc với diện tích ngang nhau; để một màu làm nền chính, màu kia chỉ làm điểm nhấn.

4. Phối màu bổ túc xen kẽ

Chọn một màu gốc, rồi lấy hai màu nằm hai bên màu đối diện của nó (thay vì chính màu đối diện). Ví dụ: lam đi cùng vàng cam và đỏ cam. Vẫn có tương phản nhưng dịu hơn kiểu bổ túc, ít "chói" hơn, dễ dùng cho người mới.

5. Phối màu bộ ba

Ba màu cách đều nhau trên vòng màu (tạo thành tam giác đều), ví dụ đỏ, vàng, lam. Sinh động, hợp với website trẻ em, giáo dục, sự kiện. Cần một màu chủ đạo và giảm độ bão hòa hai màu còn lại, nếu không trang sẽ rất rực.

6. Phối màu bộ bốn

Hai cặp màu bổ túc (tạo thành hình chữ nhật hoặc hình vuông trên vòng màu). Bảng màu phong phú nhất nhưng cũng khó cân bằng nhất; thường chỉ hợp với website thương mại điện tử có nhiều danh mục hoặc thương hiệu sáng tạo.

Quy tắc 60-30-10: chia màu cho từng phần của trang

Đây là cách đơn giản để bảng màu không bị rối:

• 60% màu nền: thường là trắng, xám rất nhạt hoặc be — vùng chứa nội dung.
• 30% màu phụ: màu thương hiệu dùng cho đầu trang, chân trang, tiêu đề, khối nổi bật.
• 10% màu nhấn: dành riêng cho nút hành động chính (gọi, đặt hàng, gửi yêu cầu) và liên kết.

Màu nhấn chỉ có giá trị khi hiếm. Nếu cả banner, tiêu đề và nút đều cùng một màu cam, người xem sẽ không biết bấm vào đâu.

Kiểm tra độ tương phản để chữ luôn dễ đọc

Một bảng màu đẹp vẫn hỏng nếu chữ khó đọc. Theo WCAG 2.2 (tiêu chí 1.4.3, mức AA), chữ thường cần tỷ lệ tương phản với nền tối thiểu 4,5:1, chữ lớn tối thiểu 3:1. Các lỗi hay gặp:

• Chữ xám nhạt trên nền trắng cho "thanh lịch".
• Chữ trắng trên nút vàng hoặc xanh lá nhạt.
• Chữ đặt trực tiếp trên ảnh không có lớp phủ tối.

Bạn có thể dùng công cụ kiểm tra tương phản miễn phí (như WebAIM Contrast Checker) hoặc mục kiểm tra trong Chrome DevTools. Công cụ gợi ý bảng màu như Adobe Color, Coolors giúp thử nhanh các kiểu phối ở trên. Thiết kế dễ tiếp cận cũng là một trong các xu hướng thiết kế website nên áp dụng trước.

Quy trình 5 bước tạo bảng màu cho website

1. Chọn màu chủ đạo từ logo hoặc bộ nhận diện. Nếu logo nhiều màu, chọn màu nhận diện rõ nhất. Bài màu sắc trong thiết kế logo hướng dẫn cách mang màu logo lên website.
2. Chọn kiểu phối phù hợp tính cách thương hiệu, theo bảng ở trên.
3. Chia tỷ lệ 60-30-10 và thử trên một trang mẫu có đủ tiêu đề, đoạn văn, nút, form.
4. Kiểm tra tương phản cho mọi cặp chữ – nền, trên cả màn hình điện thoại ngoài trời.
5. Ghi thành quy chuẩn: mã màu cho nền, chữ, nút chính, nút phụ, viền, trạng thái lỗi và thành công. Quy chuẩn này giúp các trang thêm sau vẫn đồng bộ.

Lỗi phối màu thường gặp

• Dùng quá nhiều màu mạnh cùng lúc, không có màu chủ đạo.
• Nút hành động trùng màu với tiêu đề, chìm giữa trang.
• Chỉ dùng màu để báo lỗi (ô đỏ) mà không có chữ giải thích — người mù màu không nhận ra.
• Màu trên website lệch với màu in ấn, biển hiệu vì không thống nhất mã màu.

Kinh nghiệm từ Hozitech

Ở gói thiết kế theo mẫu, Hozitech tùy chỉnh màu sắc giao diện theo thương hiệu của doanh nghiệp; ở gói độc quyền, giao diện được thiết kế riêng theo nhận diện thương hiệu. Trong cả hai trường hợp, bảng màu được thử trên trang thật (có nút, form, bảng) chứ không chỉ trên ảnh phối cảnh, và được ghi lại thành quy chuẩn khi bàn giao để đội marketing của doanh nghiệp tự thêm trang mới mà vẫn đồng bộ.

Nếu bạn cần một giao diện có màu sắc nhất quán với thương hiệu, xem cách Hozitech triển khai dịch vụ thiết kế website và gửi logo để được gợi ý bảng màu.