Bảng Màu Và Phối Màu Chuẩn Trong Thiết Kế Web

Bảng màu thiết kế web chuẩn không phải là danh sách vài mã HEX đẹp mắt, mà là một hệ thống quy định màu nào dùng cho nền, chữ, hành động, viền và trạng thái. Người mới thường chọn một màu thương hiệu, thêm hai màu đang thịnh hành rồi áp dụng theo cảm tính; kết quả là CTA không nổi bật, chữ phụ quá nhạt, trạng thái lỗi chỉ dựa vào đỏ và dark mode mất tương phản. Hướng dẫn này giúp bạn xây color system từ mục tiêu thương hiệu đến component thật, với 6 bảng màu có cặp foreground/background đã kiểm tra, cách áp dụng WCAG 2.2, quy trình tạo token và checklist bàn giao. Nếu bạn đang tìm danh sách phong cách, icon hoặc xu hướng thiết kế web 2026, hãy đọc bài xu hướng riêng; bài này đi sâu vào quyết định màu có thể triển khai và duy trì lâu dài.

Bảng màu thiết kế web khác bảng màu thương hiệu như thế nào?

Bảng màu thương hiệu thường xác định một số màu nhận diện dùng trên logo, ấn phẩm, bao bì và truyền thông. Bảng màu thiết kế web phải tiến thêm một bước: chuyển các màu đó thành vai trò giao diện có thể sử dụng lặp lại và kiểm thử. Một màu xanh logo có thể trở thành brand-primary, nhưng website còn cần màu nền, bề mặt card, chữ chính, chữ phụ, viền, link, focus, disabled, thành công, cảnh báo và lỗi. Mỗi màu nền lại cần màu “on” tương ứng cho chữ hoặc icon nằm phía trên.

Khác biệt này giải thích vì sao file brand guideline có ba swatch vẫn chưa đủ để code website. Designer cần tạo thang sáng–tối, thử màu trên component và xác định cặp được phép dùng. Developer cần token ổn định thay vì các mã HEX rải rác. Content editor cần biết kiểu section nào được dùng nền đậm và khi nào ảnh phải có overlay. Nếu chỉ nói “dùng màu xanh RiverLee”, mỗi người có thể chọn một sắc xanh khác nhau và giao diện nhanh chóng mất nhất quán.

Một color system tốt vì thế có ba lớp: màu gốc mô tả palette, semantic token mô tả chức năng và component token mô tả vị trí cụ thể. Ví dụ blue-600 có thể ánh xạ thành action-primary, rồi được button dùng làm button-primary-background. Khi thương hiệu điều chỉnh màu, đội ngũ đổi ánh xạ thay vì tìm và sửa từng màn hình.

Một bảng màu website tối thiểu cần những vai trò nào?

Website nhỏ vẫn cần nhiều vai trò hơn “màu chính, màu phụ, màu nhấn”. Bộ tối thiểu nên bao phủ nền trang, bề mặt, chữ, viền, hành động, focus và phản hồi hệ thống. Điều quan trọng không phải số lượng swatch mà là mỗi swatch có nhiệm vụ rõ ràng. Material Design 3 cũng tổ chức màu theo các nhóm primary, secondary, tertiary, error, surface và outline, đồng thời ghép màu nền với màu on-* dành cho nội dung phía trên.

Với mỗi màu nền quan trọng, hãy khai báo màu chữ/icon đi kèm, chẳng hạn primary và on-primary, surface và on-surface. Không tự động dùng trắng trên mọi màu đậm hoặc đen trên mọi màu sáng; tỷ lệ tương phản phụ thuộc độ chói tương đối của chính cặp màu. Một accent vàng có thể nổi trên nền xanh nhưng không đủ tương phản cho chữ trắng.

Quy trình 7 bước phối màu trong thiết kế web

Phối màu hiệu quả bắt đầu từ nội dung và nhiệm vụ, không phải bánh xe màu. Quy trình dưới đây giúp biến cảm xúc thương hiệu thành quy tắc có thể kiểm tra. Mỗi bước tạo một đầu ra cụ thể: brief màu, palette gốc, thang màu, semantic token, bản thử component, phiên bản dark mode và tài liệu bàn giao. Với website nhỏ, designer có thể hoàn thành vòng đầu trong một buổi; dự án nhiều sản phẩm cần thêm kiểm thử với dữ liệu và người dùng thật.

Trước khi bắt đầu, hãy tạo một trang tài liệu chung để ghi nguồn màu, ngày cập nhật và người duyệt. Việc này ngăn nhóm lấy nhầm màu từ ảnh logo nén hoặc tiếp tục dùng một mã cũ sau khi nhận diện đã thay đổi.

Bước 1: xác định mục tiêu, bối cảnh và ràng buộc thương hiệu

Ghi ba đến năm tính từ thương hiệu và diễn giải chúng bằng thuộc tính thị giác. “Tin cậy” có thể dẫn đến sắc độ ổn định, tương phản rõ và ít accent; “năng động” có thể dùng chroma cao hơn ở CTA và minh họa. Thu thập logo, màu đã đăng ký, ảnh sản phẩm, font, thị trường và nền tảng triển khai. Đồng thời xác định người dùng có đọc ngoài trời, trong điều kiện ánh sáng yếu hay trên thiết bị cũ hay không.

Bước 2: chọn một màu chủ đạo từ nhận diện hoặc nội dung

Màu chủ đạo nên có lý do: màu thương hiệu đã được nhận biết, màu nổi bật trong sản phẩm hoặc sắc độ phù hợp ngữ cảnh. Nếu logo có nhiều màu, không cần đưa tất cả thành CTA. Chọn một màu có thể tạo thang sáng–tối ổn định và còn đủ tương phản ở trạng thái hành động. Ghi mã màu ở không gian đang dùng—HEX, RGB hoặc OKLCH—và giữ file nguồn để tránh lấy màu sai từ ảnh nén.

Bước 3: tạo thang màu và nhóm neutral

Từ màu chủ đạo, tạo nhiều mức từ rất sáng đến rất đậm thay vì tự giảm opacity trên nền bất kỳ. Nhóm neutral nên có sắc độ gần với thương hiệu: xanh lạnh cho sản phẩm công nghệ, xám ấm hoặc nâu nhạt cho nội thất và lifestyle. Thang màu không nhất thiết có đúng mười mức, nhưng cần đủ cho nền nhẹ, viền, hover, màu mặc định và màu chữ trên nền sáng. Kiểm tra sự khác biệt bằng mắt lẫn công cụ.

Bước 4: gán semantic token theo chức năng

Không giao developer một hàng swatch rồi yêu cầu “dùng cho đẹp”. Ánh xạ chúng thành background, surface, text-primary, text-secondary, border, action-primary, action-hover, focus-ring, success, warning và danger. Tên token không chứa vị trí quá cụ thể như blue-button vì cùng chức năng có thể đổi màu. Semantic token giúp theme sáng và tối cùng dùng một API dù giá trị thực khác nhau.

Mỗi token nên có mô tả ngắn và ví dụ component để người triển khai không hiểu sai mức ưu tiên.

Bước 5: thử trên component và nội dung thật

Dựng ít nhất hero, header, button, link, card, form, alert, bảng và footer. Điền headline dài, nội dung tiếng Việt có dấu, giá, lỗi form và trạng thái disabled. Một palette nhìn cân bằng trên các hình vuông có thể thất bại khi CTA cạnh ảnh nhiều màu hoặc khi chữ phụ xuất hiện ở 14–16 px. Hãy kiểm tra cặp màu đúng ở kích thước, font-weight và nền thực tế thay vì chỉ dựa trên style tile.

Đừng bỏ qua dữ liệu trống và nội dung dài bất thường.

Bước 6: thiết kế dark mode bằng vai trò, không đảo màu

Dark mode không phải phép biến trắng thành đen. Dùng nền tối hơi nhuốm màu thương hiệu, bề mặt sáng dần theo độ cao và chữ trắng ngà để giảm chói. Accent thường cần sáng hơn hoặc giảm bão hòa để giữ cảm giác tương đương. Ảnh, logo, shadow, biểu đồ và màu trạng thái đều phải kiểm tra lại; một màu đạt trên nền trắng không bảo đảm đạt trên nền tối.

So sánh hai theme theo cùng nhiệm vụ và nội dung để kiểm tra thứ bậc có được bảo toàn.

Bước 7: kiểm thử, ghi tài liệu và bàn giao

Kiểm tra contrast tự động, mô phỏng thiếu hụt thị giác màu, dùng bàn phím và xem trên nhiều màn hình. Ghi rõ cặp màu được phép, trường hợp cấm, trạng thái và giá trị light/dark. Đồng bộ token giữa Figma và code, kèm ngày cập nhật và người chịu trách nhiệm. Một bảng màu chỉ hoàn tất khi người khác có thể áp dụng đúng mà không phải hỏi designer cho từng component.

Lưu kết quả kiểm tra cùng phiên bản token để lần cập nhật sau có mốc so sánh đáng tin cậy.

Sáu bảng màu thiết kế web có thể dùng làm điểm khởi đầu

Các bảng dưới đây là điểm khởi đầu có chủ đích, không phải theme hoàn chỉnh để sao chép. Mỗi palette gồm nền, chữ, màu hành động và accent; cặp được ghi tỷ lệ đã tính theo công thức tương phản của WCAG. Hãy thử lại sau khi thay font, cỡ chữ, ảnh và trạng thái. Logo, chữ rất lớn và thành phần không hoạt động có ngoại lệ trong WCAG, nhưng giao diện vẫn nên ưu tiên khả năng đọc thay vì dựa vào ngoại lệ.

Trong corporate blue, xanh navy dùng cho chữ và vùng neo, xanh #155EEF dành cho CTA; không dùng xanh nhạt làm chữ nhỏ. Warm natural đặt nền kem cạnh xanh rêu đậm, còn cam đất chỉ tạo điểm nhấn. Healthcare teal tránh cảm giác lạnh bằng bề mặt xanh rất nhạt. Quiet luxury dựa vào khoảng trắng và typography, không phủ vàng lên mọi thứ. Tech dark dùng cyan cho thông tin nổi bật nhưng vẫn cần màu trắng ngà cho văn bản dài. Playful contrast cho phép vàng trang trí, còn nút chính dùng tím hoặc cam đủ đậm.

Phối màu theo hue, saturation và lightness thay vì công thức cứng

Bánh xe màu giúp hiểu quan hệ bổ túc, tương đồng hoặc bộ ba, nhưng giao diện chủ yếu được đọc qua độ sáng, độ tương phản và diện tích sử dụng. Hai màu khác hue nhưng có lightness gần nhau có thể hòa thành một khối khi người dùng khó phân biệt màu. Ngược lại, một palette gần như đơn sắc vẫn tạo thứ bậc tốt nếu có chênh lệch sáng–tối rõ. Vì vậy, hãy kiểm tra ảnh chụp giao diện ở thang xám: CTA, chữ và biên giới quan trọng vẫn nên nhận ra được.

Quy tắc 60–30–10 có thể là điểm khởi đầu—màu nền chiếm phần lớn, màu hỗ trợ tạo cấu trúc, accent chỉ nhấn—nhưng không phải tiêu chuẩn web. Một trang có nhiều card, bảng, trạng thái và hình ảnh cần phân bổ theo vai trò, không theo diện tích tuyệt đối. Cũng không nên dùng accent cho cả link, badge, chart, CTA và decoration nếu chúng có mức ưu tiên khác nhau.

Khi điều chỉnh saturation, hãy giữ màu mạnh cho vùng nhỏ và giảm chroma ở vùng lớn. Nền bão hòa cao gây mỏi mắt và làm ảnh sản phẩm cạnh tranh. Khi điều chỉnh lightness, kiểm tra toàn bộ cặp foreground/background. CSS hiện đại hỗ trợ các không gian màu cảm nhận như oklch(), giúp tạo thang màu có bước sáng đều hơn, nhưng browser fallback và quy trình thiết kế–code vẫn cần được thống nhất. Công cụ không thay thế việc kiểm tra component thật.

Tương phản màu theo WCAG 2.2: các ngưỡng cần nhớ

WCAG 2.2 của W3C quy định ở mức AA rằng văn bản thông thường và ảnh chứa chữ cần tỷ lệ tương phản tối thiểu 4,5:1; văn bản lớn cần 3:1. Văn bản lớn được xác định theo kích thước và độ đậm trong tiêu chuẩn, vì vậy cách an toàn là không giả định mọi headline đều được hưởng ngưỡng thấp hơn. Thành phần giao diện và đồ họa cần thiết để nhận biết điều khiển hoặc trạng thái thường cần non-text contrast 3:1 với màu liền kề.

Tiêu chí Use of Color 1.4.1 yêu cầu màu không phải phương tiện thị giác duy nhất để truyền thông tin, gợi hành động hoặc phân biệt phần tử. Viền đỏ quanh input không đủ nếu không có icon và thông báo lỗi. Hai đường biểu đồ xanh–đỏ cần nhãn, kiểu nét hoặc marker khác nhau. Link trong đoạn văn nên có gạch chân hoặc dấu hiệu bổ sung khi màu không tạo được khác biệt phù hợp.

Đừng chỉ chạy một plugin trên màn hình Figma rồi kết luận đạt. Kiểm tra trạng thái mặc định, hover, active, focus, selected, visited, disabled và error trên nền thực tế. Ảnh nền, gradient, opacity và blend mode có thể làm tỷ lệ thay đổi theo từng vị trí. Kiểm thử tự động phát hiện nhiều lỗi nhưng không thay thế đánh giá bằng mắt, bàn phím và người dùng có nhu cầu tiếp cận khác nhau.

Thiết kế light mode và dark mode trong cùng một hệ màu

Light mode và dark mode nên dùng chung tên semantic token nhưng ánh xạ sang giá trị khác. background có thể là #F7FAFC ở theme sáng và #0B1020 ở theme tối; text-primary chuyển từ navy gần đen sang trắng ngà; action-primary có thể được nâng lightness ở dark mode. Cách này giữ ý nghĩa component ổn định và giảm lỗi khi đổi theme.

Trong dark mode, không dùng đen tuyệt đối cho mọi nền và trắng tuyệt đối cho mọi chữ. Nền hơi sáng hoặc nhuốm hue giúp tạo lớp; surface càng nổi có thể càng sáng nhẹ. Shadow tối ít hiệu quả nên cần border hoặc thay đổi surface. Màu bão hòa mạnh trên nền tối có thể rung hoặc chói; điều chỉnh lightness/chroma rồi đo lại contrast. Logo có phiên bản tối, ảnh có vùng trắng lớn và illustration có outline mảnh cũng cần biến thể riêng.

Người dùng có thể chọn theme hệ thống qua prefers-color-scheme, nhưng website nên cho phép đổi thủ công nếu bối cảnh cần. Lưu lựa chọn minh bạch, tránh chớp theme khi tải và kiểm tra form, chart, syntax highlight, cookie banner cùng nội dung nhúng. Dark mode tốt không chỉ là screenshot đẹp; mọi tác vụ phải giữ thứ bậc và trạng thái như light mode.

Màu sắc, icon và hình ảnh cần phối hợp ra sao?

Màu không tồn tại tách biệt khỏi icon, ảnh và typography. Nếu hình sản phẩm đã nhiều màu, UI nên dùng neutral rộng và một accent rõ để tránh cạnh tranh. Nếu thương hiệu dùng illustration đơn sắc, hệ màu có thể phân lớp bằng tint và surface. Icon chức năng phải ưu tiên nhận biết: stroke hoặc fill đủ tương phản, trạng thái selected không chỉ đổi hue và hit area không phụ thuộc kích thước hình vẽ.

Khi xây bộ icon thiết kế web, hãy dùng màu semantic như icon-default, icon-muted, icon-action và icon-danger, không gán HEX trực tiếp vào từng SVG. Icon trang trí có thể nhận gradient hoặc nhiều màu; icon điều hướng, form và cảnh báo nên giữ quy tắc đơn giản. Phần xu hướng thiết kế web 2026 phân tích sâu hơn phong cách icon, typography, motion và art direction; color system trong bài này là nền để những xu hướng đó không làm giao diện mất nhất quán.

Ảnh đặt dưới chữ cần overlay có kiểm soát, nhưng overlay không bảo đảm mọi vùng đều đạt contrast. Tốt hơn là giữ text trong vùng nền ổn định hoặc tách thành khối riêng. Khi màu ảnh thay đổi theo CMS, hãy dùng scrim, gradient hoặc container đã kiểm thử. Luôn xem trang bằng nội dung xấu nhất: ảnh rất sáng, ảnh rất tối, logo nhiều màu và thumbnail không đồng đều.

Cách bàn giao bảng màu bằng design token

Bàn giao tốt gồm tên token, giá trị light/dark, mô tả, cặp được phép và component đang dùng. Designer có thể tổ chức Variables trong Figma; developer có thể ánh xạ sang CSS custom properties, theme object hoặc token pipeline. Tên gọi nên mô tả ý nghĩa thay vì giá trị để không trở nên sai khi rebrand.

:root {
  --color-background: #f7fafc;
  --color-surface: #ffffff;
  --color-text-primary: #0b1f3a;
  --color-action-primary: #155eef;
  --color-on-action-primary: #ffffff;
  --color-focus-ring: #7aa7ff;
  --color-danger: #b42318;
}

[data-theme='dark'] {
  --color-background: #0b1020;
  --color-surface: #151d35;
  --color-text-primary: #f7faff;
  --color-action-primary: #56d9ff;
  --color-on-action-primary: #0b1020;
  --color-focus-ring: #8c7cff;
  --color-danger: #ff8a80;
}

Đoạn mã trên minh họa cấu trúc, không phải bộ token hoàn chỉnh. Dự án thực tế cần hover, active, disabled, border, text secondary và các trạng thái hệ thống. Lưu bảng đối chiếu Figma–code, tránh tên khác nhau giữa hai phía. Khi cập nhật, chạy visual regression hoặc kiểm tra các component đại diện trước khi phát hành toàn site. Bài thiết kế giao diện bằng Figma và Canva trình bày quy trình wireframe, UI kit và bàn giao rộng hơn.

Những lỗi phối màu website thường gặp

Lỗi phổ biến nhất là chọn màu theo từng màn hình thay vì một hệ thống. Màn hình đầu dùng xanh cho CTA, trang sau dùng cam vì “nổi hơn”, form lại dùng tím từ plugin. Hãy quay về semantic token và chỉ tạo token mới khi xuất hiện vai trò thật sự khác. Lỗi thứ hai là làm chữ phụ quá nhạt để giao diện trông tinh tế; tinh tế không có nghĩa là người dùng phải căng mắt đọc.

Lỗi tiếp theo là dùng màu trạng thái như màu trang trí. Nếu đỏ xuất hiện ở badge thường, người dùng khó nhận ra lỗi; nếu xanh lá vừa là CTA vừa là success, ý nghĩa bị lẫn. Không truyền thông tin chỉ bằng hue, không đặt chữ trực tiếp lên ảnh biến động, không dùng opacity để tạo mọi trạng thái và không giả định dark mode là phiên bản đảo màu.

Trước khi nghiệm thu, hãy kiểm tra: palette có vai trò rõ; CTA chính chỉ có một màu ưu tiên; body text và UI quan trọng đạt contrast; focus nhìn thấy; lỗi có icon và chữ; biểu đồ có nhãn; light/dark đều đủ trạng thái; icon dùng token; ảnh nền có phương án an toàn; giá trị Figma trùng code; license của font, icon và asset đã rõ. Đây là checklist ngắn nhưng ngăn phần lớn lỗi màu xuất hiện sau bàn giao.

Câu hỏi thường gặp về bảng màu và phối màu website

Các câu hỏi dưới đây xử lý những quyết định thường gây nhầm lẫn khi chuyển từ một palette đẹp sang giao diện có thể sử dụng. Tỷ lệ và ví dụ cần được kiểm tra lại trên component thực tế của từng dự án.

Website nên dùng bao nhiêu màu?

Không có con số cố định. Một website thường chỉ cần một màu thương hiệu chủ đạo, một accent có kiểm soát, nhóm neutral và màu trạng thái; nhưng mỗi nhóm có thể có nhiều mức sáng–tối. Hãy đếm vai trò, không đếm mã HEX. Nếu hai màu cùng dùng cho CTA chính, người dùng sẽ khó hiểu ưu tiên. Nếu một màu mới không giải quyết vai trò mới, có thể nó chỉ làm hệ thống phức tạp hơn.

Quy tắc 60–30–10 có phù hợp với thiết kế web không?

Quy tắc này hữu ích để người mới tránh phủ quá nhiều màu nhấn, nhưng không phải tiêu chuẩn bắt buộc. Website có nhiều surface, trạng thái, biểu đồ và ảnh động nên tỷ lệ diện tích thay đổi theo trang. Hãy coi 60–30–10 là gợi ý cho style tile, sau đó phân màu theo semantic role, thứ bậc nội dung và component. Contrast và khả năng nhận biết hành động quan trọng hơn tỷ lệ trang trí.

Có thể dùng màu logo làm màu nút CTA không?

Có, nếu màu đó nổi trên nền, đạt tương phản với nhãn nút và không bị dùng quá rộng khiến CTA mất ưu tiên. Một màu logo rất sáng có thể cần biến thể đậm hơn cho button hoặc dùng làm nền container với chữ tối. Không nên tự ý đổi màu nhận diện cốt lõi mà không thống nhất thương hiệu; hãy tạo thang màu và ghi rõ biến thể chức năng.

Công cụ kiểm tra contrast có thay thế kiểm thử người dùng không?

Không. Công cụ tính tỷ lệ giúp kiểm tra tiêu chí định lượng, nhưng không phát hiện đầy đủ thứ bậc kém, ý nghĩa màu mơ hồ, ảnh nền biến động hay trải nghiệm của người dùng trong bối cảnh thật. Hãy kết hợp kiểm tra tự động, review bằng mắt, mô phỏng thiếu hụt màu, điều hướng bàn phím và thử nhiệm vụ. WCAG là nền tảng quan trọng, không phải điểm kết thúc của usability.

Có cần làm dark mode cho mọi website?

Không bắt buộc. Dark mode hữu ích cho sản phẩm được dùng lâu, trong ánh sáng yếu hoặc khi người dùng mong đợi cá nhân hóa. Website giới thiệu nhỏ có thể ưu tiên một light theme thật tốt nếu ngân sách hạn chế. Nếu đã cung cấp dark mode, phải kiểm thử đầy đủ chứ không chỉ đổi nền: logo, ảnh, chart, form, trạng thái và nội dung nhúng đều cần biến thể phù hợp.

Xu hướng màu 2026 có nên quyết định toàn bộ bảng màu không?

Không. Xu hướng có thể đi vào accent, campaign hoặc lớp hình ảnh để giao diện trông đương đại, nhưng màu nhận diện và semantic token cần bền hơn. Hãy chọn palette theo thương hiệu, ngành, nội dung và accessibility trước; sau đó thêm một chi tiết xu hướng có thể thay đổi mà không phá hệ thống. Cách này giúp website không lỗi thời ngay khi một sắc màu mới xuất hiện.

Xây hệ màu trước khi trang trí giao diện

Phối màu trong thiết kế web tốt là quá trình biến nhận diện thành quy tắc sử dụng rõ ràng. Bắt đầu từ màu chủ đạo, tạo thang màu và neutral, gán semantic token, thử trên component thật, đo contrast, thiết kế dark mode có chủ đích rồi bàn giao bằng tên token thống nhất. Sáu palette trong bài giúp bạn bắt đầu nhanh, nhưng kết quả cuối cùng phải phản ánh nội dung, hình ảnh và người dùng của chính dự án.

Khi mọi quyết định đều có vai trò, cặp màu và trạng thái được ghi rõ, website dễ mở rộng hơn mà không đánh mất nhận diện.

Nếu doanh nghiệp đã có logo nhưng chưa có color system, RiverLee có thể rà soát nhận diện, xây style tile, thiết kế UI responsive và chuyển token vào website vận hành. Hãy liên hệ RiverLee hoặc gọi 0962.334.807 để trao đổi phạm vi và mục tiêu trước khi chọn một palette chỉ vì nó đang thịnh hành.