Hướng dẫn về màu sắc
Màu sắc được hiển thị kết hợp giữa ánh sáng ĐỎ, XANH và XANH.
Tên màu
Với CSS, màu sắc có thể được đặt bằng cách sử dụng tên màu:
Giá trị màu CSS
Với CSS, màu sắc có thể được chỉ định theo nhiều cách khác nhau:
- Theo tên màu
- Là giá trị RGB
- Là giá trị thập lục phân
- Là giá trị HSL (CSS3)
- Là giá trị HWB (CSS4)
- Với từ khóa
currentcolor
Màu RGB
Giá trị màu RGB được hỗ trợ trong tất cả các trình duyệt.
Giá trị màu RGB được chỉ định bằng: rgb( RED , GREEN , BLUE ).
Mỗi tham số xác định cường độ màu là số nguyên trong khoảng từ 0 đến 255.
Ví dụ: rgb(0,0,255) được hiển thị là màu xanh lam, vì tham số màu xanh lam được đặt thành giá trị cao nhất (255) và các tham số khác được đặt thành 0.
Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho cả 3 nguồn sáng:
Ví dụ
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Màu thập lục phân
Giá trị màu thập lục phân cũng được hỗ trợ trong tất cả các trình duyệt.
Màu thập lục phân được chỉ định bằng: # RR GG BB .
RR (đỏ), GG (xanh lục) và BB (xanh lam) là các số nguyên thập lục phân nằm trong khoảng từ 00 đến FF chỉ định cường độ của màu.
Ví dụ: #0000FF được hiển thị là màu xanh lam, vì thành phần màu xanh lam được đặt ở giá trị cao nhất (FF) và các thành phần khác được đặt thành 00.
Ví dụ
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho cả 3 nguồn sáng:
Ví dụ
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Chữ hoa hay chữ thường?
Bạn có thể sử dụng chữ hoa hoặc chữ thường để chỉ định giá trị thập lục phân.
Chữ thường dễ viết hơn. Chữ hoa dễ đọc hơn.
Tên màu
CSS hỗ trợ 140 tên màu tiêu chuẩn.
Trong chương tiếp theo, bạn sẽ tìm thấy danh sách đầy đủ các tên màu theo thứ tự bảng chữ cái với các giá trị thập lục phân:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Từ khóa màu hiện tại
Từ khóa currentcolor đề cập đến giá trị thuộc tính màu của một phần tử.
Ví dụ
Màu đường viền của phần tử <div> sau sẽ là màu xanh lam, vì màu văn bản của phần tử <div> là màu xanh lam:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}Hãy tự mình thử »