CSS - Màu sắc
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 để đặt màu cho nền trước của một phần tử (tức là văn bản của nó) hoặc cho phần nền của phần tử. Chúng cũng có thể được sử dụng để ảnh hưởng đến màu sắc của đường viề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 mình ở nhiều định dạng khác nhau. Bảng sau liệt kê tất cả các định dạng có thể có:
| định dạng | Cú pháp | Thí dụ |
|---|---|---|
| Mã Hex | #RRGGBB | p {màu: # FF0000;} |
| Mã Hex ngắn | #RGB | p {màu: # 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 | nước, đen, v.v. | p {color: teal;} |
Các định dạng này được giải thích chi tiết hơn trong các phần sau:
Màu CSS - Mã Hex
Hệ thập lục phân là biểu diễn màu gồm 6 chữ số. Hai chữ số đầu tiên (RR) biểu thị giá trị màu đỏ, hai chữ số tiếp theo là giá trị màu xanh lá cây (GG) và chữ số cuối cùng là giá trị màu xanh lam (BB).
Giá trị thập lục phân có thể được lấy từ bất kỳ phần mềm đồ họa nào 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 đặt trước một dấu thăng hoặc dấu thăng '#'. Sau đây là các ví dụ để sử dụng ký hiệu Hệ thập lục phân.
| Màu sắc | Màu HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Màu CSS - Mã Hex ngắn
Đây là một dạng ngắn hơn của ký hiệu sáu chữ số. Ở định dạng này, mỗi chữ số được sao chép để đạt được giá trị sáu chữ 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 nào 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 đặt trước một dấu thăng hoặc dấu thăng '#'. Sau đây là các ví dụ để sử dụng ký hiệu Hệ thập lục phân.
| Màu sắc | Màu HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #FFF |
Màu CSS - Giá trị RGB
Giá trị màu này được chỉ định bằng cách sử dụng rgb( )bất động sản. Thuộc tính này nhận ba giá trị, mỗi giá trị cho màu đỏ, xanh lục và xanh lam. Giá trị có thể là một số nguyên từ 0 đến 255 hoặc một phần trăm.
NOTE - Tất cả các trình duyệt không hỗ trợ thuộc tính rgb () của màu sắc vì vậy bạn không nên sử dụng nó.
Dưới đây là ví dụ để hiển thị một số màu sử dụng giá trị RGB.
| Màu sắc | Màu RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Xây dựng mã màu
Bạn có thể tạo hàng triệu mã màu bằng Trình tạo mã màu của chúng tôi. Kiểm tra của chúng tôiHTML Color Code Builder. Để sử dụng công cụ này, bạn cần có Trình duyệt được kích hoạt Java.
Màu sắc an toàn của trình duyệt
Dưới đây là danh sách 216 màu được cho là an toàn nhất và các màu độc lập với máy tính. Những màu này thay đổi từ mã hexa 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 một cách chính xác khi chạy bảng màu 256 -
| 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 |