Giá trị màu hợp lệ trong CSS

Màu CSS

Màu trong CSS có thể được chỉ định bằng cách sau:

  • Màu十六进制
  • Màu HEX có độ trong suốt
  • Màu RGB
  • Màu sắc RGBA
  • Màu sắc HSL
  • Màu HSLA
  • Tên màu được định nghĩa sẵn và tương thích giữa các trình duyệt
  • Sử dụng currentcolor Từ khóa

Màu十六进制

Định nghĩa màu十六进制 bằng #RRGGBB, trong đó RR (màu đỏ), GG (màu xanh lá cây) và BB (màu xanh dương) là số nguyên hexa xác định thành phần (phần tử) của màu. Tất cả các giá trị phải nằm trong khoảng 00 đến FF.

Ví dụ, giá trị #0000ff hiển thị màu xanh dương, vì thành phần màu xanh được đặt ở giá trị cao nhất (ff), các thành phần khác được đặt là 00.

Mô hình

Định nghĩa màu HEX khác nhau:

#p1 {background-color: #ff0000;}   /* Màu đỏ */
#p2 {background-color: #00ff00;}   /* Màu xanh lá cây */
#p3 {background-color: #0000ff;}   /* Màu xanh dương */

Thử nghiệm trực tiếp

Màu HEX có độ trong suốt

Định nghĩa màu十六进制 bằng #RRGGBB. Để tăng độ trong suốt, hãy thêm hai số thêm giữa 00 và FF.

Mô hình

Định nghĩa màu HEX có độ trong suốt:

#p1a {background-color: #ff000080;}   /* Màu đỏ có độ trong suốt */
#p2a {background-color: #00ff0080;}   /* Màu xanh lá cây có độ trong suốt */
#p3a {background-color: #0000ff80;}   /* Màu xanh dương có độ trong suốt */

Thử nghiệm trực tiếp

Màu RGB

Giá trị màu RGB được Hàm rgb()Định nghĩa, cú pháp như sau:

rgb(red, xanh, blue)

Mỗi tham số (red, xanh, blue）Định nghĩa cường độ màu, có thể là số nguyên hoặc phần trăm từ 0 đến 255 (từ 0% đến 100%).

Ví dụ, giá trị rgb(0,0,255) hiển thị màu xanh dương, vì tham số blue được đặt ở giá trị cao nhất (255), các tham số khác được đặt là 0.

Ngoài ra, các giá trị sau cũng định nghĩa cùng một màu: rgb(0,0,255) và rgb(0%,0%,100%).

Mô hình

Định nghĩa màu RGB khác nhau:

#p1 {màu nền: rgb(255, 0, 0);}   /* đỏ */
#p2 {màu nền: rgb(0, 255, 0);}   /* xanh lá cây */
#p3 {màu nền: rgb(0, 0, 255);}   /* xanh dương */

Thử nghiệm trực tiếp

Màu sắc RGBA

Giá trị màu RGBA là mở rộng của giá trị màu RGB, nó có kênh Alpha - xác định độ mờ của đối tượng.

Màu sắc RGBA thông qua rgba() hàmĐịnh nghĩa, cú pháp như sau:

rgba(red, xanh, blue, alpha)

alpha Các tham số là các số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).

Mô hình

Định nghĩa màu RGB có độ mờ khác nhau:

#p1 {màu nền: rgba(255, 0, 0, 0.3);}   /* đỏ không mờ */
#p2 {màu nền: rgba(0, 255, 0, 0.3);}   /* xanh lá cây không mờ */
#p3 {màu nền: rgba(0, 0, 255, 0.3);}   /* xanh dương không mờ */

Thử nghiệm trực tiếp

Màu sắc HSL

HSL là tọa độ cầu hình của màu sắc (hue, độ bão hòa, độ sáng) - biểu thị biểu diễn圆柱 của màu sắc.

Sử dụng hsl() hàmĐịnh nghĩa giá trị màu HSL, cú pháp của hàm như sau:

hsl(màu sắc, sự饱 và, sáng độ)

Độ màu là góc độ trên bánh xe màu (từ 0 đến 360) - 0 (hoặc 360) là đỏ, 120 là xanh lá cây, 240 là xanh dương.

Độ bão hòa là một giá trị phần trăm; 0% biểu thị bóng xám, còn 100% là màu hoàn toàn.

Độ sáng là một phần trăm; 0% là đen, 100% là trắng.

Mô hình

Định nghĩa màu HSL khác nhau:

#p1 {màu nền: hsl(120, 100%, 50%);}   /* xanh */
#p2 {màu nền: hsl(120, 100%, 75%);}   /* xanh nhạt */
#p3 {màu nền: hsl(120, 100%, 25%);}   /* xanh đậm */
#p4 {background-color: hsl(120, 60%, 70%);}    /* Xanh lá cây nhẹ */

Thử nghiệm trực tiếp

Màu HSLA

Giá trị màu HSLA là sự mở rộng của giá trị màu HSL, nó có Alpha channel - xác định độ trong suốt của đối tượng.

Giá trị màu HSLA được tạo bởi hsla() hàmĐịnh nghĩa, cú pháp của hàm này như sau:

hsla(màu sắc, sự饱 và, sáng độ, alpha)

alpha Các tham số là các số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).

Mô hình

Định nghĩa các màu HSL với độ mờ khác nhau:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* Xanh mờ */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* Xanh nhạt mờ */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* Xanh đậm mờ */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* Xanh lá cây mờ */

Thử nghiệm trực tiếp

Tên màu được định nghĩa sẵn và tương thích giữa các trình duyệt

HTML và CSS đã định nghĩa sẵn 140 tên màu.

Ví dụ:blue、red、coral、brown và:

Mô hình

Định nghĩa các tên màu khác nhau:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Thử nghiệm trực tiếp

Danh sách tất cả các tên màu được định nghĩa sẵn đều có trong sách tham khảo tên màu của chúng ta.

Khóa từ currentcolor

currentcolor Tham chiếu giá trị thuộc tính color của phần tử khóa từ.

Mô hình

Màu viền của phần tử <div> sau đây sẽ là xanh lam, vì màu văn bản của phần tử <div> là xanh lam:

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

Thử nghiệm trực tiếp