Màu website xanh lá: 6 bảng màu kèm mã Hex

Bảng màu website xanh lá kèm mã hex, cặp màu chữ đã kiểm tra độ tương phản và gợi ý sử dụng, giúp bạn chọn tông xanh dễ đọc và hợp với thương hiệu.

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

Màu xanh lá nào đẹp nhất cho website?

Không có một tông xanh lá tốt nhất cho mọi trường hợp, nhưng xanh lá đậm, hơi giảm độ bão hòa như #166534 hoặc #2D6A4F là điểm khởi đầu an toàn nhất. Cả hai đều đạt ngưỡng chữ 4.5:1 của WCAG AA trên nền trắng (lần lượt 7.13:1 và 6.39:1), nên dùng tốt cho nút bấm, liên kết và tiêu đề. Các màu xanh lá sáng như #22C55E không đạt trên nền trắng (2.28:1), nên chỉ dùng cho biểu tượng hoặc nền tối.

Màu nào phối đẹp với xanh lá trên website?

Trắng ngà và kem ấm (#F6F4EC), xanh lá gần như đen (#081C15), cùng một màu nhấn ấm duy nhất như hổ phách hoặc đất nung đều phối rất hợp. Hãy dùng các màu trung tính ngả xanh thay vì xám thuần để trang web có cảm giác hài hòa, và chỉ giữ một màu nhấn cho hành động chính.

Màu xanh lá có đảm bảo khả năng đọc cho chữ không?

Xanh lá đậm thì có, còn xanh lá nhạt và trung bình thường không. WCAG 2 AA yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho chữ thường, và 3:1 cho chữ lớn và thành phần giao diện. Hãy kiểm tra từng cặp màu thay vì đánh giá bằng mắt, vì các tông trung bình như #40916C (3.83:1 trên nền trắng) chỉ đạt với chữ lớn.

Màu xanh lá mang ý nghĩa gì trong thiết kế web?

Xanh lá thường gắn với thiên nhiên, sự phát triển, sức khỏe, tính bền vững và tiền bạc, vì vậy bạn hay gặp màu này ở các trang về chăm sóc sức khỏe, tài chính, năng lượng và hoạt động ngoài trời. Ý nghĩa thay đổi theo sắc độ: xanh rừng đậm tạo cảm giác lâu đời, điềm tĩnh, còn xanh chanh lại năng động và hiện đại. Đây chỉ là quy ước chung, không phải điều chắc chắn, nên hãy thử nghiệm với chính khách hàng của bạn.

Có nên dùng màu xanh lá cho nút kêu gọi hành động (CTA) không?

Được, miễn là nút nổi bật so với phần còn lại của trang và chữ trên nút đạt yêu cầu tương phản. Nút xanh lá đậm với chữ trắng hoạt động tốt trên trang nền sáng. Với trang chủ yếu là màu xanh lá, nút màu nhấn ấm thường tách biệt tốt hơn. Hãy xem hướng dẫn về bảng màu tối ưu chuyển đổi của chúng tôi để biết cách lựa chọn.

Tôi có cần bảng màu xanh lá cho chế độ tối không?

Không bắt buộc, nhưng nền xanh lá đậm vốn đã là lựa chọn thiết kế phổ biến. Nếu bạn làm chế độ tối, đừng chỉ dùng lại bảng màu sáng: những màu xanh lá sáng không đạt trên nền trắng thường lại rất hợp trên nền xanh lá gần đen, ví dụ #22C55E trên #052E16 đạt 6.54:1.

Trả lời ngắn gọn: Với website xanh lá, hãy dùng xanh lá đậm như #166534 hoặc #2D6A4F cho nút bấm, liên kết và tiêu đề; nền trắng ngà ngả màu như #F6F4EC hoặc #F0FDF4; còn các màu xanh lá sáng như #22C55E chỉ nên dùng trên nền tối hoặc để trang trí. Xanh lá đậm trên nền sáng đạt ngưỡng chữ 4.5:1 của WCAG AA. Xanh lá sáng trên nền trắng thì không (#22C55E trên nền trắng chỉ đạt 2.28:1).

Dưới đây là sáu bảng màu xanh lá kèm giá trị hex, tỷ lệ tương phản đã đo và loại website phù hợp với từng bảng. Mọi tỷ lệ đều được tính bằng công thức độ chói tương đối (relative luminance) của WCAG, và bạn có thể tự kiểm tra bất kỳ cặp màu nào bằng công cụ kiểm tra độ tương phản màu.

Vì sao màu xanh lá khó dùng trên màn hình

Xanh lá nằm ở giữa dải độ chói. Một màu xanh lá trung bình trông rất rực rỡ, nhưng trên nền trắng thường quá nhạt để làm chữ, còn trên nền đen lại thường quá tối. Đó là lý do một màu xanh lá trông tuyệt trong logo vẫn có thể không đạt khi dùng làm màu nút bấm.

Quy tắc thực tế: hãy chọn màu xanh lá theo tỷ lệ tương phản, đừng chỉ dựa vào vẻ ngoài của mẫu màu. Với chữ thường, hãy nhắm tới 4.5:1 trở lên. Với chữ lớn (khoảng 24px thường hoặc 19px đậm trở lên) và các thành phần giao diện như viền ô nhập liệu, biểu tượng, mức tối thiểu là 3:1.

Sáu bảng màu website xanh lá kèm mã hex

Mỗi bảng màu gồm màu nền, màu chữ, màu nhấn cho nút bấm hoặc liên kết, và tỷ lệ tương phản của cặp màu quan trọng nhất.

1. Xanh rừng và kem (tạp chí, ngoài trời, ẩm thực)

Vai trò	Hex	Cặp màu và tỷ lệ
Nền	#F6F4EC
Chữ và tiêu đề	#1B4332	trên nền: 10.06:1
Nút / liên kết	#2D6A4F	chữ trắng trên nút: 6.39:1
Khung phụ	#95D5B2	chữ #1B4332 trên khung: 6.56:1

Ấm áp, dịu mắt và dễ đọc. Nền kem giúp tổng thể không bị lạnh lẽo. Phù hợp với nhà hàng, cửa hàng nông sản, du lịch và các trang nội dung dài.

2. Xanh bạc hà tươi (chăm sóc sức khỏe, phòng khám, nội dung y tế)

Vai trò	Hex	Cặp màu và tỷ lệ
Nền	#F0FDF4
Chữ và tiêu đề	#14532D	trên nền: 8.70:1
Nút	#15803D	chữ trắng trên nút: 5.02:1
Dải tối	#052E16	chữ #DCFCE7 trên dải: 13.57:1

Sáng và gọn gàng. Màu nút chỉ vừa vượt ngưỡng AA, vì vậy hãy giữ nhãn nút ở độ đậm bình thường trở lên và tránh đặt nút trên các khung có nền màu.

3. Xanh xô thơm và ô liu (studio, nội thất, đồ thủ công)

Vai trò	Hex	Cặp màu và tỷ lệ
Nền	#E9F5DB
Chữ và tiêu đề	#31572C	trên nền: 7.33:1
Nút	#4F772D	chữ trắng trên nút: 5.24:1
Điểm nhấn	#90A955	chữ #132A13 trên màu này: 5.84:1

Bảng màu trầm, mộc mạc. Hợp với portfolio và các thương hiệu boutique, khi bạn muốn có màu xanh lá mà không quá nổi bật.

4. Giao diện tối xanh lá đậm (fintech, SaaS, cao cấp)

Vai trò	Hex	Cặp màu và tỷ lệ
Nền	#081C15
Chữ	#B7E4C7	trên nền: 12.58:1
Màu nhấn / liên kết	#40916C	trên nền: 4.62:1
Thẻ	#1B4332	chữ #95D5B2 trên thẻ: 6.56:1

Nền tối cho phép các tông xanh lá trung bình làm màu nhấn. Lưu ý #40916C đạt trên #081C15 nhưng không đạt trên nền trắng (3.83:1), vì vậy đừng dùng lại màu này cho các khu vực nền sáng.

5. Xanh chanh neon trên nền xanh lá đậm (sự kiện, nhà sáng tạo nội dung, thương hiệu trẻ)

Vai trò	Hex	Cặp màu và tỷ lệ
Nền	#1A2E05
Tiêu đề / nút	#A3E635	trên nền: 9.69:1
Màu sáng thay thế	#22C55E	trên #052E16: 6.54:1

Năng lượng cao và rất dễ đọc, vì màu chanh sáng nằm trên nền tối. Hãy dùng tiết chế: cả trang toàn màu chanh sẽ nhanh làm mỏi mắt.

6. Xanh lá ngả lam (SaaS, công nghệ y tế, bền vững)

Vai trò	Hex	Cặp màu và tỷ lệ
Nền	#CCFBF1
Chữ và tiêu đề	#134E4A	trên nền: 8.41:1
Nút	#0F766E	chữ trắng trên nút: 5.47:1

Nghiêng về xanh lam-xanh lá, mang cảm giác công nghệ hơn và ít "thiên nhiên" hơn. Phù hợp khi bạn muốn dùng xanh lá nhưng không cần vẻ hữu cơ.

Những tông xanh lá không đạt và nên thay bằng gì

Không đạt	Cặp màu	Tỷ lệ	Thay bằng
Nút xanh lá sáng	#22C55E với chữ trắng	2.28:1	#15803D với chữ trắng (5.02:1)
Liên kết xanh chanh trên nền trắng	#65A30D trên nền trắng	3.09:1	#4D7C0F trên nền trắng (4.99:1)
Chữ nội dung xanh lá trung bình	#40916C trên nền trắng	3.83:1	#2D6A4F trên nền trắng (6.39:1)

Các màu tông trung bình vẫn vượt ngưỡng 3:1, nên chấp nhận được cho tiêu đề lớn, biểu tượng và đường viền, chỉ là không dùng cho đoạn văn hay liên kết cỡ nhỏ. Để hiểu rõ hơn những lỗi thường gặp, xem ví dụ về độ tương phản màu kém, và để chọn các cặp màu tương phản mạnh hơn nói chung, xem hướng dẫn bảng màu tương phản cao.

Cách tự xây dựng bảng màu xanh lá, từng bước

Xác định trước vai trò của màu xanh lá. Nó là màu thương hiệu, màu hành động hay chỉ là điểm nhấn? Màu xanh lá chỉ dành cho thương hiệu có thể là bất kỳ tông nào. Màu xanh lá cho hành động thì phải đạt yêu cầu tương phản.
Chọn một màu neo tối. Bắt đầu với xanh lá trong khoảng #14532D đến #2D6A4F. Đây sẽ là màu tiêu đề, liên kết và nút bấm trên nền sáng.
Phủ nhẹ màu lên nền. Dùng xanh lá rất nhạt hoặc kem ấm thay cho trắng thuần, ví dụ #F0FDF4 hoặc #F6F4EC. Hãy kiểm tra lại độ tương phản của chữ sau khi đổi nền.
Thêm một màu nhấn không phải xanh lá. Hổ phách hoặc đất nung đặt cạnh xanh lá giúp nút bấm nổi bật trên các trang có nhiều màu xanh. Hãy kiểm tra độ tương phản của chữ trên nút: ví dụ chữ #92400E trên nền #FEF3C7 đạt 6.37:1.
Kiểm tra mọi cặp chữ - nền. Đưa tiêu đề, nội dung, liên kết, nút bấm và chữ gợi ý (placeholder) vào công cụ kiểm tra. Cặp nào dưới 4.5:1 ở cỡ chữ nội dung thì cần đổi sang tông đậm hơn hoặc nhạt hơn.
Kiểm tra trạng thái hover và vô hiệu hóa. Màu khi di chuột thường trôi sang vùng không đạt.
Lưu bảng màu dưới dạng token có tên. Dùng các tên biến như brand-900, brand-700 và brand-100 giúp việc thay đổi sau này chỉ cần sửa một dòng. Hướng dẫn màu Tailwind CSS của chúng tôi giải thích ý tưởng thang sắc độ, và nhiều mã hex ở trên cũng lấy từ kiểu thang màu này.

Chọn màu xanh lá nào cho loại website nào

Bền vững, năng lượng, tổ chức phi lợi nhuận: xanh rừng và kem, hoặc xanh xô thơm. Bạn có thể xem phong cách thực tế trong mẫu Greenfield Renewables của chúng tôi.
Sức khỏe và chăm sóc cơ thể: xanh bạc hà tươi hoặc xanh lá ngả lam.
Tài chính và SaaS: giao diện tối xanh lá đậm, kèm một màu nhấn sáng duy nhất.
Ẩm thực, nông trại, vườn: xanh rừng và kem với một màu nhấn ấm.
Trang nhà sáng tạo và sự kiện: xanh chanh neon trên nền xanh lá đậm, chỉ dùng cho tiêu đề và một nút bấm.

Danh sách kiểm tra có thể sao chép trước khi xuất bản

[ ] Chữ nội dung đạt ít nhất 4.5:1 so với nền
[ ] Chữ lớn và biểu tượng đạt ít nhất 3:1
[ ] Nhãn nút đạt 4.5:1 so với màu nền của nút
[ ] Liên kết được phân biệt với chữ nội dung bằng nhiều hơn chỉ màu sắc (gạch chân là đủ)
[ ] Màu xanh lá sáng chỉ xuất hiện trên nền tối hoặc để trang trí
[ ] Không dùng quá một màu nhấn ngoài xanh lá
[ ] Các khu vực nền tối dùng cặp màu riêng đã kiểm tra, không dùng lại cặp của chế độ sáng
[ ] Bảng màu được lưu dưới dạng token có tên để có thể đổi ở một nơi

Nếu bạn chưa chắc một website cần tổng cộng bao nhiêu màu, hướng dẫn phối màu website giải thích những điều cơ bản, và mục thuật ngữ về bảng màu định nghĩa các thuật ngữ được dùng ở đây.

Áp dụng bảng màu xanh lá lên một website thực tế

Khi đã có mã hex, bạn cần một nơi để áp dụng chúng. Gói miễn phí của We.Inc cho phép bạn xuất bản tối đa ba website từ các mẫu có sẵn; trình tạo website bằng AI, tự soạn thảo website từ một câu lệnh, bắt đầu ở gói Starter với giá $20 một tháng. Bạn có thể đăng ký tại đây, dán mã hex nền, chữ và nút vào phần kiểu dáng của website, rồi chạy lại các bước kiểm tra độ tương phản trên các trang đã xuất bản.

Bắt đầu miễn phí · Không cần thẻ tín dụng

Umair Ali Sadaqat

Nhà sáng lập We.Inc

Umair là nhà sáng lập We.Inc. Anh viết về xây dựng website bằng AI, các agency và việc kinh doanh, vận hành một studio web.

Sẵn sàng tạo nên điều tuyệt vời?

Tham gia cùng 15,000+ doanh nghiệp đang dùng We.Inc để ra mắt, phát triển và tự động hóa, tất cả trên một nền tảng.