Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh
Màu sắc trong CSS

Màu sắc trong CSS là một thành phần cực kỳ quan trọng cho một trang Web vì nó chính là linh hồn, tạo ra sự sinh động và cuốn hút người đọc. Các bạn có thể thiết lập màu cho màu nền hay màu cho đường viền, màu cho chữ,  màu cho đường khung của bảng…. Vậy để sử dụng màu trong CSS như thế nào? Làm sao để lấy được mã màu của một hình ảnh nào đó. Mời các bạn xem tiếp nội dung sau đây.

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

  • Màu thập lục phân.
  • Màu thập lục phân với độ trong suốt.
  • Màu sắc RGB.
  • Màu RGBA.
  • Màu HSL.
  • Màu HSLA.
  • Tên màu được xác định trước.
  • Với từ khóa currentcolor.

Màu thập lục phân

Màu thập lục phân được chỉ định bằng: #RRGGBB, trong đó các số nguyên thập lục phân RR ~ Đỏ, GG ~ Xanh lá và BB ~ Xanh dương, chỉ định các thành phần của màu. Tất cả các giá trị phải từ 00 đến FF.

Ví dụ: Giá trị #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.

Ví dụ:

Xác định các màu HEX khác nhau:

#a1 {background-color: #ff0000;}   /* Màu đỏ */
#a2 {background-color: #00ff00;}   /* Màu xanh lục*/
#a3 {background-color: #0000ff;}   /* Màu xanh lam*/
Màu đỏ #ff0000
Màu xanh lục #00ff00
Màu xanh lam  #0000ff

Màu thập lục phân với độ trong suốt

Màu thập lục phân được chỉ định bằng: #RRGGBB. Để thêm độ trong suốt, hãy thêm hai chữ số bổ sung giữa 00FF.

Ví dụ:

Xác định các màu HEX khác nhau với độ trong suốt:

#p1 {background-color: #ff000080;}   /* Màu đỏ trong suốt */
#p2 {background-color: #00ff0080;}   /* Màu xanh lục trong suốt */
#p3 {background-color: #0000ff80;}   /* Màu xanh lam trong suốt */
Màu đỏ trong suốt #ff000080
Màu lục trong suốt #00ff0080
Màu lam trong suốt #0000ff80

Màu sắc RGB

Giá trị màu RGB được chỉ định bằng hàm rgb(), có cú pháp sau: rgb(red, green, blue). Mỗi tham số đỏ, lục và lam xác định cường độ của màu và có thể là một số nguyên từ 0 đến 255 hoặc một giá trị phần trăm từ 0% đến 100%.

Ví dụ: Giá trị 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 là 255 và các tham số khác được đặt thành 0. Ngoài ra, các giá trị sau xác định màu như nhau: rgb(0,0,255)rgb(0%,0%,100%).

Ví dụ:

Xác định các màu RGB khác nhau:

#p1 {background-color: rgb(255,0,0);}   /* Màu đỏ */
#p2 {background-color: rgb(0,255,0);}   /* Màu xanh lục*/
#p3 {background-color: rgb(0,0,255);}   /* Màu xanh lam*/
Màu đỏ rgb(255,0,0)
Màu xanh lục rgb(0,255,0)
Màu xanh lam  rgb(0,0,255)

 

Màu RGBA

Giá trị màu RGBA là phần mở rộng của giá trị màu RGB với kênh Alpha chỉ định độ mờ của đối tượng. Màu RGBA được chỉ định bằng hàm rgba(), có cú pháp sau: rgba(red,green, blue,alpha). Tham số alpha là một số nằm trong khoảng từ 0,0 ~ Hoàn toàn trong suốt đến 1,0 ~ Hoàn toàn không trong suốt.

Ví dụ:

Xác định các màu RGB khác nhau với độ mờ:

#p1 {background-color: rgba(255,0,0,0.3);}   /* Màu đỏ với độ mờ */
#p2 {background-color: rgba(0,255,0,0.3);}   /*  Màu xanh lục với độ mờ */
#p3 {background-color: rgba(0,0,255,0.3);}   /*  Màu xanh lam với độ mờ */
Màu đỏ với độ mờ 30% rgba(255,0,0,0.3)
Màu lục với độ mờ 30% rgba(0,255,0,0.3)
Màu lam với độ mờ 30% rgba(0,0,255,0.3)

 

Màu HSL

HSL là viết tắt của màu sắc, độ bão hòa và độ đậm nhạt và đại diện cho một đại diện tọa độ hình trụ của màu sắc. Giá trị màu HSL được chỉ định bằng hàm hsl(), có cú pháp sau: hsl(hue,saturation,lightness).

  • Hue là một độ trên bánh xe màu từ 0 đến 360: 0 hoặc 360 là màu đỏ, 120 là xanh lục, 240 là xanh lam.
  • Độ bão hòa là một giá trị phần trăm: 0% có nghĩa là màu xám và 100% là màu đầy đủ.
  • Độ sáng cũng là một tỷ lệ phần trăm: 0% là màu đen, 100% là màu trắng.

Ví dụ:
Xác định các màu HSL khác nhau:

#p1 {background-color: hsl(120,100%,50%);}   /* Màu xanh lục*/
#p2 {background-color: hsl(120,100%,75%);}   /* Màu xanh lợt */
#p3 {background-color: hsl(120,100%,25%);}   /* Màu xanh lục đậm */
#p4 {background-color: hsl(120,60%,70%);}    /* Màu xanh lục nhạt */
Màu xanh lục hsl(120,100%,50%)
Màu xanh lợt hsl(120,100%,75%)
Màu xanh lục đậm hsl(120,100%,25%)
Màu xanh lợt nhạt hsl(120,60%,70%)

 

Màu HSLA

Giá trị màu HSLA là phần mở rộng của giá trị màu HSL với kênh alpha chỉ định độ mờ của đối tượng. Giá trị màu HSLA được chỉ định bằng hàm hsla(), có cú pháp sau:hsla(hue, saturation, lightness, alpha). Tham số alpha là một số nằm trong khoảng từ 0,0 hoàn toàn trong suốt đến 1,0 hoàn toàn không trong suốt.

Ví dụ:
Xác định các màu HSL khác nhau với độ mờ:

#p1 {background-color: hsla(120,100%,50%,0.3);}   /* Xanh lục với độ mờ */
#p2 {background-color: hsla(120,100%,75%,0.3);}   /* Xanh lợt với độ mờ */
#p3 {background-color: hsla(120,100%,25%,0.3);}   /* Xanh lục đậm với độ mờ */
#p4 {background-color: hsla(120,60%,70%,0.3);}    /* Xanh lục nhạt với độ mờ */
Màu xanh lục với độ mờ 30% hsl(120,100%,50%,0.3)
Màu xanh lợt với độ mờ 30% hsl(120,100%,75%,0.3)
Màu xanh lục đậm với độ mờ 30% hsl(120,100%,25%,0.3)
Màu xanh lợt nhạt với độ mờ 30% hsl(120,60%,70%,0.3)

Tên màu được xác định trước 

140 tên màu được xác định trước trong đặc tả màu HTML và CSS. Ví dụ: blueredcoralbrown

Ví dụ:
Xác định 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;}
Xanh lam blue
Đỏ red
Màu san hô coral
Nâu brown

 

Bạn có thể tìm thấy danh sách tất cả các tên được xác định trước trong bài viết 140 tên màu có sẵn được hỗ trợ bởi tất cả các trình duyệt hiện đại.

 

Từ khóa màu hiện tại

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; /* Màu của chữ là xanh lam */
  border: 10px solid currentcolor; /* Viền cũng màu xanh lam*/
}

Ví dụ:

<div style="color:blue; background-repeat: repeat; border: 1px dashed currentcolor; padding-left: 20px;">
Xanh là xanh lét.<br>
Xanh là xanh lét.<br>
Xanh là xanh lét.<br>
Xanh là xanh lét.<br>
Xanh là xanh lét.<br>
</div>

Kết quả:

Xanh là xanh lét.
Xanh là xanh lét.
Xanh là xanh lét.
Xanh là xanh lét.
Xanh là xanh lét.

 

Sử dụng công cụ bên dưới để  tìm các màu yêu thích của bạn!


Chọn màu:


Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!


avatar
  Nhận thông tin qua email  
Nhận thông báo cho