Quy tắc 60 30 10 – giúp tạo bộ màu cho thiết kế của bạn một cách dễ dàng

Màu sắc là 1 trong những yếu tố then chốt trong thiết kế, giúp gợi cảm xúc, tạo mood và thu hút ánh nhìn của người xem. Tuy nhiên, việc chọn màu sắc sao cho hợp lí và thu hút có thể là thách thức khi thiết kế, đặc biệt khi bạn không phải là 1 designer chuyên nghiệp. Bài viết này mình sẽ giới thiệu các bạn về quy tắc 60–30–10, một công thức đơn giản sẽ giúp bạn dễ dàng chọn màu cho thiết kế của mình.

Quy tắc 60-30-10 là gì

Quy tắc 60–30–10 là 1 phương pháp phối 3 màu quen thuộc được các nhà thiết kế nội thất, thời trang, đạo diễn phim ảnh và graphic designer sử dụng để tạo ra những bảng màu hài hòa và cân đối. Nguyên tắc này chỉ rõ bảng màu lý tưởng nên chia theo tỷ lệ:

60% màu chủ đạo (dominant color)
30% màu phụ (secondary color)
10% màu nhấn (accent color)

Màu chủ đạo sẽ là tâm điểm của thiết kế, nổi bật và gây ấn tượng mạnh. Màu phụ đóng vai trò hỗ trợ, làm nền cho màu chủ đạo và tạo chiều sâu thị giác. Màu nhấn, với sắc độ đậm và tương phản, mang lại sự thú vị và bừng sáng cho tổng thể thiết kế.

Điểm mạnh của quy tắc 60-30-10

Nhấn mạnh các yếu tố chính: Với tỉ lệ màu chủ đạo lớn sẽ thu hút sự chú ý đến các khối lớn và thiết lập mood tổng thể của thiết kế; màu phụ sẽ hỗ trợ điều hòa màu sắc không quá gắt, trong khi màu nhấn ở mức 10% sẽ làm nhiệm vụ làm nổi bật các tính năng hoặc phần cụ thể của thiết kế.
Cân bằng thị giác: Để đạt được sự cân bằng thị giác trong một thiết kế, một màu/ yếu tố không nên lấn át những màu khác; quy tắc 60-30-10 đảm bảo rằng thiết kế tạo cảm giác cân bằng, bằng cách phân bổ tỷ lệ phần trăm cho mỗi màu. Lưu ý rằng tỉ lệ này không phải bắt buộc cố định, con số này thường là 1 số quy ước tương đối nhé.
Tính đơn giản và nhất quán: Kết hợp 3 màu giúp đơn giản hóa quá trình thiết kế, đồng thời ngăn chặn sự kết hợp quá nhiều màu sắc; hạn chế việc rối màu & tạo sự nhất quán khi lên thiết kế.

Cách chọn màu sắc theo quy tắc 60-30-10

Bước 1: Chọn màu chính (màu chủ đạo)

Để chọn màu chủ đạo, các bạn có thể cân nhắc các yếu tố sau:

Màu sắc thương hiệu: chọn 1 màu chủ đạo mà bạn thấy phù hợp nhất với bản thân, có thể là màu yêu thích của bạn, hoặc màu đại diện cho tính cách bạn muốn thể hiện; nếu là viết bài hoặc thiết kế cho thương hiệu thì sẽ cần bám sát theo branding guideline.
Đối tượng mục tiêu: chọn màu dựa trên đối tượng mục tiêu và cảm xúc bạn muốn gợi lên. Ví dụ: nếu bạn thiết kế ứng dụng sức khỏe, có thể sử dụng các màu dịu nhẹ và êm như xanh lam và xanh lục.
Mục tiêu thiết kế: Nghĩ về mục đích thiết kế giao diện và thông điệp cần truyền tải. Ví dụ, nếu bạn thiết kế ứng dụng du lịch, có thể chọn các màu rực rỡ và táo bạo như cam và vàng.

Sau khi chọn màu chủ đạo, đảm bảo màu đó xuất hiện ở những khu vực nổi bật nhất trong thiết kế, chẳng hạn như background, heading hoặc button chính.

Bước 2: Chọn màu phụ (màu thứ cấp)

Màu này hỗ trợ màu chủ đạo và tăng thêm sự thú vị về mặt hình ảnh cho thiết kế. Nó chiếm khoảng 30% thiết kế. Màu thứ cấp có thể được sử dụng cho kiểu chữ, biểu tượng và tiêu đề phụ/ phụ đề trong một thiết kế. Các màu như đen, xanh đậm và các màu khác có thể được sử dụng làm màu thứ cấp.

Màu phụ sẽ tăng thêm sự thu hút về mặt hình ảnh cho thiết kế và hỗ trợ cho màu chính, tỉ lệ thường sẽ rơi khoảng 30%; 1 số cách để bạn chọn ra màu phụ phù hợp:

Nguyên lý màu sắc: đây là cách thông dụng nhất, bạn sẽ sử dụng Color Wheel (link) và chọn theo bảng màu, đây là cách khá chính chuyên và bạn cần có độ am hiểu về phối màu nhất định.

Độ tương phản: chọn màu có độ tương phản cao so với màu chính của bạn, vd: nếu màu chính là 1 màu tối, thì bạn nên chọn màu phụ tone sáng, ví dụ như hình

Mood: chọn màu theo cảm xúc và “vibe” bạn đang hướng tới, ví dụ: bạn đang thiết kế cho 1 fitness app, thì màu bạn chọn nên tươi và giàu năng lượng như đỏ, cam thay vì các màu neutral.

Khi đã chọn được màu phụ, bạn sử dụng nó để làm nổi bật các element quan trọng trong thiết kế như heading, subheading, hoặc call to action button

Bước 3: Chọn màu nhấn

Màu này thường chiếm khoảng 10% thiết kế, tác dụng chính là tăng thêm độ nhấn cho thiết kế, thường thì đây sẽ là màu có độ tương phản hoặc màu sắc khác biệt hẳn với 2 màu còn lại trong design của bạn, màu này có thể có hoặc không, tùy vào gu của bạn.