Mã màu trong CSS
Sở hữu bảng mã màu CSS chuẩn, bạn sẽ tự tin hơn khi thiết kế, lập trình web, bởi màu sắc là một phần không thể thiếu trong thế giới Internet. Ở bài viết dưới đây, eLib.VN xin giới thiệu cho bạn đọc những bảng mã màu đẹp và thông dụng nhất, kèm theo mã hex để các bạn tiện dùng.
Mục lục nội dung
Mã màu trong CSS - CSS sử dụng các giá trị màu để chỉ định một màu. Thông thường, chúng được sử dụng để thiết lập một màu cho foreground của một phần tử (ví dụ, văn bản của nó). Chúng cũng có thể được sử dụng thiết lập màu sắc của đường biên và các hiệu ứng trang trí khác.
Bạn có thể chỉ định các giá trị màu của bạn trong các định dạng khác nhau. Bảng sau liệt kê tất cả các định dạng có thể:
| Định dạng | Cú pháp | Ví dụ |
|---|---|---|
| Mã Hex | #RGGGBB | p (color: # FF0000;} |
| Mã hex ngắn | #RGB | p (color: # 6A7;} |
| RGB% | Rgb (rrr%, ggg%, bbb%) | p (color: rgb (50%, 50%, 50%);} |
| RGB tuyệt đối | Rgb (rrr, ggg, bbb) | p (color: rgb (0,0,255);} |
| Từ khóa | Aqua, đen, v.v ... | P {màu: teal;} |
Các định dạng này được giải thích chi tiết hơn trong các phần sau:
1. Màu CSS - Mã Hex
Hệ thập lục phân là một màu đại diện 6 chữ số. Hai chữ số đầu tiên (RR) đại diện cho một giá trị màu đỏ, hai giá trị tiếp theo là một giá trị màu xanh lá cây (GG), và giá trị cuối cùng là giá trị màu xanh (BB).
Giá trị thập lục phân có thể được lấy từ bất kỳ phần mềm đồ họa như Adobe Photoshop, Jasc Paintshop Pro, hoặc thậm chí sử dụng Advanced Paint Brush.
Mỗi mã thập lục phân sẽ được đứng trước bởi một ký hiệu '#' hay bảng băm. Sau đây là các ví dụ để sử dụng ký hiệu Hexadecimal.
| Màu | Màu HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
2. Màu CSS - Mã ngắn Hex
Đây là một dạng ngắn gọn của ký pháp sáu chữ số. Trong định dạng này, mỗi chữ số được sao chép để đạt được giá trị sáu con số tương đương. Ví dụ: # 6A7 trở thành # 66AA77.
Giá trị thập lục phân có thể được lấy từ bất kỳ phần mềm đồ họa như Adobe Photoshop, Jasc Paintshop Pro, hoặc thậm chí sử dụng Advanced Paint Brush.
Mỗi mã thập lục phân sẽ được đứng trước bởi một ký hiệu '#' hay bảng băm. Sau đây là các ví dụ để sử dụng ký hiệu Hexadecimal.
| Màu | Màu HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #FFF |
3. Màu CSS - Giá trị RGB
Giá trị màu này được chỉ định bằng cách sử dụng thuộc tính rgb () . Thuộc tính này lấy ba giá trị, một giá trị cho màu đỏ, xanh lá cây và màu xanh lam. Giá trị có thể là một số nguyên giữa 0 và 255 hoặc một phần trăm.
Chú ý: Tất cả các trình duyệt không hỗ trợ tài sản rgb () vì vậy bạn nên không sử dụng nó.
Sau đây là ví dụ để hiển thị ít màu sắc sử dụng các giá trị RGB.
| Màu | Màu RGB |
|---|---|
| Rgb (0,0,0) | |
| Rgb (255,0,0) | |
| Rgb (0,255,0) | |
| Rgb (0,0,255) | |
| Rgb (255.25,0,0) | |
| Rgb (0,255,255) | |
| Rgb (255.0255) | |
| Rgb (192.192.192) | |
| Rgb (255,255,255) |
4. Màu trình duyệt an toàn
Dưới đây là danh sách 216 màu được cho là an toàn nhất và màu sắc máy tính độc lập. Các màu này khác với mã hexa từ 000000 đến FFFFFF. Những màu này an toàn để sử dụng vì chúng đảm bảo rằng tất cả các máy tính sẽ hiển thị màu sắc chính xác khi chạy bảng màu 256 màu
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Trên đây là bài viết của eLib.VN về mã màu trong CSS. Hi vọng bảng tổng hợp mã màu này sẽ giúp ích cho bạn trong quá trình làm việc và học tập.
