Color Style khi thiết kế giao diện mobile app và các cách phối màu

 I. Lý thuyết về màu sắc

1. Primary Color

Primary là màu chính, đóng vai trò trong việc làm nổi bật các thành phần chính trong giao diện như:

- Fill cho 1 button chỉ trạng thái hoạt động

- Màu text trên nền trắng

- Màu biểu thị cho trạng thái active: button, check box

2. Secondary

Secondary là màu phụ, dùng cho các thành phần ít nổi bật hơn.

Không nhất thiết phải dùng secondary color nếu như primary được sử dụng như màu nhấn.

3. Neutral Color

Thường là màu đen - trắng, chiếm đa số trong thiết kế. Neutral color thường là màu background, màu text.

*Quy tắc 60 - 30 - 10 trong thiết kế:

60% là màu chủ đạo - Neutral Color

30% là màu bổ sung - Secondary Color

10% là màu nhấn - Primary Color

II. Các cách phối màu thường dùng

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

Chọn 1 màu chủ đạo và tăng giảm sắc độ để ra các màu có độ đậm nhạt khác nhau

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

Phối 3 màu gần nhau trên bánh xe màu. Chọn ra 1 màu chủ đạo sau đó chọn thêm 2 màu tương đồng. Cách phối này sẽ có đa dạng màu để thể hiện ở các phần khác nhau.

3. Phối màu tương phản - Complementary

Lựa chọn các cặp màu tương phản. Chọn ra 1 màu chủ đạo rồi chọn 1 màu phụ tương phản với nó. Không nên chọn các cặp màu có sắc độ nhạt vì sẽ ko rõ sự tương phản giữa 2 màu.

4. Phối màu bộ ba - Triadic

Chọn ra 3 màu ở 3 góc trong bánh xe màu, tạo thành 1 hình tam giác đều. Kiểu phối này sẽ khó khi chọn màu làm điểm nhấn.

III. Các website giúp chọn ra bảng màu từ màu gốc

Cứ search "color wheel" sẽ ra các bên có bảng màu, filter bằng cashc chọn cách phối màu và điền màu gốc vào.

Website sẽ tự gen ra màu phù hợp.