Màu xanh: bảng mã màu xanh dương, xanh lá và cách phối
Mục lục
Bảng 20 sắc xanh kèm mã HEX, RGB chia hai họ xanh dương và xanh lá (xanh navy, coban, xanh ngọc, mint, xanh rêu, 13 tên màu CSS), xanh lá pha từ màu gì, ý nghĩa của từng họ và điều nghiên cứu thật sự nói, màu xanh hợp với màu gì, chữ nào đọc được trên nền xanh theo WCAG, vì sao không nên chỉ dùng xanh và đỏ để báo trạng thái, 5 hướng phối màu và lưu ý khi in.
Trả lời nhanh: trong tiếng Việt, "màu xanh" gọi chung hai họ màu mà tiếng Anh tách riêng: blue (xanh dương, xanh lam) và green (xanh lá, xanh lục), cộng thêm dải nằm giữa như xanh ngọc, xanh mint. Vì vậy không có một "mã màu xanh" duy nhất: bạn chọn họ trước rồi mới chọn sắc. Ba bảng dưới đây gom 20 sắc xanh hay gặp, kèm mã HEX và RGB; bảng đầu là họ xanh dương.
| Bảng màu xanh dương | HEX | RGB | Hợp dùng cho |
|---|---|---|---|
| Xanh dương pastel | #BCD9F2 | 188, 217, 242 | Nền trang, thẻ, khoảng nghỉ |
| Xanh da trời | #6CB8F0 | 108, 184, 240 | Minh hoạ, nền có chữ đen |
| Xanh nước biển | #1E7FCB | 30, 127, 203 | Du lịch, nước uống, tiêu đề lớn |
| Xanh dương (xanh lam) | #1F6FEB | 31, 111, 235 | Nút bấm, liên kết, màu chủ đạo |
| Xanh coban | #0047AB | 0, 71, 171 | Poster, nền đậm có chữ trắng |
| Xanh jean | #3F6C9E | 63, 108, 158 | Thời trang, giao diện trầm |
| Xanh xám | #6B8299 | 107, 130, 153 | Màu trung tính lạnh, nội thất |
| Xanh navy (xanh than) | #1B2A4A | 27, 42, 74 | Chữ, nền tối thay cho đen |
Hai mươi sắc xanh trong ba bảng của bài: tám sắc xanh dương, bốn sắc nằm giữa và tám sắc xanh lá. Mã là màu đại diện do ColorME chọn. Hình do ColorME tự dựng.
Bảng màu xanh lá (xanh lục): 8 sắc kèm mã
| Tên màu | HEX | RGB | Hợp dùng cho |
|---|---|---|---|
| Xanh lá pastel | #C8E6C0 | 200, 230, 192 | Nền nhẹ, đồ trẻ em, chăm sóc da |
| Xanh nõn chuối | #BFDB38 | 191, 219, 56 | Màu nhấn tươi, đồ uống, thể thao |
| Xanh bơ | #B8C96A | 184, 201, 106 | Thực phẩm, nội thất, nền dịu |
| Xanh lá (xanh lục) | #2FA84F | 47, 168, 79 | Màu chủ đạo, biểu tượng, nhãn |
| Xanh lá neon | #39FF14 | 57, 255, 20 | Sự kiện, game, chỉ dùng trên màn hình |
| Xanh lá đậm | #17603A | 23, 96, 58 | Chữ, nền đậm có chữ trắng |
| Xanh rêu | #5A6B3B | 90, 107, 59 | Thương hiệu thủ công, cây cảnh, cà phê |
| Xanh quân đội | #4B5320 | 75, 83, 32 | Thời trang, đồ dã ngoại |
Xanh ngọc, xanh mint, xanh cổ vịt: các màu nằm giữa
| Tên màu | HEX | RGB | Hợp dùng cho |
|---|---|---|---|
| Xanh mint (bạc hà) | #A8E6CF | 168, 230, 207 | Nền tươi mát, mỹ phẩm, đồ ngọt |
| Xanh ngọc | #12B5A6 | 18, 181, 166 | Hồ bơi, du lịch biển, màu nhấn |
| Xanh ngọc bích | #00A86B | 0, 168, 107 | Trang sức, trà, bao bì cao cấp |
| Xanh cổ vịt | #0F6E78 | 15, 110, 120 | Nền đậm sang, nội thất, chữ |
Các tên tiếng Việt là tên gọi phổ biến, không có chuẩn nào quy định mã: mã trong ba bảng là màu đại diện do ColorME chọn, mỗi nơi có thể lệch một chút. Khi trao đổi với khách hoặc nhà in, hãy gửi mã chứ đừng chỉ gửi tên.
Nếu bạn cần một bảng màu xanh pastel, hãy lấy ba sắc sáng nhất: xanh dương pastel #BCD9F2, xanh mint #A8E6CF và xanh lá pastel #C8E6C0. Cả ba có độ sáng 78 đến 84% theo HSL, hợp làm nền, không hợp làm chữ.
Mã màu xanh trong CSS: 13 tên gõ là dùng được
Mã dưới đây lấy từ mục Named Colors trong CSS Color Module Level 4 của W3C, đọc ngày 14/10/2026.
| Tên CSS | HEX | RGB | Thuộc họ |
|---|---|---|---|
| blue | #0000FF | 0, 0, 255 | Xanh dương |
| navy | #000080 | 0, 0, 128 | Xanh dương |
| royalblue | #4169E1 | 65, 105, 225 | Xanh dương |
| dodgerblue | #1E90FF | 30, 144, 255 | Xanh dương |
| skyblue | #87CEEB | 135, 206, 235 | Xanh dương |
| teal | #008080 | 0, 128, 128 | Nằm giữa |
| turquoise | #40E0D0 | 64, 224, 208 | Nằm giữa |
| aquamarine | #7FFFD4 | 127, 255, 212 | Nằm giữa |
| green | #008000 | 0, 128, 0 | Xanh lá |
| forestgreen | #228B22 | 34, 139, 34 | Xanh lá |
| seagreen | #2E8B57 | 46, 139, 87 | Xanh lá |
| limegreen | #32CD32 | 50, 205, 50 | Xanh lá |
| olive | #808000 | 128, 128, 0 | Xanh lá ngả vàng |
Một điều dễ nhầm: tên green của CSS chỉ là nửa cường độ (0, 128, 0), còn xanh lá sáng hết cỡ có tên lime #00FF00.
Màu xanh là sự kết hợp của màu gì? Xanh lá pha từ màu gì?
Câu trả lời tuỳ bạn pha bằng gì:
- Pha màu vẽ, sơn: xanh lá thường được pha từ vàng với xanh dương. Còn xanh dương thường được coi là màu gốc trong hội hoạ; trang bánh xe màu của ColorME viết: "RYB là bánh xe truyền thống của hội hoạ với ba màu gốc đỏ, vàng, lam".
- Trên màn hình (RGB): cả hai đều là màu gốc. Adobe mô tả mô hình RGB là trộn ánh sáng đỏ, xanh lá và xanh dương, mỗi kênh từ 0 đến 255. Xanh lá là kênh G (lime 0, 255, 0), xanh dương là kênh B (blue 0, 0, 255). Bật cả hai kênh hết cỡ thì ra cyan 0, 255, 255, màu nằm giữa hai họ.
- Khi in (CMYK): cả hai thường là màu pha từ mực: xanh lá thường được tạo bằng mực cyan chồng mực yellow, xanh dương bằng mực cyan chồng mực magenta.
Vì sao vòng màu của hoạ sĩ và của màn hình khác nhau, mình đã viết ở bài vòng tròn màu sắc; cách đọc mã mực thì có ở bài hệ màu CMYK và RGB.
Xanh lá pha từ màu gì tuỳ vào chất liệu: vàng với xanh dương khi vẽ, kênh G trên màn hình, thường là mực cyan chồng yellow khi in. Màu sơn và màu mực trong hình chỉ để minh hoạ; giá trị RGB theo W3C. Hình do ColorME tự dựng.
Ý nghĩa màu xanh: xanh dương và xanh lá khác nhau về cảm xúc thế nào?
Hai họ xanh thường gợi hai nhóm liên tưởng khác nhau:
- Xanh dương thường được gắn với bầu trời và nước: yên tĩnh, rộng, mát, sạch. Sắc đậm như navy hay được đọc là nghiêm túc, chắc chắn, đáng tin.
- Xanh lá thường được gắn với cây cỏ: tươi, khoẻ, lành, tự nhiên, sự phát triển. Sắc rực như neon là trẻ, nghịch; sắc trầm như xanh rêu là mộc, chậm, bền.
Đó là liên tưởng văn hoá, thay đổi theo nơi chốn và thời kỳ, không phải phản ứng cố định của bộ não. Về phần "tâm lý", mình chỉ đọc được phần tóm tắt của hai nghiên cứu trong phòng thí nghiệm, và chúng không khớp hẳn nhau:
- Mehta và Zhu (2009, tạp chí Science) báo cáo rằng màu đỏ giúp làm tốt hơn các việc cần tỉ mỉ, còn xanh dương giúp làm tốt hơn các việc cần sáng tạo, qua nhiều thí nghiệm nhỏ (mỗi thí nghiệm từ 42 đến 208 người). Bài báo: doi.org/10.1126/science.1169144; mình đọc phần tóm tắt qua chỉ mục OpenAlex, chưa đọc toàn văn.
- Xia và cộng sự (2016, Frontiers in Psychology) thử lại với độ khó khác nhau: đỏ chỉ giúp ở việc tỉ mỉ đơn giản, còn xanh dương giúp ở việc tỉ mỉ khó và cả việc sáng tạo. Nhóm kết luận rằng loại việc và độ khó cùng quyết định ảnh hưởng của màu.
Cả hai đều đo điểm làm bài trong phòng thí nghiệm, không đo cảm nhận về thương hiệu. Vì thế mình không viết "xanh dương tạo niềm tin" như một sự thật.
Màu xanh hợp với màu gì?
Mình tính các bộ phối từ hai màu gốc trong bảng: xanh dương #1F6FEB và xanh lá #2FA84F, bằng cách xoay sắc độ trên vòng màu RGB.
| Quy tắc | Từ xanh dương #1F6FEB | Từ xanh lá #2FA84F |
|---|---|---|
| Bổ sung (đối 180°) | cam vàng #EB9B1F | tím hồng #A82F88 |
| Bổ sung chia tách | đỏ cam #EB351F, vàng chanh #D5EB1F | tím #8B2FA8, đỏ mận #A82F4C |
| Tương đồng (lệch 30°) | xanh lơ #1FD5EB, chàm #351FEB | xanh nõn #4CA82F, xanh ngọc #2FA88C |
| Bộ ba (lệch 120°) | hồng đỏ #EB1F6F, xanh nõn #6FEB1F | tím chàm #4F2FA8, cam đất #A84F2F |
| Đơn sắc | #D0E1FB, #8AB4F5, #0D4396, #082654 | #D7F4DF, #9BE3AE, #24803C, #144822 |
Hai họ xanh "đòi" hai màu đối khác hẳn nhau: xanh dương nổi nhất cạnh cam và vàng, xanh lá nổi nhất cạnh tím hồng và đỏ. Còn xanh dương với xanh lá khá gần nhau trên vòng màu, đặt cạnh nhau thì êm, miễn là khác độ sáng. Màu đối của xanh lá ngả về phía hồng; bảng mã và cách phối của họ hồng có trong bài màu hồng của mình.
Với màu trung tính, cả hai họ đều dễ tính: xanh dương hợp trắng và xám lạnh; xanh rêu, xanh bơ hợp be và nâu. Bạn có thể tự xoay các bộ phối này bằng bánh xe màu của ColorME; trang công cụ ghi "Hoàn toàn miễn phí và không cần đăng nhập".
Màu bổ sung, bộ ba và hai màu tương đồng của xanh dương #1F6FEB và xanh lá #2FA84F trên vòng màu RGB, kèm dải đơn sắc. Mã do ColorME tự tính. Hình do ColorME tự dựng.
Chữ trên nền xanh, chữ xanh trên nền trắng: cặp nào đọc được?
WCAG yêu cầu chữ thường có tỉ lệ tương phản ít nhất 4.5:1 với nền, chữ lớn ít nhất 3:1. Mình tính theo công thức trong kỹ thuật G17 của W3C, cắt bớt chứ không làm tròn lên:
| Nền | Chữ trắng #FFFFFF | Chữ gần đen #121212 | Nên dùng |
|---|---|---|---|
| Xanh da trời #6CB8F0 | 2.15:1 | 8.69:1 | Chữ đen |
| dodgerblue #1E90FF | 3.23:1 | 5.78:1 | Chữ đen |
| Xanh dương #1F6FEB | 4.63:1 | 4.04:1 | Chữ trắng |
| Xanh coban #0047AB | 8.43:1 | 2.22:1 | Chữ trắng |
| Xanh mint #A8E6CF | 1.41:1 | 13.27:1 | Chữ đen |
| Xanh ngọc #12B5A6 | 2.56:1 | 7.30:1 | Chữ đen |
| Xanh lá #2FA84F | 3.07:1 | 6.09:1 | Chữ đen |
| Xanh rêu #5A6B3B | 5.83:1 | 3.21:1 | Chữ trắng |
Điều hay bị bỏ qua: chữ trắng trên nút xanh lá #2FA84F chỉ đạt 3.07:1, tức chỉ hợp chữ lớn. Muốn nút xanh lá chữ trắng, hãy dùng green #008000 (5.13:1) hoặc xanh lá đậm #17603A (7.57:1).
Chiều ngược lại, chữ xanh trên nền trắng: đạt 4.5:1 có xanh dương #1F6FEB (4.63:1), royalblue (4.84:1), xanh coban (8.43:1), teal #008080 (4.77:1) và green #008000 (5.13:1). Chưa đạt cho chữ thường: dodgerblue (3.23:1), xanh lá #2FA84F (3.07:1) và xanh ngọc #12B5A6 (2.56:1). Cách chọn cặp màu mình viết kỹ ở bài màu tương phản; muốn thử cặp của riêng bạn thì dùng công cụ kiểm tra tương phản, trang ghi "Miễn phí, không cần đăng nhập".
Tỉ lệ tương phản của chữ trắng và chữ gần đen trên tám nền xanh, và của tám màu chữ xanh trên nền trắng. Ngưỡng theo WCAG 2.2; tỉ lệ do ColorME tự tính. Hình do ColorME tự dựng.
Đừng chỉ dùng xanh lá và đỏ để báo trạng thái
Xanh lá cho "xong", đỏ cho "lỗi" là thói quen của gần như mọi giao diện, nhưng không phải ai cũng tách được hai màu này. Viện Mắt Quốc gia Hoa Kỳ (NEI) viết rằng dạng rối loạn sắc giác phổ biến nhất khiến người ta khó phân biệt đỏ với xanh lá; một dạng hiếm hơn khiến khó phân biệt xanh dương với xanh lá.
Tiêu chí 1.4.1 của WCAG vì thế yêu cầu màu không là cách duy nhất để truyền thông tin hay phân biệt một thành phần. Cách làm:
- Thêm một dấu hiệu thứ hai: biểu tượng (dấu tích, dấu gạch chéo), chữ ("Đã thanh toán", "Lỗi"), hoặc hình dạng khác nhau.
- Cho hai màu khác hẳn độ sáng. Cặp đỏ #D93025 với xanh lá #2FA84F chỉ chênh 1.55:1; đổi sang đỏ đậm #B3261E với xanh lá nhạt #7BD88F thì chênh 3.75:1. Trang giải thích của W3C lấy đúng ví dụ xanh lá nhạt với đỏ đậm và mốc 3:1.
- Xem thử thiết kế bằng công cụ mô phỏng mù màu của ColorME. Trang ghi: "Có 4 dạng: mù màu đỏ (Protanopia), mù màu lục (Deuteranopia), mù màu lam (Tritanopia) và không thấy màu (Achromatopsia)". Mình chưa chạy công cụ cho bài này.
Phần còn lại của việc thiết kế giao diện có ở bài UI UX là gì.
Cùng một danh sách đơn hàng: bên trái chỉ phân biệt bằng chấm đỏ và xanh lá, bên phải có thêm biểu tượng và chữ. Hàng dưới là hai màu khi bỏ hết sắc độ, chỉ còn độ sáng (không phải mô phỏng mù màu). Hình do ColorME tự dựng.
5 hướng phối màu xanh và nơi nên dùng
| Hướng | Bốn màu | Cặp chữ và nền an toàn | Hợp với |
|---|---|---|---|
| Navy và trắng tin cậy | #1B2A4A, #FFFFFF, #1F6FEB, #DCE6F5 | Chữ #1B2A4A trên #FFFFFF: 14.22:1 | Tài chính, giáo dục, ứng dụng, hồ sơ |
| Xanh mint tươi | #A8E6CF, #0B5D4B, #FFFFFF, #FFD23F | Chữ #0B5D4B trên #A8E6CF: 5.55:1 | Mỹ phẩm, đồ uống, đồ ngọt |
| Xanh rêu và be tự nhiên | #5A6B3B, #E8DCC4, #2E3320, #C97B4A | Chữ #2E3320 trên #E8DCC4: 9.60:1 | Cây cảnh, cà phê, đồ thủ công |
| Xanh coban và vàng nổi bật | #0047AB, #FFD23F, #FFFFFF, #121212 | Chữ #FFD23F trên #0047AB: 5.84:1 | Poster, sự kiện, thể thao |
| Xanh ngọc và cam san hô | #12B5A6, #FF6B4A, #0B3A3A, #FFF4E6 | Chữ #FFF4E6 trên #0B3A3A: 11.50:1 | Du lịch biển, hồ bơi, mùa hè |
- Navy và trắng: navy làm chữ và mảng lớn, xanh dương #1F6FEB chỉ cho nút và liên kết.
- Xanh mint: mint với vàng gần như cùng độ sáng (1.02:1), chỉ nên làm mảng cạnh nhau; chữ để xanh đậm #0B5D4B.
- Xanh rêu và be: chữ xanh rêu trên be chỉ 4.29:1, hợp tiêu đề lớn; chữ nhỏ dùng #2E3320.
- Coban và vàng: cặp gần bổ sung nên rất nổi; giữ vàng ở phần nhỏ diện tích.
- Xanh ngọc và san hô: hai màu gần như cùng độ sáng (1.09:1), chồng chữ lên nhau sẽ rung mắt. Đặt cả hai trên xanh đậm #0B3A3A: xanh ngọc đạt 4.87:1, san hô 4.43:1 (chỉ hợp chữ lớn).
Ba hướng đầu trên ba sản phẩm mẫu: bìa sổ tay học viên của một lớp vẽ tông navy và trắng, chai soda bạc hà tông mint, túi vải của một triển lãm chữ tông coban và vàng. Thương hiệu giả định. Hình do ColorME tự dựng.
Hai hướng còn lại: xanh rêu với be trên gói bộ trồng rêu và thẻ treo của một tiệm cây, xanh ngọc với cam san hô trên biển chỉ dẫn của một hồ bơi. Thương hiệu giả định. Hình do ColorME tự dựng.
Bảng màu đã chốt thường đi tiếp vào key visual của cả chiến dịch.
Màu xanh khi in: vì sao xanh rực trên màn hình bị xỉn?
Trong hướng dẫn của Illustrator, Adobe viết rằng một số màu RGB, chẳng hạn màu neon, không in được vì không có màu tương đương trong CMYK; phần mềm đưa chúng về màu in được gần nhất nên bản in trầm hơn. Các sắc xanh rất rực như xanh lá neon, lime, cyan và blue #0000FF thường nằm trong nhóm gặp cảnh báo này.
Hãy bật cảnh báo ngoài gam màu và in thử trước khi chốt. Mình không đưa bảng quy đổi CMYK vì con số phụ thuộc profile và giấy của từng nhà in.
Câu hỏi thường gặp về màu xanh
Mã màu xanh là gì?
Tuỳ bạn cần xanh nào. Trong CSS, blue là #0000FF và green là #008000. Hai mã dịu hơn, dễ dùng hơn là xanh dương #1F6FEB và xanh lá #2FA84F.
Mã màu xanh navy là bao nhiêu?
Tên navy của CSS là #000080. Màu navy trầm mà dân thiết kế hay dùng thì gần #1B2A4A, là màu đại diện do ColorME chọn.
Xanh lam, xanh lục, xanh lơ là màu nào?
Xanh lam là tên sách vở của xanh dương, xanh lục là tên sách vở của xanh lá. Xanh lơ thường chỉ màu cyan #00FFFF, nằm giữa hai họ.
Mã màu xanh ngọc và xanh ngọc bích khác nhau thế nào?
Xanh ngọc (#12B5A6 trong bài) gần turquoise #40E0D0 của CSS; xanh ngọc bích (#00A86B) ngả hẳn về xanh lá. Cả hai là tên gọi phổ biến, không có mã chuẩn.
Nguồn đã đọc ngày 14/10/2026: W3C (CSS Color Module Level 4; WCAG 2.2 Understanding SC 1.4.1 và 1.4.3; Technique G17), Adobe (Understand color modes; Make colors printable or web safe), NEI (Types of Color Vision Deficiency), tóm tắt hai nghiên cứu qua OpenAlex. Tỉ lệ tương phản và bảng phối màu do ColorME tự tính.
