Remain Style Guide

Màu thương hiệu

Màu thương hiệu là gì

Đó là màu riêng biểu thị cho thương hiệu, mang lại cảm giác thống nhất cho toàn bộ thương hiệu và hiệu quả trong việc liên tục truyền đi cùng một thông điệp tới người dùng

Vận dụng màu thương hiệu

Màu thương hiệu chủ yếu được đề xuất gồm 1 primary color và 1 secondary color. Dùng ít màu thay vì dùng nhiều màu sẽ nâng cao tính thương hiệu hơn, đồng thời giúp dễ thiết kế lấy nội dung làm trung tâm hơn. Nếu cảm thấy quá đơn điệu, bạn có thể thêm độ bão hòa và độ sáng vào màu thương hiệu để biểu đạt phong phú hơn.

Tỷ lệ của màu thương hiệu

Primary color phải có tỷ lệ cao hơn secondary color. Nếu ngược lại, người dùng có thể bị rối về màu chủ đạo, nên tốt hơn là dùng primary color nhiều hơn secondary color.

Đây là ví dụ chọn #3d5afe làm primary color và #ff6e40 làm secondary color,
cho thấy tỷ trọng của primary color cao hơn secondary color.

Phối màu (color scheme)

Khi quyết định primary color và secondary color, sự kết hợp giữa các màu cũng rất quan trọng. Công cụ bánh xe màu (vòng tròn màu sắc) là công cụ giúp phối màu hài hòa. Mọi màu vừa có thể hợp nhau lại vừa có thể xung đột nhau, nên quá trình đó có thể bị kéo dài hoặc khiến bạn thấy khó khăn. Khi ấy có thể dùng công cụ bánh xe màu để rút ngắn thời gian.

Đây là ví dụ cho thấy quan hệ giữa primary color (#3d5afe) và secondary color (#ff6e40) là quan hệ màu bổ túc được vận dụng như thế nào trên web.

Màu tương tác (interaction color)

Với màu tương tác, đề xuất dùng màu sáng hơn và tối hơn default color từ 1~2 tông. Cũng có thể đặt các bậc độ sáng và độ bão hòa cách xa nhau hơn để dùng.

Sau khi quyết định default color, có thể đặt khoảng 4~5 bậc lighten, darken color làm interaction color để dùng. So với khi lấy interaction color chỉ 1~2 màu thì cách này cho phép biểu đạt phong phú hơn. Lighten color càng về bên trái càng sáng hơn, và càng sáng hơn so với màu cơ bản thì con số càng cao. Darken color càng về bên phải càng tối hơn, và càng tối hơn so với màu cơ bản thì con số càng cao.

Khi rê chuột, vận dụng interaction color cho màu sắc có thể giúp người dùng dễ nhận biết mình đang rê chuột ở vị trí nào.

Đây là ví dụ dùng default color làm màu cơ bản trước khi rê chuột, và dùng interaction color (lighten-1) làm màu khi rê chuột.

---

Chủ đề: Thiết kế
Danh mục: Trích lược/Bài viết
%% Nguồn: http://styleguide.co.kr/content/color/brand-color.php %%