Lúa hóa kiến thức
Chọn bảng màu Neutral trong UI design
🕔 8 thg 1, 2025
🧑🎓 Thien Nguyen
Về tác giả
Bài viết này được viết bởi Thiện Nguyễn. Từ một Kỹ sư, Thiện đã quyết định chuyển ngành ở độ tuổi 33 tuổi. Hiện nay, Thiện đã là UI/UX Designer tại Pacific Business Group có trụ sở ở California, United States. Đồng thời, Thiện cũng là một học viên có nỗ lực phi thường trong những lớp UX Foundation đầu tiên.
Hãy connect với Thiện qua Dribbble, Behance, Linkedin, Insta hay X.
Morning morning,
Nhân dịp cuối năm có chút thời gian rỗi cộng với chút ít kiến thức về màu sắc, hôm nay mình viết vài dòng ngắn chia sẽ cách phân tích, setup, và một vài tip của mình liên quan đến bảng màu Neutral trong UI design.
Hy vọng bài viết sẽ giúp ích được gì đó, và sẽ vui hơn nữa nếu nhận được thật nhiều feedback cũng như là đóng góp từ mọi người.
Trong lúc research, mình khá bất ngờ về số lượng bài phân tích và hướng dẫn chọn màu Neutral là khá ít, trong khi bảng màu Neutral lại rất quan trọng, được sử dụng trong UI design trên dưới 60% (The 60-30-10 rule).
Ghi chú nhỏ:
Mọi người đều có cách chọn màu và setup riêng cho mình (chắc chắn rùi!), dưới đây mình xin được chia sẻ cách mà cá nhân mình pick màu và setup, không phải là một quy chuẩn hay bắt buộc gì cả ạ.
Mình đã áp dụng cách chọn màu này cho nhiều dự án từ Small size (cho MVP, Startup - tầm không quá 4 tháng) đến Medium size (trên 1 năm) và nó khá là tối ưu. Product big size thì chưa có cơ hội áp dụng vì mình phải follow Design system có sẵn của team.
Có một vài thuật ngữ (mình nghĩ là) cơ bản nếu không rõ nhờ mọi người search Google xíu giúp mình, hoặc nếu vẫn không rõ ràng thì có thể inbox mình giải thích nha.
Tool: Figma, plugin kiểm tra độ tương phản: Contrast.
File Figma màu sample.
Các bạn có thêm xem một số Concept Light / Dark mode của mình ở đây.
Okie, bắt đầu thui nào!
Một vài hệ màu mọi người hay gặp (và cũng có trong Figma) như HEX, RGB, HSL, HSB:
HEX: dùng 6 ký tự thập lục phân để diễn tả màu. RGB: hệ màu được kết hợp từ 3 màu Red, Green, Blue. Việc pick và điều chỉnh màu bằng Neutral bằng 2 hệ màu này gần như là không thể.
Có thể sử dụng 2 hệ màu HSL hoặc HSB. Các phần dưới sẽ lấy HSB làm ví dụ (Mọi người ai quen dùng hệ màu HSL thì tương tự).
Vùng để chọn bảng màu là vùng đánh dấu trong hình, điều chỉnh giá trị tại kênh B = Brightness (mũi tên màu trắng) từ 0 (đen) đến 100 (trắng). Điều chỉnh các giá trị (không dùng chuột) để có độ chính xác tốt nhất.
Hệ màu HSB và HSL trong Figma
Trước khi chọn màu thì mình sẽ phân tích các lớp màu trong một màn hình để biết thông thường sẽ cần bao nhiêu Styles / Variables cho bảng màu Neutral, đồng thời cũng biết được các màu Neutral sẽ được dùng ở đâu.
Màn hình Vercel. Source: Mobbin
Màn hình Team management Dashboard - team Concepzilla
Màn hình Contact management App - team Concepzilla
Mình chia các lớp màu ra làm 3 nhóm chính: Nhóm màu nền, nhóm Border, nhóm Element.
Nhóm màu nền
Nhóm này là các màu để làm Background, vị trí các mũi tên đánh số 1,2,3 trên hình. Lớp màu này có độ sáng cao nhất - đối với Light mode và tương ứng, tối nhất - đối với Dark mode.
Đối với đa số màn hình chỉ cần 3 lớp màu là có thể cover được khoảng 90% phần Background cho các dự án, cụ thể:
Surface - mũi tên số 1: luôn làm lớp lót dưới cùng cho design, tạo Background để các Sections / Blocks / Cards được nổi bật, tách biệt với nền và với nhau.
On-surface 1 - mũi tên số 2: lớp này dùng làm Background cho các Sections / Blocks / Cards chứa thông tin. Lớp này thường nằm trên lớp Surface.
Có thể dùng lớp màu này làm Background cho một màn hình nếu như trên màn hình không có quá nhiều Element cần phân cấp, hoặc màn hình đơn giản và Designers quyết định dùng Border / Divider để gom nhóm thông tin.
On-surface 2 - mũi tên số 3: lớp này dùng làm nền để highlight một vài Elements nhỏ, hoặc kích thước không quá lớn.
Mình không hay dùng cho một vùng lớn vì nó sẽ làm cho màn hình tối hơn (hoặc sáng hơn với Dark mode), không được clean cho lắm.
Đối với các dự án có nhiều data, cần phân cấp hơn nữa thì có thể chọn thêm 1 lớp màu nền nữa. Tuy nhiên trường hợp này trong thực tế mình thấy rất hiếm, Designers thường hay dùng Border / Divider để phân cấp chứ không dùng thêm lớp màu thứ 4 (4 lớp màu Surface chồng lên nhau sẽ làm cho UI rối và mất đi sự mềm mại của Background).
Mô tả nguồn sáng lên các lớp màu nền
Đặc điểm các lớp màu này là độ chênh lệch màu không quá lớn (nếu lớn quá sẽ làm cho độ chuyển giữa các lớp không mượt mà). Việc sắp xếp độ chênh sáng tối giữa Light và Dark mode cũng có chút khác biệt:
Light mode:
Lớp On-surface 1 sẽ gần với nguồn sáng hơn, sáng hơn Surface. Lớp On-surface 1 trong Light mode sẽ là lớp sáng nhất.
Lớp On-surface 2 để highlight Elements, nên chọn màu bằng hoặc tối hơn lớp Surface một chút, đủ contrast để highlight.
Dark mode:
Lớp On-surface 1 sẽ gần với nguồn sáng hơn, sáng hơn Surface. Lớp Surface trong Dark mode sẽ là lớp tối nhất.
Lớp On surface 2 để highlight elements, đối với Dark mode nếu chọn tương ứng theo quy tắc của Light mode sẽ là tối bằng lớp Surface, như vậy các elements sẽ không nổi bật dược trên On surface 1 (sáng hơn), vì vậy màu On surface 2 sẽ là màu sáng nhất (Xem màn hình Contact management App - Concepzilla).
Vậy:
Độ sáng Light mode: On surface 1 > Surface ≥ On surface 2.
Độ sáng Dark mode: On surface 2 > On surface 1 > Surface.
Nhóm màu Stroke
Nhóm màu này dùng để làm Border và Divider. Tùy thuộc vào từng Direction / Style của dự án mà mình có thể chọn số lượng và đặc tính màu cho nhóm Border:
Một màu cho Stroke
Một mã màu dùng cho cả dự án (màu Solid, không có Opacity).
Vì dùng chung trên nhóm các màu nền, nên chọn để độ tương phản lớn hơn, đảm bảo đối với lớp màu On-surface 2 sẽ vẫn có thể phân biệt được.
Cách setup và dùng đơn giản, thường được dùng đối với các dự án như CRM, CMS, Logistic, Chuyển đổi số,… (quan trọng hơn về business, dùng nội bộ, người dùng dùng màn hình phổ thông,…).
Hai màu cho Stroke
Màu Stroke Light: dùng làm Border và Divider trên nền màu Surface (Màn hình Team management Dashboard - Concepzilla - Mũi tên 4L).
Màu Stroke Bold: dùng làm Border và Divider trên nền màu On-surface 1 (Màn hình Team management Dashboard - Concepzilla - Mũi tên 4B).
Độ tương phản màu sắc k lệch nhau nhiều và đồng đều trên 2 lớp màu nền, màu sắc tổng thể sẽ “mượt” hơn một xíu (Sẽ giải thích kỹ hơn ở phần chọn màu bên dưới).
Thường dùng ở các dự án Mobile (màn hình điện thoại độ tương phản màu sắc tốt và người dùng nhìn khoảng cách gần) hoặc dự án có yêu cầu thẫm mỹ hơn một chút.
TIP: Để giảm bớt contrast (vd làm divider nhạt đi) của divider, có thể dùng cách giảm weight của Border / Divider xuống nhỏ hơn 1 px. Cách này phù hợp đối với các thiết kế Mobile, đối với thiết kế trên màn hình desktop thì không nên dùng divider < 1px vì có trường hợp line nhỏ quá ⇒ bị mất do độ phân giải màn hình không tốt.
Nhóm màu Element
Nhóm này là các màu dùng cho Text, Icon, Illustration.
Element Primary - mũi tên số 5: dùng cho Heading, Title, các Elements ở trạng thái Active, Selected hoặc là các thông tin quan trọng. Màu này nổi bật nhất so với lớp màu làm Background.
Element Secondary - mũi tên số 6: dùng cho phần Text làm content, Support Text, Label, các Element ở trạng thái Idle / Default.
Element Tertiary - mũi tên số 7: dùng cho các Element ở trạng thái Disable. Màu này kém nổi bật nhất so với lớp màu làm Background, độ tương phản so với lớp Background nằm quanh vùng giá trị 3:1 (WCAG).
Text on brand - mũi tên số 8: dùng cho Text, Icon nằm trên các Element không đổi màu hoặc đổi ít khi chuyển giữa Light và Dark mode, vd màu text trên CTA button.
Đặc điểm các lớp màu này là diện tích thể hiện màu không nhiều, cần độ chênh lệch màu lớn hơn để có thể phân cấp thông tin tốt.
Diện tích thể hiện màu của Icon
Độ chênh lệch màu (contrast) khi dùng cho lớp màu nền và Elements
Mình chọn màu cho Light mode, Dark mode đa phần tương tự.
Dùng hệ màu HSB, điều chỉnh tại kênh B = Brightness.
Chọn màu theo cách phân tích các lớp màu ở trên (sẽ điều chỉnh chi tiết ở bước “Test màu” để phù hợp với Direction / Style của dự án cũng như tiêu chuẩn tương phản màu sắc WCAG).
Chọn màu Neutral
Chọn màu nền
Độ sáng Light mode: On surface 1 > Surface ≥ On surface 2 (đã phân tích ở trên).
Bắt đầu với On Surface 01 - màu sáng nhất, B = 100, tương đương #FFFFFF.
Mình có đọc được không nên chọn trắng hoàn toàn cho background, tuy nhiên việc giảm đi 1 đơn vị kênh Brighness cũng làm cho Project bị tối hơn, nên mình vẫn chọn #FFFFFF để được “Clean” hơn. (Behance và Dribbble đều dùng background = #FFFFFF, On-surface 1 của Facebook = #FFFFFF,…).
Màu Surface: tối hơn một chút. Các màu ở nhóm màu Surface có độ lệch màu với nhau thấp. Chọn trong khoảng B = 94 - 97.
Màu On-surface 2: trong khoảng từ B = 88-95 (đậm hơn một tí để highlight Elements).
Chọn màu Stroke
Stroke về bản chất cũng là một Element nằm trên các lớp màu nền, tuy nhiên đây là Element để phân cấp thông tin nên sẽ không chọn màu có tương phản lớn (so với lớp nền) để tránh nổi bật hơn so với các Elements mang thông tin.
Độ sáng màu Stroke: Nhóm màu nền (sáng nhất) > Màu stroke (tối hơn) > Nhóm màu Elements (đậm nhất).
Đối với Stroke Light và Stroke Bold. Độ sáng của Stroke nằm trên lớp sáng hơn sẽ sáng hơn và độ sáng của Stroke nằm trên lớp tối hơn sẽ tối hơn.
Màu Stroke trên 2 lớp nền
Với Light mode, mình chọn Stroke Light trong khoảng B = 75 - 85, Stroke Bold trong khoảng B = 80-90.
Chọn màu Elements
Vì diện tích thể hiện màu của các Element nhỏ nên màu nhóm Elements có độ lệch màu với nhau lớn.
Màu Element Primary (màu đen) trên lớp nền sáng nhất (On surface 1) sẽ có contrast cao nhất, không nên chọn màu đen hoàn toàn (#000000) vì tương phản quá cao làm chói mắt người đọc, nhưng cũng không nên quá sáng (Mình hay chọn contrast ≥14:1).
Màu sáng nhất trong nhóm màu này là Elemet Tertiary, màu này trên lớp nền tối nhất (ở đây là On-surface 2) phải đảm bảo tương phản lớn hơn tỉ lệ 3:1 (WCAG).
Màu Button tùy theo CTA để chọn, thường sẽ trùng với màu sáng nhất hoặc tối nhất trong bảng màu.
Với Light mode mình chọn Element Primary trong khoảng B = 4 - 15, Element Secondary B = 24 - 35, Element Tertiary B = 45 - 58.
Đối với dự án cần cả Light và Dark Mode thì nên thiết lập bảng màu bằng Variables.
Đối với dự án cần một trong hai Mode, mình ưu tiên setup trực tiếp bằng Style vì trực quan và điều chỉnh tiện hơn: nằm ngay bên Right Sidebar.
Vì mình định nghĩa các lớp màu theo chức năng như đã nói trên nên sẽ không có các Shade cho Neutral đều nhau từ 1 đến 8 (hay đến 10) như đa số bộ Design System.
Shade cho kênh màu Neutral
Thiết lập màu Neutral trong bảng Variables
Bảng chọn màu khi thiết kế
Chi tiết cách thiết lập Variables cũng như Style mình sẽ không đề cập chi tiết ở đây.
Voilà, xong bước setup này là mình đã thiết lập xong một bảng màu Neutral để có thể sử dụng trong các dự án rồi.
1/ Màu của Background Figma cũng ảnh hưởng đến mắt khi cân chỉnh. Nên điều chỉnh Background Figma màu sáng khi chỉnh Light mode, Background Figma màu tối khi cân chỉnh Dark mode (Optical illusion).
Hai hình vuông A và B có cùng mã màu #808080
2/ Để màu Neutral có chút shade của màu khác (hay gặp nhất là có shade của màu Primary brand) nhưng vẫn giữ nguyên tương phản thì điều chỉnh Hue của màu Neutral = Hue của màu Primary brand, Saturation chỉnh tăng dần để chọn lựa màu phù hợp.
3/ Sau khi Design được 2-3 màn hình / Flow đầu tiên, nên cân chỉnh màu một lần nữa cho chính xác (vì lúc này Layout và Elements đã đúng với dự án, k phải là Design / màn hình mẫu để test (Lúc này team dev thường cũng trong giai đoạn setup, điều chỉnh cũng không mất nhiều thời gian).
4/ Màu Stroke sử dụng Opacity: Đối với các dự án có Background không phải Neutral (ví dụ một Section / Card / Block màu xanh),việc chọn màu Divider là Solid Neutral sẽ làm cho Divider bị bệch màu, hông có đẹp. Giải pháp là dùng màu có Opacity để Divider được hòa vào màu của Background.
Màu Divider sử dụng Opacity
5/ Với hệ màu HSB, bạn có thể chọn các Shade của màu Primary brand sáng thêm hoặc tối thêm một cách đơn giản. Hơn nữa, độ phân giải màu được 100 đơn vị, so với HSL chỉ có 50 đơn vị. Đây cũng chính là lý do mình sử dụng kênh HSB để chọn màu cho cả Neutral và các kênh màu khác.
Điều chỉnh màu sáng hơn theo vùng được đánh dấu nằm ngang, càng sang trái (Saturation giảm) màu càng nhạt hơn.
Điều chỉnh màu tối hơn theo vùng được đánh dấu nằm đứng, càng xuống dưới (Brightness giảm) càng đậm.
Vùng chọn màu Primary nên chọn trong vùng dường Parabol hướng về phía góc trên bên phải.
Đặc điểm hệ màu HSB
Lời nhắn
Tại thời điểm hiện tại, với nhiều bộ Design system, UI kit và các Plugin Figma, việc có được một bảng màu Neutral để sử dụng trong các dự án là không quá khó khăn. Tuy nhiên mình muốn cung cấp thêm một góc nhìn và cách tiếp cận khác, hy vọng sẽ giúp mọi người chọn / cân chỉnh được bảng màu Neutral ưng ý hoặc ít nhất lượm lặt được gì đó trong bài viết và áp dụng được vào Project mọi người đang chạy.
Big thanks mọi người vì đã đọc tới đây!
Kinh nghiệm học tập chính đến từ: anh Matt - MDS Shift Nudge, anh Trí Tâm, team Conceptzilla.
Mình hay hoạt động trên Dribbble, ngoài ra còn có Behance, Linkedin, Insta, X. Rất mong được connect với mọi người.
Bài viết này thuộc hoạt động Writing Together dành cho học viên của UX Foundation - nơi mọi người sẽ cụ thể hóa suy nghĩ / những bài học / quan sát của mọi người thông qua việc viết. Nếu bạn cũng muốn bài viết của mình được đăng trên website của UX Foundation, hãy tham khảo thêm thông tin về hoạt động này ở phần Đăng ký câu lạc bộ trong cộng đồng của chúng mình nhé!
