Giới thiệu về Gainsboro
Gainsboro (gainsboro) là màu xám rất nhạt, dịu, có mã hex #dcdcdc, hoặc rgb(220, 220, 220). Trong HSL, màu này có sắc độ 0°, độ bão hòa 0% và độ sáng 86%. Đây là một trong 148 màu có tên mà mọi trình duyệt đều hiểu, nên bạn có thể viết color: gainsboro; thay vì mã hex.
Dùng Gainsboro cho chữ và nền
| Cặp màu | Tỉ lệ tương phản | WCAG |
|---|---|---|
| Chữ Gainsboro trên nền trắng | 1.37 : 1 | không đạt |
| Chữ Gainsboro trên nền đen | 15.31 : 1 | AAA |
Trên nền gainsboro, hãy dùng chữ đen (15.31 : 1). WCAG yêu cầu tối thiểu 4.5 : 1 với chữ thường và 3 : 1 với chữ lớn. Kiểm tra các cặp màu khác bằng Công cụ kiểm tra tương phản.
CSS
.element {
color: gainsboro; /* or #dcdcdc */
background-color: #dcdcdc;
border: 1px solid rgb(220 220 220 / 50%);
}Các màu có tên tương tự
Xám nhạt (#d3d3d3), Thistle (#d8bfd8), Lavender (#e6e6fa), Trắng cổ (#faebd7), Be (#f5f5dc), Hồng sương mù (#ffe4e1).
Tìm tên màu
Dán mã HEX để nhận tên màu dễ đọc gần nhất và tên token gọn gàng cho CSS, SCSS, JavaScript hoặc cấu hình Tailwind của bạn.
Câu hỏi thường gặp
Mã hex của gainsboro là gì?
#dcdcdc — tức là rgb(220, 220, 220) và hsl(0, 0%, 86%). Trong CSS, bạn cũng có thể viết trực tiếp gainsboro.
Chữ gainsboro có dễ đọc trên nền trắng không?
Tỉ lệ tương phản của nó trên nền trắng là 1.37 : 1, không đạt WCAG — nên dùng để trang trí hoặc đặt trên nền tối.
Màu nào hợp với gainsboro?
Gainsboro là màu trung tính nên gần như hợp với mọi màu; hãy dùng cho nền, viền và chữ xung quanh một màu nhấn đậm hơn.