Bảng màu xám: mã màu xám trắng, ghi, xám xanh, bạc cho UI và in ấn

Bảng màu xám 8 sắc kèm mã HEX, RGB, CMYK đọc từ công cụ Đổi mã màu của ColorME: xám trắng, ghi sáng, bạc, xám xanh, xám than. Tạo thang xám 50-950, dùng cho giao diện, chữ xám nào đọc được và lưu ý khi in.

Trả lời nhanh: bảng màu xám gồm các sắc từ xám trắng gần như trắng đến xám đen gần như đen. Tên CSS gray là #808080, nhưng trong thiết kế giao diện và in ấn người ta hay dùng cả một thang xám, thường hơi ngả xanh cho cảm giác sạch và hiện đại. Bảng dưới gom tám sắc xám hay gặp; HEX là màu đại diện do ColorME chọn, còn RGB và CMYK mình đọc từ công cụ Đổi mã màu của ColorME ngày 18/10/2026.

Bảng màu xám 8 sắc: HEX do ColorME chọn, RGB và CMYK đọc từ công cụ Đổi mã màu ngày 18/10/2026. Hình do ColorME tự dựng.

Mẹo chọn nhanh: sắc sáng (xám trắng, ghi sáng, bạc) dùng cho nền và đường kẻ; sắc giữa (xám trung tính, xám xanh) cho chi tiết phụ; sắc đậm (ghi đậm, xám than, xám đen) cho chữ.

Xám trung tính và xám ngả xanh khác nhau thế nào?

Đọc giá trị HSL mà công cụ trả về sẽ thấy rõ:

• Bạc #C0C0C0: hsl(0, 0%, 75%). Độ bão hoà 0%: xám trung tính tuyệt đối, ba kênh R, G, B bằng nhau (192, 192, 192).
• Ghi sáng #D1D5DB: hsl(216, 12%, 84%). Sắc độ 216 nằm ở vùng xanh dương, độ bão hoà 12%: nhìn vẫn là xám nhưng hơi "lạnh".
• Xám xanh #6B7B8C: hsl(211, 13%, 48%). Kênh B (140) cao hơn hẳn kênh R (107), nên xám ngả xanh rõ hơn.

Trong giao diện web và app, thang xám hơi ngả xanh rất phổ biến vì trông sạch, hợp với màu nhấn xanh dương. Thang xám trung tính tuyệt đối hợp với ảnh đen trắng, nhiếp ảnh và ấn phẩm cổ điển.

Mã màu xám trong CSS: 5 tên gõ là dùng được

Giá trị là kết quả công cụ Đổi mã màu trả về khi gõ đúng tên CSS.

Tạo cả thang xám 50-950 từ một mã màu

Với giao diện, một hai mã xám là không đủ: bạn cần nền, viền, chữ phụ, chữ chính, nút. Công cụ Thang màu & design token tạo 11 bậc từ 50 đến 950 chỉ từ một mã. Mình nhập #6B7280 và đặt tên biến là gray:

1. Nhập mã màu gốc và đặt tên biến (ví dụ gray).
2. Xem 11 bậc, mỗi ô ghi mã HEX, nên dùng chữ đậm hay chữ trắng trên nền đó và tỉ lệ tương phản.
3. Chọn định dạng CSS, Tailwind, SCSS hoặc JSON rồi sao chép hay tải tệp.

Thang xám 50-950 tạo từ #6B7280 trong công cụ Thang màu & design token, kèm tỉ lệ tương phản từng ô. Ảnh chụp màn hình thật, 18/10/2026.

Thang mình nhận được đi từ gray-50 #F3F7FF đến gray-950 #1D222C, màu gốc #6B7280 rơi vào bậc 600. Trang công cụ trả lời câu "Công cụ có miễn phí không?": "Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt."

Dùng thang xám trong một thẻ giao diện

Một thẻ giao diện chỉ dùng thang xám vừa tạo; tên thương hiệu là giả định. Hình do ColorME tự dựng.

Thẻ mẫu trên chỉ dùng thang gray vừa tạo: nền trang gray-50, đường kẻ gray-200, nhãn nhỏ gray-600, chữ nội dung gray-700, tiêu đề và nút chính gray-900, nút phụ nền gray-100 chữ gray-800. Mình tính lại tỉ lệ tương phản trên nền trắng: gray-600 đạt 4,83:1, gray-700 đạt 6,91:1, gray-900 đạt 12,51:1, đều qua mức 4,5:1. Riêng gray-500 #838A99 chỉ đạt 3,47:1 nên mình không dùng nó cho chữ.

Chữ xám trên nền trắng: từ bậc nào thì đọc được?

Tỉ lệ tương phản của 8 sắc xám trên nền trắng, tính theo WCAG 2.2: chỉ từ ghi đậm #4B5563 trở xuống đạt 4,5:1.

Lỗi hay gặp nhất với màu xám là chữ xám quá nhạt. Mức tối thiểu cho chữ thường theo WCAG 2.2 là 4,5:1. Trong 8 sắc của bảng, chỉ từ ghi đậm #4B5563 (7,56:1) trở xuống mới đủ cho chữ nội dung trên nền trắng. Xám xanh #6B7B8C đạt 4,34:1, sát ngưỡng nhưng chưa đủ; xám trung tính #9CA3AF chỉ 2,54:1. Bạn tự kiểm tra cặp màu của mình bằng công cụ Kiểm tra tương phản.

Màu xám khi in: chú ý kênh K

Bảng trên cho thấy hai kiểu xám rất khác nhau khi đổi sang CMYK:

• Xám trung tính như bạc #C0C0C0 ra cmyk(0%, 0%, 0%, 25%): chỉ dùng mực đen (K).
• Xám ngả xanh như ghi đậm #4B5563 ra cmyk(24%, 14%, 0%, 61%): pha thêm C và M.

Khi in, xám chỉ có K thường ổn định hơn vì không phụ thuộc vào việc ba màu C, M, Y có in khớp nhau không; xám pha nhiều màu dễ bị ngả màu nếu máy in lệch. Đây là kinh nghiệm thường gặp, không phải quy tắc tuyệt đối. Về độ chính xác của phép đổi, trang công cụ ghi: "Đây là công thức chuyển đổi chuẩn, đủ để tham khảo và trao đổi. Màu in thật còn phụ thuộc hồ sơ màu ICC, loại giấy và máy in của nhà in, nên hãy in thử trước khi in số lượng lớn."

Mã màu bạn nhập có được lưu không?

Trang công cụ Đổi mã màu trả lời câu "Mã màu tôi nhập có bị gửi đi đâu không?": "Việc chuyển đổi chạy ngay trên trình duyệt của bạn. ColorME chỉ ghi nhận lượt dùng kèm mã màu bạn đổi hoặc sao chép để thống kê, không cần tài khoản."

Xem thêm các bảng màu khác: bảng màu vàng, bảng màu đỏ, màu xanh, hoặc mục Màu xám trong thư viện thuật ngữ.

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

Mã màu xám là bao nhiêu?

Tên CSS gray là #808080, RGB 128, 128, 128, CMYK 0, 0, 0, 50. Trong thiết kế, người ta thường dùng cả một thang xám thay vì chỉ một mã.

Mã màu xám trắng là gì?

ColorME chọn #F3F4F6 làm xám trắng đại diện: RGB 243, 244, 246, CMYK 1, 1, 0, 4. Màu này rất sáng, hợp làm nền trang và nền thẻ.

Mã màu xám xanh là gì?

Một sắc xám xanh hay dùng là #6B7B8C, RGB 107, 123, 140. Tên CSS slategray (#708090) cũng là một xám ngả xanh.

Màu bạc có mã màu gì?

Tên CSS silver là #C0C0C0, RGB 192, 192, 192, CMYK 0, 0, 0, 25. Trên màn hình, màu bạc chỉ là xám trung tính; độ bóng kim loại cần nhũ bạc hoặc ép kim khi in.

Chữ màu xám nào đọc được trên nền trắng?

Để đạt mức 4,5:1 theo WCAG 2.2, chọn xám đủ đậm như ghi đậm #4B5563 (7,56:1). Xám xanh #6B7B8C chỉ đạt 4,34:1, chưa đủ cho chữ nội dung.