Lỗi phổ biến nhất của Developer khi design là sử dụng quá nhiều màu sắc hoặc chọn các màu quá bão hòa (vibrant) gây đau mắt.
1. Quy tắc Số 3 (The Rule of Three)
Để đảm bảo tính nhất quán, một website chuẩn không nên có quá nhiều màu sắc gây nhiễu loạn. Hãy giới hạn trong 3 nhóm màu chính:
- Màu Chủ Đạo (Primary - 1 màu): Đại diện cho thương hiệu. Dùng cho các nút chính, link, icon quan trọng.
- Màu Trung Tính (Neutral/Grayscale - 1 màu): Dùng cho văn bản, đường kẻ, nền, card. Đây là nhóm màu bạn dùng nhiều nhất (chiếm 90% diện tích).
- Màu Trạng Thái (Support/Semantic - 3 màu): Luôn cố định là Xanh (Success), Đỏ (Error), Vàng (Warning).
Tổng cộng: Bạn chỉ thực sự cần chọn DUY NHẤT 1 màu thương hiệu (Primary), các màu còn lại nên lấy từ hệ thống tiêu chuẩn (Tailwind/Radix).
2. Thang đo 10 Sắc độ (The 10-Shade Scale)
Mỗi màu bạn chọn (ví dụ: Blue) cần có ít nhất 10 sắc độ từ 50 đến 900 để phục vụ các mục đích khác nhau:
| Sắc độ | Tên gọi | Ứng dụng trong UI |
|---|---|---|
| 50 | Subtlest | Nền cực nhạt, hover của ghost button. |
| 100 | Lightest | Border nhạt, background nhạt của card. |
| 200 - 300 | Lighter | Trạng thái Disabled, border rõ hơn. |
| 400 - 500 | Base | Màu gốc. Dùng cho icon, text trên nền trắng. |
| 600 | Primary | Màu chính của nút bấm. |
| 700 - 800 | Deep | Trạng thái Hover/Active của nút bấm. |
| 900 | Darkest | Text tiêu đề (thường dùng cho màu Neutral). |
3. Biến thể theo Trạng thái (Interaction Variants)
Đừng đổi màu ngẫu nhiên khi hover. Hãy dùng công thức:
- Trạng thái bình thường: Dùng mã
600. - Trạng thái Hover: Nhảy lên 1 bậc (
700). - Trạng thái Active (nhấn giữ): Nhảy thêm 1 bậc nữa (
800).
4. Tương phản và Khả năng đọc (Contrast Ratio)
Một quy tắc sống còn mà Developer hay quên: Màu chữ trên màu nền.
- Nếu nền màu nhạt (50 - 200): Dùng chữ màu đậm (900).
- Nếu nền màu đậm (500 - 900): Dùng chữ màu trắng tinh (#FFF).
5. Đừng tự chọn mã HEX (HEX Trap)
Nếu bạn không phải chuyên gia màu sắc, đừng dùng Color Picker để chọn đại 1 mã màu. Hãy dùng các hệ màu đã được nghiên cứu kỹ lưỡng:
- Tailwind CSS Colors: Các sắc độ từ 50-900 đã được tinh chỉnh để phối hợp hoàn hảo.
- Radix Colors: Hệ màu chuyên dụng cho UI với các sắc độ được tính toán cho Dark Mode và Accessibility.
4. Semantic Colors (Màu sắc mang ý nghĩa)
Hãy sử dụng màu sắc dựa trên ý nghĩa của chúng, không phải vì sở thích:
- Blue: Thông tin, sự tin cậy, hành động chính.
- Green: Thành công, hoàn thành, tiền bạc.
- Red: Lỗi, nguy hiểm, xóa dữ liệu.
- Yellow/Orange: Cảnh báo, đang chờ xử lý.
5. Kỹ thuật "Color Harmony" (Phối màu)
Nếu bạn cần 1 màu nhấn (Accent) từ 1 màu chủ đạo (Primary):
- Analogous: Các màu nằm cạnh nhau trong vòng tròn màu (ví dụ: Xanh dương và Tím). Tạo cảm giác yên bình.
- Complementary: Các màu đối diện nhau (ví dụ: Xanh dương và Cam). Tạo sự tương phản cực mạnh cho CTA.
Kết luận
Bí quyết của một UI chuyên nghiệp là Sự tiết chế. Hãy bắt đầu với một giao diện trắng đen hoàn toàn, sau đó mới thêm đúng 1 màu nhấn vào những nơi thực sự cần người dùng chú ý.