Hướng dẫn về màu sắc
Màu sắc được hiển thị kết hợp ánh sáng ĐỎ, XANH LÁ và XANH LÁ.
Tên màu
Với CSS, màu có thể được đặt bằng cách sử dụng tên màu:
Thí dụ
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
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
- Dưới dạng giá trị RGB
- Dưới dạng giá trị thập lục phân
- Dưới dạng giá trị HSL (CSS3)
- Dưới dạng giá trị HWB (CSS4)
- Với
currentcolortừ khóa
Màu sắc 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 độ của màu là một số nguyên từ 0 đến 255.
Ví dụ: rgb (0,0,255) được hiển thị dưới dạng màu xanh lam, vì tham số màu xanh lam được đặt thành giá trị cao nhất (255) và các thông số khác được đặt thành 0.
Thí dụ
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| 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:
Thí 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 hệ thập lục phân cũng được hỗ trợ trong tất cả các trình duyệt.
Màu hệ 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 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 thành giá trị cao nhất (FF) và các thành phần khác được đặt thành 00.
Thí 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:
Thí 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 các 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 tên màu hoàn chỉnh 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ừ currentcolorkhóa đề cập đến giá trị thuộc tính màu của một phần tử.
Thí 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 */
}