Lý Thuyết Màu Sắc cho UI Designer: Bảng Màu, Độ Tương Phản và Cảm Xúc

Màu sắc là tín hiệu thị giác trực tiếp nhất trong bất kỳ thiết kế nào. Trước khi người dùng đọc một chữ, màu sắc đã truyền đạt tâm trạng, phân cấp thông tin và bản sắc thương hiệu. Tuy nhiên, nhiều developer và designer chọn màu theo cảm tính — và cuối cùng tạo ra những bảng màu trông lạc lõng, không đạt chuẩn accessibility, hoặc xung đột giữa chế độ sáng/tối. Hiểu lý thuyết màu sắc sẽ cho bạn nền tảng có nguyên tắc cho mọi quyết định về màu.

Kiến thức cơ bản về mô hình màu

Hue, Saturation và Lightness (HSL)

HSL là mô hình màu trực quan nhất cho công việc thiết kế:

• Hue — Bản thân màu sắc: 0° = đỏ, 60° = vàng, 120° = xanh lá, 180° = cyan, 240° = xanh dương, 300° = magenta
• Saturation — Độ sặc sỡ hay xám xịt: 0% = xám, 100% = bão hòa hoàn toàn
• Lightness — Độ sáng hay tối: 0% = đen, 50% = màu thuần, 100% = trắng

/* Cùng một hue ở các mức saturation và lightness khác nhau */
hsl(220, 90%, 50%)   /* Xanh dương sặc sỡ */
hsl(220, 30%, 50%)   /* Xanh thép nhạt */
hsl(220, 90%, 90%)   /* Xanh dương rất nhạt */
hsl(220, 90%, 20%)   /* Xanh dương rất tối */

HSL mạnh mẽ vì bạn có thể điều chỉnh từng chiều một. Muốn màu sáng hơn, tăng L. Muốn màu bớt rực rỡ, giảm S.

RGB và HEX

RGB định nghĩa màu sắc theo giá trị kênh đỏ, xanh lá và xanh dương (0–255). HEX là cách biểu diễn tương tự dưới dạng thập lục phân:

rgb(59, 130, 246)  ≡  #3B82F6

HEX là chuẩn cho CSS và các công cụ thiết kế. Chuyển đổi giữa các định dạng với Color Converter của chúng tôi.

Các hòa phối màu

Hòa phối màu là những tổ hợp màu trông đẹp mắt nhờ mối quan hệ hình học của chúng trên vòng màu.

Đơn sắc (Monochromatic)

Một hue duy nhất, biến đổi saturation và lightness. Sạch sẽ, gắn kết, tinh tế.

Base:    hsl(220, 80%, 50%)
Light:   hsl(220, 70%, 85%)
Dark:    hsl(220, 60%, 25%)
Muted:   hsl(220, 20%, 60%)

Rất phù hợp cho sản phẩm tối giản, giao diện tối và các giao diện đề cao nhận diện thương hiệu.

Bổ sung (Complementary)

Hai hue đối diện nhau trên vòng màu (cách nhau 180°). Tương phản cao và sặc sỡ — dùng màu thứ hai một cách tiết kiệm làm màu nhấn.

Primary:   hsl(220, 80%, 50%)   /* Xanh dương */
Accent:    hsl(40,  90%, 55%)   /* Cam/hổ phách */

Sử dụng cả hai quá nhiều sẽ tạo căng thẳng thị giác. Hãy để một màu chiếm ưu thế.

Tương cận (Analogous)

Ba hue trở lên liền kề nhau (cách nhau 30–60°). Mang cảm giác tự nhiên và hài hòa, như dải màu trong cảnh hoàng hôn.

hsl(200, 70%, 50%)   /* Xanh cyan-lam */
hsl(220, 80%, 50%)   /* Xanh dương */
hsl(250, 70%, 55%)   /* Xanh tím */

Phù hợp cho nền và phân lớp tinh tế.

Tam giác (Triadic)

Ba hue cách đều nhau (120°). Sặc sỡ và cân bằng — cần quản lý cẩn thận để tránh hỗn loạn.

hsl(0,   80%, 55%)   /* Đỏ */
hsl(120, 70%, 45%)   /* Xanh lá */
hsl(240, 75%, 55%)   /* Xanh dương */

Phù hợp cho infographic, biểu đồ và trực quan hóa dữ liệu.

Xây dựng bảng màu cho design system

Một hệ thống màu vững chắc có nhiều lớp:

1. Màu thương hiệu (chính + phụ)

Những màu đại diện cho nhận diện sản phẩm của bạn. Thường là 1–2 hue.

2. Màu ngữ nghĩa (Semantic colors)

Các màu mang ý nghĩa cụ thể trong toàn bộ giao diện:

Token	Mục đích
success	Xanh lá — trạng thái tích cực, xác nhận
warning	Vàng/hổ phách — cảnh báo, trạng thái xuống cấp
error	Đỏ — lỗi, hành động nguy hiểm
info	Xanh dương — thông tin trung tính, gợi ý

3. Thang màu trung tính (Neutral scale)

Các tông xám cho văn bản, nền, viền và đường phân cách. Một thang đầy đủ thường đi từ 50 (gần trắng) đến 950 (gần đen):

--gray-50:  #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;

4. Thang màu đầy đủ

Với mỗi màu thương hiệu, hãy tạo thang 10 bước theo mẫu thang màu trung tính. Các công cụ như Radix Colors và bảng màu của Tailwind là những tham chiếu được cân chỉnh tốt.

Độ tương phản màu và accessibility

WCAG 2.2 yêu cầu tỷ lệ tương phản tối thiểu sau (văn bản so với nền):

Loại văn bản	Tối thiểu (AA)	Nâng cao (AAA)
Văn bản thường (< 18pt)	4.5:1	7:1
Văn bản lớn (≥ 18pt hoặc 14pt đậm)	3:1	4.5:1
Thành phần UI, icon	3:1	—

Công thức tính tỷ lệ tương phản:

ratio = (L1 + 0.05) / (L2 + 0.05)

Trong đó L1 là độ sáng tương đối của màu sáng hơn và L2 là của màu tối hơn.

Quy tắc thực tế:

• Văn bản trắng phù hợp trên các màu có lightness dưới ~45–50% (phụ thuộc vào saturation)
• Văn bản tối phù hợp trên các màu có lightness trên ~50–55%
• Cùng một màu có thể không đạt tương phản trên nền trắng nhưng lại đạt trên nền xám nhạt

Đừng bao giờ chỉ dựa vào màu sắc — cứ 12 người thì có 1 người mắc một dạng khiếm khuyết thị giác màu. Luôn kết hợp màu sắc với hình dạng, icon hoặc văn bản.

Màu sắc trong chế độ tối (dark mode)

Dark mode không chỉ đơn giản là đảo ngược bảng màu sáng. Các nguyên tắc chính:

Tránh nền đen thuần túy

#000000 tạo tương phản quá gay gắt với văn bản và trông nặng nề. Hãy dùng các tông xám tối:

/* Nền chế độ sáng */
background: #ffffff;

/* Nền chế độ tối */
background: #0f172a;  /* Hoặc #111827, #1a1a2e */

Giảm saturation cho bề mặt tối

Các màu có saturation cao trên nền tối có thể trông chói và gây mỏi mắt. Hãy giảm nhẹ saturation của màu thương hiệu trong dark mode:

/* Màu chính ở chế độ sáng */
--primary: hsl(220, 90%, 50%);

/* Màu chính ở chế độ tối — cùng hue, ít saturation hơn, lightness cao hơn */
--primary: hsl(220, 70%, 65%);

Thể hiện độ nổi qua lightness

Trong dark mode, các bề mặt cao hơn trông sáng hơn (như một phần tử nổi hứng nhiều ánh sáng hơn):

--surface-1: #1e293b;   /* Nền gốc */
--surface-2: #253044;   /* Card */
--surface-3: #2d3a52;   /* Modal, dropdown */

Tâm lý học màu sắc theo hue

Hue	Liên tưởng	Ứng dụng phổ biến
Đỏ	Khẩn cấp, nguy hiểm, đam mê, năng lượng	CTA, lỗi, cảnh báo, khuyến mại
Cam	Ấm áp, sáng tạo, nhiệt huyết	Điểm nhấn, thực phẩm, giải trí
Vàng	Lạc quan, thận trọng, chú ý	Cảnh báo, điểm nhấn, sản phẩm trẻ em
Xanh lá	Tăng trưởng, thành công, thiên nhiên, bình yên	Trạng thái thành công, tài chính, sức khỏe
Xanh dương	Tin cậy, ổn định, chuyên nghiệp	Công nghệ, tài chính, y tế, liên kết mặc định
Tím	Xa xỉ, sáng tạo, bí ẩn	Gói cao cấp, làm đẹp, tâm linh
Hồng	Vui tươi, lãng mạn, quan tâm	Lifestyle, y tế, làm đẹp
Xám	Trung tính, cân bằng, tinh tế	Khung UI, văn bản phụ

Đây chỉ là những khái quát — bối cảnh văn hóa và chuẩn mực ngành nghề có vai trò rất quan trọng. Màu xanh dương gợi cảm giác "đáng tin cậy" trong lĩnh vực tài chính nhưng lại bình thường trong ngành thực phẩm.

Quy trình làm việc với màu sắc trong thực tế

1. Bắt đầu với thang màu trung tính (bảng màu xám)
2. Chọn màu thương hiệu chính có tương phản tốt trên cả nền trắng và nền tối
3. Xác định các màu ngữ nghĩa (success, warning, error, info)
4. Tạo thang màu đầy đủ cho từng màu (50–950)
5. Kiểm tra tương phản cho mọi tổ hợp văn bản/nền
6. Kiểm tra ở cả chế độ sáng và tối
7. Kiểm tra bằng các công cụ mô phỏng mù màu

Màu sắc tốt là màu sắc vô hình — người dùng cảm nhận được nó trước khi nhận ra nó. Một hệ thống màu được xây dựng tốt khiến giao diện của bạn trông chuyên nghiệp, đáng tin cậy và dễ tiếp cận mà không ai có thể giải thích chính xác tại sao.