Chuyển tới nội dung
Noti EducationNoti Education

Công cụ miễn phí

Bảng màu marketing theo ngành - mã màu đẹp, copy một chạm

96 bảng màu chọn sẵn cho 28 ngành, mỗi ngành đủ bốn hướng: cổ điển, pastel, bắt trend và nền tối. Bấm là sao chép mã HEX.

Xử lý ngay trên máy bạn - không gửi gì lên máy chủ

  • Mỗi ngành đủ bốn hướng: cổ điển, pastel, bắt trend và nền tối
  • Mọi cặp chữ trên nền đều đã đạt chuẩn tương phản WCAG AA
  • Bấm một cái là sao chép mã HEX, không phải gõ lại
  • Tự sinh dải sắc độ, bộ hòa sắc và gradient từ màu của bạn

Tìm bảng màu

Lọc theo ngành và hướng màu, bấm vào ô màu để sao chép mã HEX.

96 bảng màu
Hướng màu

Đang hiện 96 bảng màu trong 28 ngành

Đỏ ớt - vàng nghệ

Cổ điển

16.5:1AAA
Xem trướcNút hành độngchữ trên nút 5.8:1
Vì sao chọn bộ màu này?

Vì sao hợp ngành này

Đỏ và cam là hai màu ấm có bước sóng dài, được ngành ăn uống dùng dày đặc vì chúng gắn với thức ăn chín, lửa và độ tươi - nhìn thấy là dạ dày phản ứng trước khi lý trí kịp đọc chữ. Đỏ còn tạo cảm giác khẩn trương, rất hợp với thứ mà quán ăn cần: quyết định nhanh, đặt bàn ngay, chốt combo trong hôm nay. Nền kem ấm thay cho trắng tinh giúp ảnh món ăn trông ngon hơn vì không bị nền lạnh hút mất sắc vàng của đồ ăn.

Cơ chế dùng màu

Chia theo 60-30-10: nền kem chiếm khoảng 60% diện tích, nâu gỗ và ảnh món ăn khoảng 30%, đỏ ớt chỉ 10% dồn vào nút đặt bàn và giá khuyến mãi. Đỏ ớt trên nền kem đạt trên 5:1 nên chữ trắng đặt lên nút đỏ vẫn đọc rõ; vàng nghệ CHỈ dùng làm mảng nền hoặc viền nhấn, chữ trên vàng phải là chữ đen vì chữ trắng trên vàng luôn trượt chuẩn AA. Màu đỏ đậm dành cho trạng thái di chuột và nút đang bấm, giữ cùng sắc nhưng tối hơn nên người dùng cảm nhận được phản hồi mà không thấy đổi màu thương hiệu.

Gợi ý dùng

  • Nút Đặt bàn / Gọi món - nền đỏ ớt, chữ trắng
  • Nhãn Giảm giá, Món mới - nền vàng nghệ, chữ đen
  • Nền banner menu và khung ảnh món - kem ấm
  • Chân trang, đường kẻ phân cách - nâu gỗ

Đào sữa - kem bơ

Pastel

12.6:1AAA
Xem trướcNút hành độngchữ trên nút 5.4:1
Vì sao chọn bộ màu này?

Vì sao hợp ngành này

Không phải quán ăn nào cũng bán tốc độ. Bistro, tiệm bánh, quán brunch và mô hình ăn chậm bán không khí ngồi lại, và đỏ tươi của quán ăn nhanh chống lại đúng điều đó - nó giục người ta ăn xong rồi đi. Dải đào sữa và kem bơ giữ được liên tưởng thức ăn (bánh nướng, bơ, kem, trái cây chín) nhưng hạ nhịp xuống, nên khách cảm thấy được mời ngồi lâu hơn. Đây cũng là dải màu ăn ảnh nhất với bánh ngọt và đồ nướng vì cùng gia đình sắc với chính món ăn.

Cơ chế dùng màu

Nền trắng đào và hai màu nhấn pastel gánh gần như toàn bộ diện tích, còn gạch nung dịu là điểm neo duy nhất - không có nó thì cả trang trôi tuột vì mọi thứ đều nhạt như nhau. Gạch nung đạt trên 5:1 so với nền nên nút chữ trắng đọc tốt; đào sữa và kem bơ quá sáng để làm nút, chỉ nên là mảng nền thẻ, viền hoặc nhãn có chữ đen. Đừng đặt chữ màu pastel lên nền pastel dù nhìn ảnh chụp thấy đẹp: hai màu cùng độ sáng thì tỉ lệ tương phản rơi xuống dưới 2:1 và menu thành không đọc nổi dưới nắng.

Gợi ý dùng

  • Nút Đặt bàn, Xem thực đơn - gạch nung dịu, chữ trắng
  • Thẻ món trong ngày, khung ảnh bánh - nền đào sữa
  • Nhãn Món theo mùa, Mới ra lò - kem bơ, chữ đen
  • Chữ mô tả nguyên liệu, ghi chú dị ứng - nâu sữa nhạt

Ô liu - bơ vàng

Bắt trend

14.7:1AAA
Xem trướcNút hành độngchữ trên nút 7.1:1
Vì sao chọn bộ màu này?

Vì sao hợp ngành này

Làn sóng quán ăn theo hướng nguyên liệu sạch, nông trại tới bàn ăn và bếp Địa Trung Hải đã kéo bộ ba ô liu, đất nung, bơ vàng thành ngôn ngữ nhận diện của phân khúc này. Ô liu nói về rau thơm và dầu ô liu, đất nung nói về nồi gốm và lò nướng, bơ vàng nói về bơ và mì tươi. Ba màu này cùng nằm trong nửa ấm của vòng tròn màu nên đứng cạnh nhau rất thuận, mà lại không rơi vào cặp đỏ vàng đã quá quen thuộc tới mức không ai nhớ nổi quán nào ra quán nào.

Cơ chế dùng màu

Ô liu là màu chủ đạo cho thanh điều hướng, tiêu đề mục và nút chính - nó đạt gần 7:1 trên nền lúa mì nên vừa làm nút chữ trắng vừa làm chữ tiêu đề. Đất nung là màu nhấn ấm cho nhãn và biểu tượng, đủ tối để chữ trắng vẫn đạt AA nhưng chữ đen mới là lựa chọn dễ đọc nhất trên nó. Bơ vàng chỉ nên là mảng nền nhỏ với chữ đen, tuyệt đối không làm chữ. Vì cả ba màu đều ngả ấm, phải giữ nền thật nhạt và khoảng trắng rộng, nếu không trang sẽ trông như một tấm ảnh ám vàng.

Gợi ý dùng

  • Nút Đặt bàn, Xem bếp hôm nay - xanh ô liu, chữ trắng
  • Nhãn Nguyên liệu theo mùa, Đặc sản vùng - đất nung
  • Mảng nền khối câu chuyện quán, trích dẫn đầu bếp - bơ vàng
  • Chữ phụ, nguồn gốc nguyên liệu - xám ô liu

Từ màu của bạn

Đã có màu thương hiệu thì không cần chọn bộ khác: dán mã màu, dải sắc độ và bộ hòa sắc tính ngay trong máy bạn.

H 356° · S 83% · L 58%

3 hoặc 6 ký tự từ 0-9 và A-F, có hay không có dấu # đều được.

Dải sắc độ (đơn sắc)

Giữ nguyên góc màu H và độ tươi S, chỉ thay đổi độ sáng L đều tay từ 96% xuống 8%. Đây chính là cách sinh bộ 50-900 của một màu thương hiệu: bậc sáng làm nền khối, bậc giữa làm nút, bậc tối làm chữ và trạng thái di chuột.

Bộ hòa sắc

Tất cả sinh bằng cách xoay góc H trên vòng tròn màu và giữ nguyên S/L - nhờ giữ nguyên độ tươi và độ sáng nên các màu đứng cạnh nhau không chỏi, đó là toàn bộ bí mật của việc phối màu bằng công thức.

Tương đồng (xoay -30 và +30 độ)

Ba màu nằm cạnh nhau trên vòng tròn - êm mắt, hợp làm nền và minh họa, nhưng yếu khi cần nút nổi bật.

Bổ túc (xoay 180 độ)

Màu đối diện - tương phản mạnh nhất, dùng cho nút hành động chính. Chỉ nên chiếm dưới 10% diện tích.

Tam giác (xoay 120 và 240 độ)

Ba màu chia đều vòng tròn - cân bằng và sinh động, hợp infographic, biểu đồ, trang cho trẻ em.

Bổ túc xen kẽ (xoay 150 và 210 độ)

Mạnh gần bằng bổ túc nhưng dễ chịu hơn vì tránh cặp đối đầu trực diện - lựa chọn an toàn khi mới bắt đầu.

Gradient cho banner và nút

Gradient dễ nhìn có công thức: hai màu cách nhau dưới 90 độ trên vòng tròn màu và chênh độ sáng vừa phải. Hai màu đối diện nhau đi qua vùng xám đục ở giữa, chênh sáng quá lớn làm dải chuyển gãy khúc.

lệch 19°dễ nhìn

Gradient dựng sẵn

Mỗi cặp đã kiểm hai đầu lệch nhau không quá 90 độ. Bấm là sao chép mã CSS.

Tự dựng gradient

Chọn hai đầu và góc; khối xem trước và mã CSS đổi ngay.

#ED3C47
#FF7849
135°

Hai màu lệch nhau 19° trên vòng tròn màu, chênh 6% độ sáng. Trong ngưỡng dễ nhìn.

Xem trước gradient
background: linear-gradient(135deg, #ED3C47 0%, #FF7849 100%);

Cách dùng

Ba bước là có bộ màu dùng được

Không cần biết lý thuyết màu. Mọi cặp chữ trên nền ở đây đã đạt chuẩn tương phản WCAG AA.

  1. 1

    Chọn ngành của bạn

    Hai mươi tám ngành, mỗi ngành gom sẵn nhiều bảng. Chưa biết chọn gì thì gõ từ khóa vào ô tìm - tìm được cả khi không bỏ dấu.

  2. 2

    Chọn hướng màu

    Cổ điển đi theo quy ước lâu năm của ngành, pastel nhẹ nhàng, bắt trend theo tông đang được chuộng, nền tối cho giao diện dark mode.

  3. 3

    Sao chép và dựng

    Bấm vào ô màu là mã HEX vào clipboard. Mỗi bảng ghi rõ vai trò từng màu và tỉ lệ nên chia khi dựng trang, nên bạn biết đặt màu nào ở đâu.

Tính năng

Không chỉ là một bảng mã màu

Chọn được bộ màu là một chuyện, dựng ra trang mà chữ vẫn đọc được là chuyện khác.

Bảng màu theo từng ngành

Không phải bộ màu chung chung: mỗi bảng kèm lý do vì sao ngành đó hợp tông ấy và cách chia tỉ lệ khi dựng trang.

Tương phản đo bằng số

Chữ trên nền tối thiểu 4,5:1, màu chính trên nền tối thiểu 3:1 theo chuẩn WCAG AA - tính trước khi đưa lên chứ không hứa suông.

Bốn hướng cho mỗi ngành

Cùng một ngành nhưng thương hiệu trẻ và thương hiệu lâu năm cần tông khác nhau, nên mỗi ngành có nhiều lựa chọn thay vì một bảng duy nhất.

Dải sắc độ và gradient

Nhập màu của bạn, công cụ tự dựng dải đậm nhạt, bộ hòa sắc và cặp gradient không rơi vào vùng xám đục.

Sao chép một chạm

Bấm ô màu là có mã HEX. Tên màu tiếng Việt nằm trong nhãn trợ năng nên vẫn tìm được mà không chiếm chỗ trong ô.

Không cần tài khoản

Toàn bộ dữ liệu bảng màu nằm sẵn trong trang, mọi phép tính chạy trên máy bạn. Không đăng ký, không giới hạn lượt dùng.

Bên trong

Bảng màu này gồm những gì?

96 bảng màu cho 28 ngành: ẩm thực, cà phê, giáo dục, công nghệ, y tế, làm đẹp, thời trang, tài chính, bất động sản, du lịch, thể thao, mẹ và bé, nông sản, nội thất, xe cộ, thương mại điện tử, luật, xây dựng, logistics, cưới hỏi, thú cưng, yoga, game, AI, nhiếp ảnh, âm nhạc, trang sức, thiện nguyện. Mỗi bảng ghi rõ vì sao ngành đó hợp bộ màu ấy và cách chia tỉ lệ khi dựng trang.

Mỗi ngành có nhiều hướng để chọn: cổ điển đúng quy ước lâu năm, pastel nhẹ nhàng, bắt trend theo tông đang được chuộng năm nay (earth tone, sage, terracotta, mocha, lavender số, teal sâu), và nền tối cho giao diện dark mode.

Kèm công cụ tự sinh dải sắc độ, bộ hòa sắc và gradient từ màu của bạn. Bấm vào ô màu là sao chép mã HEX; mọi cặp chữ trên nền ở đây đều đã đạt chuẩn tương phản WCAG AA.

Đọc được thật

Tương phản ở đây là số đo, không phải lời hứa

Mỗi bảng màu đều được tính tỉ lệ tương phản trước khi đưa lên: chữ trên nền đạt tối thiểu 4,5:1 và màu chính trên nền đạt tối thiểu 3:1 theo chuẩn WCAG AA. Vì chốt này mà nhiều mã màu phải chỉnh tối lại so với tông thường thấy của ngành - đổi lại là bạn dựng trang xong không phải sửa vì khách than khó đọc.

Bộ màu bạn tự nhập cũng được chấm ngay tại chỗ, nên biết được cặp nào dùng được và cặp nào chỉ nên để làm mảng trang trí.

Giải đáp

Câu hỏi thường gặp về chọn màu

Chọn màu thương hiệu theo ngành như thế nào?

Bắt đầu từ liên tưởng sẵn có của khách trong ngành đó rồi mới tính đến sở thích cá nhân: ăn uống hợp đỏ và cam vì gợi thức ăn chín và tạo cảm giác khẩn trương; tài chính, y tế và giáo dục hợp xanh dương vì gợi tin cậy và ổn định; nông sản, thực phẩm sạch hợp xanh lá vì gợi tự nhiên. Sau khi chọn được màu chủ đạo, hãy thêm đúng một màu nhấn tương phản cao cho nút hành động và một dải trung tính cho chữ với nền - ba nhóm đó đủ dựng cả website, thêm màu thứ tư thường chỉ làm trang rối.

Quy tắc 60-30-10 trong phối màu là gì?

Đây là cách chia tỉ lệ diện tích: khoảng 60% là màu nền chủ đạo (thường là trắng hoặc một sắc rất nhạt), 30% là màu phụ trợ cho các khối và ảnh, 10% còn lại là màu nhấn dồn vào nút hành động, giá khuyến mãi và nhãn quan trọng. Tỉ lệ này giữ cho mắt có chỗ nghỉ và làm màu nhấn thật sự nổi. Nếu màu nhấn bị dùng tràn lan ở mọi khối thì nó không còn nhấn được gì nữa - đó là lỗi phổ biến nhất khi tự phối màu.

Vì sao nút kêu gọi hành động phải tương phản cao?

Mắt người quét trang theo độ tương phản trước khi đọc chữ, nên thứ tương phản mạnh nhất với xung quanh sẽ được nhìn thấy đầu tiên. Nút mua hàng hay đăng ký cần đúng vị trí đó. Trong thực tế nghĩa là: nút dùng màu khác hẳn nền, không đặt hai nút cùng độ nổi cạnh nhau (nút phụ nên là viền hoặc chữ), và chữ trên nút phải đạt tối thiểu 4,5:1 so với nền nút. Một nút đẹp mà chữ mờ sẽ mất lượt bấm nhiều hơn là một nút xấu mà rõ ràng.

Tương phản WCAG AA là gì và vì sao cần quan tâm?

WCAG là bộ tiêu chuẩn về khả năng tiếp cận nội dung web; mức AA yêu cầu chữ thường đạt tỉ lệ tương phản tối thiểu 4,5:1 so với nền, chữ lớn từ khoảng 24px hoặc 19px in đậm thì 3:1, mức AAA khắt khe hơn là 7:1. Không chỉ để phục vụ người khiếm thị: người dùng điện thoại ngoài nắng, màn hình cũ hay mắt mỏi buổi tối đều đọc dễ hơn khi đạt chuẩn. Đây cũng là hạng mục bị chấm trong báo cáo Lighthouse phần Accessibility, thứ ảnh hưởng gián tiếp tới trải nghiệm mà công cụ tìm kiếm đánh giá. Mọi bảng màu trên trang này đều hiện sẵn tỉ lệ chữ trên nền để bạn khỏi phải tự đo.

Có màu nào giúp tăng tỉ lệ chuyển đổi không?

Không có màu thần thánh - các thử nghiệm nổi tiếng kiểu nút đỏ thắng nút xanh chỉ đúng trong đúng bối cảnh trang đó, vì cái thắng là độ tương phản của nút với phần còn lại chứ không phải bản thân màu đỏ. Thứ thật sự tác động là ba điều: nút nổi rõ so với nền, cùng một màu chỉ mang một ý nghĩa xuyên suốt trang, và màu nhấn không bị dùng lặp ở chỗ không bấm được. Muốn biết chắc thì phải chạy A/B test trên chính lưu lượng của bạn, thay đổi một biến mỗi lần.

Dùng gradient thế nào cho không bị rối?

Chọn hai màu cách nhau không quá một phần tư vòng tròn màu (khoảng 90 độ) và chênh độ sáng vừa phải; hai màu đối diện nhau sẽ đi qua vùng xám đục ở giữa nên dải chuyển trông bẩn. Chỉ đặt gradient ở một hoặc hai chỗ trong trang (thường là khối mở đầu hoặc nút chính), phần còn lại để màu đặc. Chữ đặt trực tiếp lên gradient rất dễ mất tương phản vì nền đổi màu dọc theo dải - nên đặt chữ trong một khối nền đục hoặc chỉ dùng gradient cho vùng không có chữ.

Công cụ khác

Còn năm công cụ miễn phí nữa

Cùng một nguyên tắc: chạy trên máy bạn, không cần tài khoản, không giới hạn lượt dùng.

Tạo mã QRTạo mã QR cho link, văn bản, Wi-Fi, danh thiếp - chèn được logo, tải về PNG/SVG.Nén ảnhNén ảnh sang WebP/AVIF chuẩn SEO, xóa metadata (EXIF/GPS), xóa watermark Gemini - chọn việc nào làm việc đó.Vòng quay may mắnQuay số trúng thưởng: nhập tay hoặc lấy danh sách từ Google Sheet, tùy chỉnh màu, gắn logo, có tiếng quay và danh sách người trúng.Kiểm tra SEO · AEO · GEODán URL bất kỳ trang nào, xem điểm SEO, AEO, GEO kèm danh sách việc cần sửa để tăng điểm nhanh nhất.Xóa watermark videoGỡ logo Gemini khỏi video ngay trong trình duyệt - video tối đa 25MB, 20 giây, Full HD; không tải lên máy chủ.Chỉnh sửa ảnhChe thông tin nhạy cảm, vẽ mũi tên và khung chú thích, cắt theo tỉ lệ nền tảng rồi chỉnh màu - tất cả ngay trong trình duyệt.Chuyển đổi MarkdownDán Markdown, tải về file Word, PDF, HTML hoặc văn bản thuần với định dạng đẹp, dễ đọc.Lấy transcript videoDán link YouTube hoặc TikTok để lấy toàn bộ lời thoại - chép ra văn bản, tải về kèm mốc thời gian hoặc file phụ đề.Bắn dataset MessengerĐẩy đơn hàng cũ bán qua Messenger lên Meta Dataset (Conversions API) - quét từ Pancake POS hoặc tải file, bắn từng đơn theo nhịp.Framework marketing đa kênhSơ đồ 6 pha hành trình khách x các kênh marketing, kênh sở hữu và quảng cáo: bấm một khối để thấy nó nhận gì từ pha trước và đẩy gì sang pha sau.Xem trước quảng cáoXem quảng cáo hiện thế nào trên Facebook, Instagram, Threads, TikTok, YouTube, Google và ChatGPT - đủ vị trí hiển thị, tô vùng video bị giao diện che.