Bảng màu neon: mã màu dạ quang và cách dùng không chói mắt

Bảng màu neon 12 sắc kèm HEX, RGB: xanh lá neon, vàng chanh, cyan, hồng neon, tím neon; vì sao neon trên nền trắng khó đọc, tỉ lệ tương phản 60 cặp chữ và nền, kiểm tra bằng công cụ, bảng màu neon không chói mắt, chữ neon bằng CSS và lưu ý khi in.

Trả lời nhanh: màu neon (hay màu dạ quang) là những sắc rực nhất mà màn hình hiển thị được: độ bão hoà gần như tối đa, độ sáng cao. Mã hay dùng là xanh lá neon #39FF14, vàng chanh #CCFF00, xanh cyan #00F0FF, hồng neon #FF2E97, hồng tím #FF00FF, tím neon #B026FF. Muốn dùng không chói mắt, hãy đặt neon trên nền tối (không cần đen tuyền), để neon chiếm khoảng 10% diện tích và kiểm tra từng cặp chữ, nền. Bảng dưới gom 12 mã neon kèm tỉ lệ tương phản trên nền trắng và nền đêm tím; RGB mình kiểm tra bằng công cụ Đổi mã màu, tỉ lệ tương phản đối chiếu bằng công cụ Kiểm tra tương phản ngày 22/10/2026.

Bảng màu neon 12 sắc: HEX do ColorME chọn, RGB và HSL kiểm tra bằng công cụ Đổi mã màu ngày 22/10/2026.

Đọc bảng theo ngưỡng của WCAG: chữ thường cần ít nhất 4,5:1, chữ lớn cần 3:1. Sáu trên mười hai màu neon không đạt cả mức chữ lớn trên nền trắng, năm màu trong số đó gần như "biến mất", nhưng lại rất nổi trên nền tối. Hai màu ngược lại là xanh dương neon và tím neon: đọc tốt trên nền trắng, còn trên nền tối lại chưa đủ cho chữ nhỏ. Phần dưới giải thích vì sao, và cách sửa.

Màu neon là gì, vì sao còn gọi là màu dạ quang?

Chữ "neon" đến từ đèn neon. Theo bài Neon lighting trên Wikipedia (mình đọc ngày 22/10/2026), khí neon trong ống phát ra ánh sáng màu cam; các màu khác của biển đèn đến từ khí khác (thuỷ ngân cho màu xanh dương, heli cho vàng hoặc hồng) và từ lớp phủ huỳnh quang trong ống. Còn chữ "dạ quang" trong tiếng Việt thường gắn với bút dạ quang: bài Highlighter trên Wikipedia gọi loại bút này là "fluorescent pen", tức bút mực huỳnh quang, và cho biết màu vàng phổ biến của nó đến từ chất pyranine.

Trong thiết kế số, "màu neon" là cách gọi chung cho những sắc rực như vậy trên màn hình. Nhìn mã HSL ở hình trên là thấy điểm chung: cả 12 màu đều có độ bão hoà S = 100%, độ sáng L từ 50% tới 72%. Đó là lý do chúng trông như phát sáng, và cũng là lý do chúng dễ gây chói. Nếu cần ôn lại khái niệm, xem mục độ bão hoà trong thư viện thuật ngữ.

Nếu bạn viết CSS, vài tên màu có sẵn cũng thuộc nhóm neon. Mình nhập từng tên vào công cụ Đổi mã màu và ghi lại kết quả:

Các mã HEX trong bảng 12 màu do ColorME chọn. Trên mạng có nhiều phiên bản "mã màu neon" khác nhau và không có chuẩn chung nào; điều quan trọng là bạn biết mỗi mã đứng ở đâu về độ sáng, vì độ sáng quyết định chữ có đọc được hay không.

Vì sao màu neon trên nền trắng gây mỏi mắt?

Hình dưới đặt cùng một dòng chữ "Mở tới 2 giờ sáng" bằng năm màu neon lên nền trắng và nền đêm tím:

Cùng một dòng chữ neon trên nền trắng và nền đêm tím, kèm tỉ lệ tương phản WCAG 2.2.

Lý do nằm ở độ sáng tương đối (relative luminance), đại lượng mà công thức tương phản của WCAG dùng. Vàng neon, vàng chanh, xanh lá, xanh bạc hà và xanh cyan có độ sáng tương đối từ khoảng 0,70 tới 0,84, gần bằng nền trắng (1,0). Chữ và nền vì thế gần như cùng độ sáng, tỉ lệ tương phản chỉ 1,17 tới 1,40:1. Mắt vẫn thấy "có màu", nhưng phải căng ra mới đọc được nét chữ. Trang Understanding Contrast (Minimum) của W3C giải thích rằng điều cần cho việc đọc là chênh lệch độ sáng giữa chữ và nền, không phải chênh lệch sắc màu.

Còn cảm giác chói thì đến từ diện tích. Một mảng lớn màu bão hoà 100% và sáng cao chiếm cả màn hình khiến mắt không có chỗ nghỉ; trên nền trắng, mảng neon lại nằm cạnh một vùng cũng rất sáng. Đây là nhận xét từ kinh nghiệm thiết kế của mình, không phải số đo, nhưng bạn sẽ thấy rõ ở ví dụ poster phía dưới.

Chiều ngược lại cũng đúng: xanh dương neon #1F51FF và tím neon #B026FF có độ sáng thấp (khoảng 0,13 và 0,18), nên trên nền trắng đọc được (5,70 và 4,59:1), còn trên nền tối thì lại thiếu (3,36 và 4,17:1). Không phải cứ "neon thì đặt trên nền đen" là xong.

Bảng tương phản: 12 màu neon trên 5 nền

Mình tính 60 cặp chữ neon trên năm nền hay gặp: trắng, kem #FAF4E6 (lấy từ bảng màu be), xám than #1A1A1F, đêm tím #120A24 và đen #000000. Công thức là công thức độ sáng tương đối của WCAG 2.2, cắt ở 2 chữ số thập phân (không làm tròn lên) giống cách công cụ Kiểm tra tương phản hiển thị.

60 cặp chữ neon trên 5 nền: trắng, kem, xám than, đêm tím, đen. ColorME tự tính theo công thức WCAG 2.2.

• Nền tối nào cũng hợp với vàng, xanh lá, cyan, bạc hà: từ 12,30:1 trở lên, đạt cả mức AAA (7:1).
• Đỏ, cam, hồng neon: trên nền tối đạt 4,5:1 cho chữ thường; trên nền trắng chỉ dùng được cho chữ lớn.
• Xanh dương và tím neon: trên nền tối chỉ dùng cho tiêu đề lớn, hoặc phải làm sáng lên (xem phần công cụ bên dưới).
• Nền kem làm mọi thứ kém đi một chút so với nền trắng, vì kem tối hơn trắng một chút. Neon trên nền kem là cặp khó nhất.

Nền đêm tím cho tỉ lệ gần với nền đen (chênh dưới 2 điểm ở các màu sáng), nên bạn không cần đen tuyền để neon nổi. Mình chọn đêm tím vì nó có chút sắc tím, đi cùng hồng và cyan dễ hơn, và khối tím than #231942 đặt lên trên vẫn tách được khỏi nền.

Kiểm tra từng cặp màu neon bằng công cụ Kiểm tra tương phản

Ma trận ở trên do mình tự tính. Để chắc chắn, mình mở công cụ Kiểm tra tương phản của ColorME, chưa đăng nhập, ngày 22/10/2026, và thử 9 cặp. Trang công cụ ghi trong phần hỏi đáp: "Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt máy tính lẫn điện thoại." Cách làm:

1. Nhập mã màu chữ vào ô Màu chữ (gõ HEX hoặc bấm ô màu để chọn).
2. Nhập mã màu nền vào ô Màu nền. Tỉ lệ tương phản hiện ngay, kèm kết luận và bốn mức AA, AAA cho chữ thường, chữ lớn.
3. Nếu chưa đạt, xem mục Gợi ý gần nhất · giữ sắc độ và bấm vào màu gợi ý để áp dụng.
4. Muốn thử chiều ngược lại (chữ nền đổi chỗ), bấm nút mũi tên giữa hai ô.

Xanh lá neon #39FF14 trong công cụ Kiểm tra tương phản: 1.35:1 trên nền trắng, 14.14:1 trên nền đêm tím. Ảnh chụp màn hình thật, chưa đăng nhập, 22/10/2026.

Với xanh lá neon trên nền trắng, công cụ báo 1.35:1, "Không đạt, khó đọc", và gợi ý hai màu cùng sắc độ nhưng tối hơn: #138700 (đạt AA) và #0A6500 (đạt AAA). Đổi nền sang đêm tím #120A24, cùng màu chữ đó lên 14.14:1, "Rất tốt · đạt AAA", và công cụ ghi "Không cần chỉnh". Cả 9 cặp mình thử đều ra đúng con số trong ma trận của mình:

Cặp đáng chú ý nhất là xanh dương neon trên nền tối. Mình bấm gợi ý đầu tiên, #3F73FF, và tỉ lệ lên 4.66:1, "Đạt chuẩn AA":

Gợi ý của công cụ cho xanh dương neon trên nền tối: #3F73FF đạt AA (4.66:1), #6F9AFF đạt AAA. Ảnh chụp màn hình thật, 22/10/2026.

Cách sửa này giữ nguyên sắc độ, chỉ tăng độ sáng. Theo phần hỏi đáp của trang, khi chưa đạt "công cụ giữ nguyên sắc độ màu chữ của bạn và chỉ đổi độ sáng tới khi đạt AA hoặc AAA". Màu xanh dương dịu #6B8CFF mà mình dùng trong bảng màu bên dưới (6,23:1) nằm giữa hai gợi ý #3F73FF và #6F9AFF.

Những gì mình chưa thử: ô chọn màu dạng bảng màu, nút Sao chép, mục Cặp màu mẫu, màu có độ trong suốt và giao diện trên điện thoại. Công cụ chỉ đo tương phản giữa hai màu đặc; nó không đo được độ chói của cả trang, không biết chữ to hay nhỏ, và không xử lý chữ đặt trên ảnh (trang khuyên lấy màu ở vùng ảnh sát chữ để kiểm tra). Về dữ liệu, phần hỏi đáp ghi: "Việc tính toán chạy ngay trên trình duyệt của bạn. ColorME ghi nhận lượt dùng kèm hai mã màu, tỉ lệ tương phản và kết quả đạt hay chưa để thống kê, không cần tài khoản." Hướng dẫn chi tiết hơn về công cụ có trong bài kiểm tra độ tương phản màu chữ và nền.

Bảng màu neon không chói mắt: 8 màu, mỗi màu một vai

Từ các con số trên, mình gom một bảng màu neon dùng được cho poster đêm, giao diện tối, slide sự kiện. Nguyên tắc: nền và chữ là màu "yên", neon chỉ làm điểm nhấn.

Bảng màu neon không chói mắt: 8 màu, mỗi màu một vai, neon chỉ chiếm khoảng 10% diện tích.

Năm quy tắc mình áp dụng khi dùng màu neon:

1. Neon chiếm khoảng 10% diện tích. Tỉ lệ 60 - 30 - 10 (nền, khối, nhấn) là điểm khởi đầu dễ nhớ.
2. Đoạn chữ dài dùng trắng ấm, không dùng neon. Neon dành cho tiêu đề, nút, nhãn, số liệu cần nổi.
3. Tối đa hai màu neon trong một thiết kế. Mình chọn hồng và cyan vì chúng cách xa nhau trên vòng màu và đều nổi trên nền đêm tím.
4. Không đặt chữ neon lên nền neon. Hồng neon trên cyan neon chỉ 2,44:1; đỏ neon cạnh xanh dương neon chỉ 1,55:1. Hai màu rất rực, độ sáng gần nhau đặt sát nhau còn tạo cảm giác "rung", nhìn như hai lớp ở độ sâu khác nhau; Wikipedia gọi hiện tượng thị giác này là chromostereopsis và mô tả nó hay gặp ở cặp đỏ, xanh dương hoặc đỏ, xanh lá.
5. Cần chữ trên nút neon thì dùng chữ tối. Chữ trắng trên hồng neon chỉ 3,44:1; chữ đêm tím trên hồng neon đạt 5,56:1, chữ đêm tím trên vàng chanh đạt 16,32:1.

Muốn xem thêm các tổ hợp màu tối có neon, bài 30 bảng phối màu đẹp có bảng "Neon đêm". Neon xanh cyan và xanh dương cũng hợp với nền xanh navy trong bảng màu lạnh; còn các sắc hồng neon có trong bảng màu hồng.

Ví dụ: một poster, hai cách dùng neon

Mình dựng một poster cho đêm nhạc điện tử giả định "Xung Nhịp", giữ nguyên bố cục và chữ, chỉ đổi cách đặt màu neon:

Cùng một poster cho đêm nhạc giả định: bản dùng neon làm nền và bản dùng neon làm điểm nhấn.

Bản bên trái dùng neon làm nền: cả trang xanh lá neon, chữ hồng và cyan. Ở cỡ nhỏ, dòng ngày giờ màu cyan trên xanh lá (1,03:1) gần như không đọc được, và mắt không biết nên nhìn vào đâu. Bản bên phải để nền đêm tím, chữ trắng ấm, neon hồng và cyan chỉ nằm ở vòng tròn, đường kẻ và nhãn vé. Poster vẫn "neon", nhưng thông tin đọc được ngay.

Chữ neon: hiệu ứng đèn neon bằng CSS

"Chữ neon" là một từ khoá được tìm nhiều không kém "bảng màu neon". Khi làm chữ phát sáng, lỗi hay gặp là tô chữ bằng chính màu neon rồi thêm quầng sáng thật dày:

Chữ neon bằng CSS: lõi chữ gần trắng và quầng sáng mỏng dễ đọc hơn chữ neon với quầng dày.

Quầng 80px tràn vào khoảng trống trong chữ, nét chữ mờ đi. Cách ổn hơn: lõi chữ gần trắng (#E6FDFF, 18,14:1 trên nền đêm tím), quầng neon chồng 3 lớp mỏng 4px, 14px, 32px. Đoạn CSS trong hình là đúng đoạn mình dùng để dựng bản bên phải. Hai lưu ý: chỉ dùng hiệu ứng này cho tiêu đề lớn, không dùng cho đoạn văn; và nên kiểm tra tương phản theo màu lõi chữ. Nếu muốn chữ neon chuyển động, xem bài tạo hiệu ứng chữ neon với After Effects; cần một font có nét giống ống đèn, thử font Tilt Neon có đủ dấu tiếng Việt. Còn hiệu ứng dải màu óng ánh kiểu ảnh ba chiều thì có ở bài hologram là gì.

Dùng màu neon trên nền sáng thì sao?

Nhiều thương hiệu vẫn cần trang nền trắng. Khi đó, đừng dùng neon cho chữ; hãy dùng neon làm mảng màu, rồi đặt chữ tối lên trên, hoặc chọn bản đậm hơn của màu neon cho chữ:

Mẹo nhỏ: màu neon trên nền sáng dễ trông "rẻ" nếu xuất hiện ở khắp nơi. Một dải màu, một nút, một sticker là đủ để trang có cảm giác trẻ và rực.

In màu neon: vì sao CMYK không in ra được?

Đây là điểm hay gây thất vọng nhất. Trong trang hướng dẫn Make colors printable or web safe của Illustrator, Adobe viết rằng một số màu trong hệ RGB và HSB, chẳng hạn màu neon, không in được vì không có màu tương đương trong hệ CMYK; phần mềm sẽ đưa chúng về màu in được gần nhất.

Công cụ Đổi mã màu vẫn trả về số CMYK cho mọi màu, ví dụ xanh lá neon #39FF14 ra C78 M0 Y92 K0, hồng tím #FF00FF ra C0 M100 Y0 K0. Đó là phép quy đổi bằng công thức đơn giản, không theo một hồ sơ màu in cụ thể nào, nên chỉ để tham khảo: in bốn màu với các số đó, kết quả sẽ trầm hơn màu bạn thấy trên màn hình. Mình chưa in thử các màu này, nên không đưa ảnh "bản in" nào ở đây.

Khi bản in thật sự cần độ rực của neon, nhà in thường dùng mực pha riêng (spot color). Theo bài Spot color trên Wikipedia, thợ in offset gọi là spot color bất kỳ màu nào in bằng mực không thuộc bốn màu chuẩn, gồm cả mực ánh kim và mực huỳnh quang (fluorescent), và mỗi màu pha như vậy cần một bản in riêng. Hệ màu pha phổ biến nhất là Pantone. Hãy hỏi nhà in xem họ có mực huỳnh quang không, chi phí thêm thế nào, và luôn in thử trước khi in số lượng lớn. Phần khác biệt giữa màu màn hình và màu in được giải thích kỹ trong bài bảng màu CMYK và mục RGB và CMYK.

Câu hỏi thường gặp

Mã màu neon phổ biến là gì?

Một số mã hay dùng: xanh lá neon #39FF14, vàng chanh #CCFF00, vàng neon #FFF01F, xanh cyan #00F0FF, xanh dương neon #1F51FF, tím neon #B026FF, hồng tím #FF00FF, hồng neon #FF2E97, cam neon #FF5F1F, đỏ neon #FF3131. Không có chuẩn chung cho "mã màu neon"; điểm chung là độ bão hoà gần 100%.

Màu neon hợp với nền màu gì?

Nền tối: đen, xám than, tím than, đêm tím #120A24. Vàng, xanh lá, cyan neon trên đêm tím đạt từ 13,61:1 trở lên. Riêng xanh dương và tím neon cần làm sáng lên (ví dụ #6B8CFF, #C77DFF) mới đủ cho chữ nhỏ trên nền tối.

Chữ trắng trên nền hồng neon có đọc được không?

Chỉ đủ cho chữ lớn. Chữ trắng trên hồng neon #FF2E97 đạt 3,44:1, dưới mức 4,5:1 cho chữ thường. Chữ tối như #120A24 đạt 5,56:1; công cụ Kiểm tra tương phản gợi ý #242424 để đạt AA.

Màu neon có in được không?

Không in đúng được bằng bốn màu CMYK. Adobe ghi rằng màu neon không có màu tương đương trong CMYK nên bản in sẽ trầm hơn. Muốn in rực, hỏi nhà in về mực pha riêng, mực huỳnh quang và in thử trước.

Làm sao để dùng màu neon không chói mắt?

Dùng nền tối, để neon chiếm khoảng 10% diện tích, tối đa hai màu neon, đoạn chữ dài dùng trắng ấm thay vì neon, không đặt chữ neon trên nền neon, và kiểm tra mọi cặp chữ, nền đạt ít nhất 4,5:1.