Dựng bảng màu thương hiệu từ một màu chính: quy tắc hòa sắc và những gì máy chưa kiểm tra hộ bạn
Công cụ nhận một màu chính rồi dựng ra bảng sáu màu theo bốn quy tắc hòa sắc kinh điển, kèm các biến thể sáng hơn, tối hơn và nhạt hơn của chính màu đó. Mỗi ô màu sao chép được mã hex, và cả bảng xuất được thành một khối biến CSS đặt tên sẵn theo vai trò để dán thẳng vào dự án.
Tính năng nổi bật
- Chọn màu chính bằng bảng chọn màu hoặc gõ thẳng mã hex vào ô bên cạnh
- Bốn quy tắc hòa sắc: bổ túc, tam giác đều, tương đồng và bổ túc tách đôi
- Tự sinh ba biến thể của màu chính: sáng hơn 20 độ, tối hơn 20 độ và giảm 30 độ bão hòa
- Gợi ý màu mở đầu theo tám nhóm ngành gồm công nghệ, y tế, tài chính, ẩm thực, thời trang, giáo dục, bất động sản và sáng tạo
- Nút màu ngẫu nhiên để thoát khỏi lối mòn khi chưa có ý tưởng ban đầu
- Sáu ô màu được đặt tên theo vai trò: màu chính, màu phụ, màu nhấn, màu sáng, màu tối và màu trầm
- Sao chép từng mã hex bằng một lần bấm vào ô màu tương ứng
- Xuất cả bảng thành khối biến CSS đặt trong vùng gốc, sao chép thẳng vào clipboard
Chọn màu bằng cảm tính thì đẹp một lần, khó lặp lại lần thứ hai
Ai cũng chọn được một màu đẹp. Vấn đề bắt đầu ở màu thứ hai và thứ ba, khi bạn cần một màu đứng cạnh màu chính mà không cãi nhau, một màu đủ nổi để làm nút kêu gọi hành động, và vài sắc độ để phân tầng nền, viền, chữ phụ. Nếu mỗi màu được chọn theo cảm giác tại thời điểm đó, bộ màu sẽ thiếu logic bên trong, và hậu quả lộ ra khi thương hiệu mở rộng: người làm ấn phẩm mới không biết lấy màu ở đâu, mỗi thiết kế lại tự thêm một sắc mới, sáu tháng sau bạn có mười bảy màu xanh khác nhau trong cùng một bộ nhận diện. Cách tiếp cận theo hòa sắc giải quyết đúng chỗ đó: mọi màu được suy ra từ một màu gốc bằng phép toán trên vòng màu, nên bộ màu có quy luật và ai cũng dựng lại được. Công cụ này làm phần tính toán, còn phần quyết định vẫn là của bạn, vì như phần sau sẽ nói, một bảng màu đúng về mặt hình học vẫn có thể sai về mặt sử dụng.
Lợi ích khi sử dụng
- Có ngay một bộ màu có quy luật thay vì nhặt màu rời rạc theo cảm tính
- So sánh nhanh bốn kiểu hòa sắc trên cùng một màu gốc để chọn hướng phù hợp
- Các biến thể sáng, tối và nhạt được tính sẵn nên có đủ sắc độ cho nền, viền và chữ phụ
- Khối biến CSS đặt tên theo vai trò giúp cả nhóm dùng chung một cách gọi màu
- Chạy trong trình duyệt, không cần cài phần mềm thiết kế chỉ để thử vài phương án màu
Cách dựng một bảng màu thương hiệu
- 1Đặt màu chính trước, hoặc bằng cách gõ mã hex có sẵn trong bộ nhận diện, hoặc chọn một nhóm ngành rồi bấm áp dụng để lấy màu gợi ý làm điểm khởi đầu.
- 2Thử lần lượt cả bốn quy tắc hòa sắc, bảng màu được tính lại ngay để bạn so sánh cảm giác tổng thể của từng phương án.
- 3Chọn quy tắc phù hợp với tính chất thương hiệu: tương đồng cho cảm giác êm và thống nhất, bổ túc cho tương phản mạnh và có điểm nhấn rõ.
- 4Đưa từng màu vào đúng vai trò trong thiết kế thật rồi kiểm tra tương phản giữa chữ và nền trước khi chốt, vì công cụ không kiểm tra bước này.
- 5Bấm xuất để lấy khối biến CSS, dán vào tệp định nghĩa biến của dự án và từ đó chỉ gọi biến chứ không viết mã màu rời rạc trong từng thành phần.
Bốn quy tắc hòa sắc và tính chất của từng quy tắc
Tất cả đều dựa trên việc xoay góc màu trên vòng màu 360 độ, giữ nguyên độ bão hòa và độ sáng. Bổ túc lấy màu đối diện, cách màu gốc 180 độ, cho tương phản mạnh nhất và điểm nhấn rõ nhất, nhưng dùng hai màu bổ túc với diện tích ngang nhau sẽ gây chói mắt nên hãy để một màu chiếm ưu thế và màu kia chỉ dùng cho điểm nhấn. Tam giác đều lấy hai màu cách gốc 120 và 240 độ, cho bộ ba cân bằng và sống động, hợp với thương hiệu hướng tới trẻ trung nhưng khó kiểm soát vì cả ba đều mạnh. Tương đồng lấy hai màu cách gốc 30 độ về hai phía, cho cảm giác êm và thống nhất, an toàn nhất khi bạn chưa chắc tay, đổi lại thiếu điểm nhấn nên phải bù bằng chênh lệch độ sáng. Bổ túc tách đôi lấy hai màu cách gốc 150 và 210 độ, tức hai màu nằm hai bên màu bổ túc, giữ được tương phản mà bớt gay gắt hơn bổ túc thuần; đây là lựa chọn cân bằng nhất cho phần lớn trường hợp. Với màu chính là một sắc xanh dương quanh 221 độ, màu bổ túc sẽ rơi vào vùng cam quanh 41 độ.
Ba biến thể còn lại được tính ra sao và vì sao có khi chỉ có năm ô
Sau các màu hòa sắc, công cụ bổ sung ba biến thể giữ nguyên góc màu của màu gốc. Biến thể sáng cộng thêm 20 vào độ sáng nhưng chặn trần ở mức 95, biến thể tối trừ đi 20 nhưng chặn sàn ở mức 10, biến thể trầm giữ nguyên độ sáng và trừ 30 độ bão hòa nhưng không xuống dưới mức 10. Hai ngưỡng chặn này giải thích một hiện tượng bạn sẽ gặp: nếu màu chính vốn đã rất sáng hoặc rất tối, biến thể tương ứng sẽ gần như trùng với màu gốc và bảng màu trông thiếu tầng. Trường hợp đó nên chọn màu chính có độ sáng nằm trong khoảng 40 tới 60 để còn chỗ trải về hai phía. Về số lượng ô, bảng luôn cắt ở sáu màu nhưng số màu thực tế phụ thuộc quy tắc: bổ túc chỉ sinh một màu hòa sắc nên tổng cộng được năm ô, còn ba quy tắc kia sinh hai màu nên đủ sáu. Đây là hành vi bình thường của công cụ chứ không phải lỗi hiển thị.
Việc quan trọng nhất công cụ chưa làm: kiểm tra tương phản
Một bảng màu đúng về hình học vẫn có thể không dùng được, vì tiêu chí quyết định khi đưa vào giao diện là chữ có đọc được trên nền hay không. Ngưỡng cần nhớ: chữ cỡ thường cần tỷ lệ tương phản tối thiểu 4,5 trên 1 so với nền, chữ cỡ lớn từ 18 điểm hoặc 14 điểm in đậm cần 3 trên 1, và các thành phần bấm được cùng nét đồ họa mang thông tin cũng cần 3 trên 1. Rất nhiều bảng màu thương hiệu trượt yêu cầu này ở đúng một chỗ: nút màu chính với chữ trắng bên trên. Màu xanh dương hoặc cam ở độ sáng trung bình thường chỉ đạt khoảng 3 trên 1 với chữ trắng, tức đủ cho chữ lớn nhưng không đủ cho chữ cỡ thường. Cách xử lý là chuẩn bị sẵn hai biến thể của màu chính, một bản đậm hơn dành riêng cho nền có chữ trắng và một bản nhạt hơn dành cho nền có chữ đen. Hãy kiểm tra bằng công cụ đo tương phản trước khi khóa bảng màu, đừng đợi tới lúc đã in ấn phẩm.
Độ sáng trong hệ HSL không phải độ sáng mắt người cảm nhận
Đây là hạn chế kỹ thuật của cách tính, và nó giải thích vì sao bảng màu sinh ra đôi khi trông mất cân đối. Công cụ xoay góc màu và giữ nguyên hai chỉ số bão hòa và độ sáng, nên về mặt số liệu các màu là ngang hàng. Nhưng mắt người không cảm nhận như vậy: ở cùng một mức độ sáng 50, màu vàng trông sáng chói trong khi màu xanh dương trông tối hẳn, chênh lệch có thể tương đương vài chục phần trăm độ sáng cảm nhận. Hệ quả thực tế là bộ ba màu tam giác đều trên giấy tính toán thì cân bằng, nhưng khi nhìn thì một màu luôn lấn át hai màu kia. Cách khắc phục thủ công là sau khi sinh bảng, bạn tự chỉnh độ sáng của từng màu cho tới khi chúng trông ngang nhau, thường phải hạ độ sáng của vàng và cam, nâng độ sáng của xanh dương và tím. Các hệ màu mới hơn được thiết kế để độ sáng phản ánh đúng cảm nhận, nhưng công cụ này làm việc trên hệ HSL nên bạn cần tự bù bước đó.
Sáu màu chưa đủ cho một bộ nhận diện đầy đủ
Bảng ở đây là điểm khởi đầu tốt nhưng một hệ màu dùng được trong sản phẩm thật cần nhiều hơn. Nhóm thứ nhất còn thiếu là thang màu trung tính: bạn cần khoảng năm tới bảy mức xám đi từ nền rất nhạt tới chữ gần đen, và mẹo là pha một chút sắc của màu chính vào dãy xám để cả giao diện có cảm giác thống nhất thay vì dùng xám thuần vô hồn. Nhóm thứ hai là màu trạng thái: xanh lá cho thành công, vàng hoặc cam cho cảnh báo, đỏ cho lỗi, xanh dương cho thông tin; bốn màu này gần như cố định theo quy ước nhận thức chung nên đừng đổi chúng theo màu thương hiệu, và nếu màu chính của bạn vốn là đỏ thì phải tìm cách phân biệt rõ với màu báo lỗi. Nhóm thứ ba là các sắc độ trung gian của chính màu chính, thường tổ chức thành thang chín bậc để dùng cho trạng thái rê chuột, trạng thái bị vô hiệu hóa và nền nhạt. Cuối cùng, đừng chỉ dùng màu để truyền đạt thông tin, vì với người khó phân biệt màu đỏ và lục thì màu không mang tin gì.
Câu hỏi thường gặp (FAQ)
Vì sao chọn kiểu bổ túc thì chỉ hiện năm ô màu?
Vì bổ túc chỉ sinh ra một màu hòa sắc là màu đối diện, cộng với màu gốc và ba biến thể sáng, tối, trầm thì được năm. Ba kiểu còn lại sinh hai màu hòa sắc nên đủ sáu ô. Đây là hành vi bình thường của công cụ chứ không phải lỗi hiển thị hay do bạn nhập sai.
Nên chọn kiểu hòa sắc nào cho thương hiệu của tôi?
Tương đồng cho cảm giác êm, thống nhất và an toàn nhất khi bạn chưa chắc tay. Bổ túc cho tương phản mạnh, hợp khi cần điểm nhấn rõ nhưng phải để một màu chiếm ưu thế. Bổ túc tách đôi là lựa chọn cân bằng nhất cho phần lớn trường hợp. Tam giác đều sống động nhưng khó kiểm soát vì cả ba màu đều mạnh.
Bảng màu này có đảm bảo chữ đọc được trên nền không?
Không, công cụ không kiểm tra tương phản. Bạn phải tự đo trước khi chốt: chữ cỡ thường cần tối thiểu 4,5 trên 1 so với nền, chữ cỡ lớn cần 3 trên 1. Nút màu chính với chữ trắng là chỗ trượt nhiều nhất, nên hãy chuẩn bị sẵn một biến thể đậm hơn dành riêng cho trường hợp đó.
Vì sao ba màu tam giác đều nhìn không cân nhau?
Vì công cụ giữ nguyên chỉ số độ sáng trong hệ HSL, mà chỉ số đó không phản ánh độ sáng mắt người cảm nhận. Ở cùng mức 50, vàng trông chói còn xanh dương trông tối. Hãy tự hạ độ sáng của vàng và cam, nâng độ sáng của xanh dương và tím cho tới khi ba màu trông ngang nhau.
Màu gợi ý theo ngành nghề dựa trên cơ sở nào?
Đó là các sắc phổ biến theo thói quen thị giác của từng nhóm ngành, ví dụ xanh dương cho công nghệ và tài chính vì gợi tin cậy, xanh lá cho y tế, cam cho ẩm thực vì kích thích cảm giác thèm ăn. Chúng là điểm khởi đầu để bạn khỏi bí ý tưởng, không phải quy tắc bắt buộc, và đôi khi đi ngược quy ước lại giúp thương hiệu nổi bật.
Nút xuất tạo ra tệp hay chép vào clipboard?
Chép vào clipboard chứ không tải tệp. Nội dung là một khối khai báo biến CSS đặt trong vùng gốc, gồm sáu biến đặt tên theo vai trò từ màu chính tới màu trầm. Bạn dán vào tệp định nghĩa biến của dự án rồi gọi biến trong các thành phần thay vì viết mã màu rời rạc.
Vì sao biến thể sáng gần như trùng với màu chính?
Vì màu chính của bạn vốn đã rất sáng, và biến thể sáng bị chặn trần ở mức độ sáng 95 nên không đi xa được nữa. Tương tự với màu rất tối và biến thể tối bị chặn sàn ở mức 10. Hãy chọn màu chính có độ sáng trong khoảng 40 tới 60 để còn chỗ trải về cả hai phía.
Một bộ nhận diện cần bao nhiêu màu là đủ?
Sáu màu ở đây là điểm khởi đầu. Thực tế bạn còn cần một thang trung tính khoảng năm tới bảy mức xám, bốn màu trạng thái cho thành công, cảnh báo, lỗi và thông tin, cùng một thang sắc độ của chính màu chính để dùng cho trạng thái rê chuột và nền nhạt.
Màu trạng thái có nên đổi theo màu thương hiệu không?
Không nên. Xanh lá cho thành công và đỏ cho lỗi đã thành quy ước nhận thức chung, đổi chúng khiến người dùng hiểu sai tín hiệu. Nếu màu chính của bạn vốn là đỏ, hãy tìm cách phân biệt rõ về sắc độ và ngữ cảnh để người dùng không nhầm nút thương hiệu với thông báo lỗi.
Cần lưu ý gì cho người khó phân biệt màu?
Nhóm khó phân biệt đỏ với lục chiếm tỷ lệ đáng kể, ước tính khoảng tám phần trăm nam giới. Nguyên tắc là đừng bao giờ để màu là phương tiện duy nhất truyền đạt thông tin: biểu đồ nên có thêm nhãn hoặc kiểu nét, trạng thái lỗi nên có thêm biểu tượng và chữ, liên kết trong đoạn văn nên có thêm gạch chân.
Chuyển mã hex sang hệ màu in ấn thế nào?
Không có phép chuyển đổi chính xác vì màu hiển thị trên màn hình và màu in bằng mực có dải màu khác nhau, nhiều màu rực trên màn hình không in ra được. Với ấn phẩm quan trọng, hãy chọn màu theo bảng màu in tiêu chuẩn ngay từ đầu rồi tìm mã hex tương đương, chứ đừng làm ngược lại.
Nhập mã hex thủ công có cần dấu thăng không?
Có, ô nhập kỳ vọng chuỗi bắt đầu bằng dấu thăng và theo sau là sáu ký tự hệ mười sáu. Dạng viết tắt ba ký tự hoặc chuỗi thiếu dấu thăng có thể khiến việc tách màu không đúng và bảng màu sinh ra sai. Cách chắc chắn nhất là dùng bảng chọn màu rồi chỉnh lại số nếu cần.
Từ khóa liên quan
- tạo bảng màu thương hiệu
- phối màu website
- bảng màu hex
- màu bổ túc
- màu tương đồng
- vòng tròn màu sắc
- chọn màu cho logo
- màu sắc theo ngành nghề
- biến css màu sắc
- tương phản màu chữ và nền
- thang màu trung tính
- màu trạng thái giao diện
- hệ màu hsl
- chuyển hex sang hsl
- bộ nhận diện thương hiệu
- phối màu cho người mù màu
- màu chính màu phụ màu nhấn
- design system màu sắc
- color palette generator
- nguyên tắc phối màu thiết kế
