Màu sắc trong CSS

9.1 Cách xác định màu sắc trong CSS

Màu sắc đóng một vai trò quan trọng trong thiết kế và phát triển web. Trong CSS, có một vài cách xác định màu sắc, cho phép lập trình viên tạo ra giao diện đẹp mắt và trực quan. Dưới đây, mình sẽ trình bày các cách khác nhau để xác định màu sắc trong CSS, bao gồm các mô hình màu, sự trong suốt, gradients và các hàm chuẩn để làm việc với màu.

Các cách xác định màu sắc trong CSS:

• Màu sắc được đặt tên
• Màu sắc Hexadecimal
• RGB và RGBA
• HSL và HSLA
• Gradients
• Sự trong suốt

9.2 Mô hình màu RGB

Mô hình RGB (Red Green Blue) xác định màu sắc thông qua sự pha trộn của các màu đỏ, xanh lá và xanh dương. Mỗi màu được gán một giá trị từ 0 đến 255.

Cú pháp:

    
      color: rgb(255, 0, 0); /* Đỏ */
      color: rgb(0, 255, 0); /* Xanh lá */
      color: rgb(0, 0, 255); /* Xanh dương */
    
  

Ví dụ:

    
      body {
        background-color: rgb(240, 248, 255); /* Màu nền: aliceblue */
      }
    
  

9.3 Mô hình màu HEX

HEX (Hexadecimal) biểu diễn màu bằng sử dụng các giá trị thập lục phân. Mỗi giá trị (RR, GG, BB) có thể thay đổi từ 00 đến FF.

Cú pháp:

    
      color: #ff0000; /* Đỏ */
      color: #00ff00; /* Xanh lá */
      color: #0000ff; /* Xanh dương */
    
  

Ví dụ:

    
      h1 {
        color: #4CAF50; /* Xanh lá */
      }
    
  

9.4 Mô hình màu HSL

HSL (Hue, Saturation, Lightness) biểu diễn màu dưới dạng sắc độ, độ bão hòa và độ sáng. Sắc độ (Hue) được đo bằng độ (0-360), độ bão hòa (Saturation) và độ sáng (Lightness) - bằng phần trăm (0%-100%).

Cú pháp:

    
      color: hsl(0, 100%, 50%); /* Đỏ */
      color: hsl(120, 100%, 50%); /* Xanh lá */
      color: hsl(240, 100%, 50%); /* Xanh dương */
    
  

Ví dụ:

    
      p {
        color: hsl(210, 100%, 50%); /* Xanh dương */
      }
    
  

9.5 Sự trong suốt: RGBA và HSLA

Để điều chỉnh độ trong suốt của màu sắc, người ta sử dụng các mô hình RGBA và HSLA. Trong các mô hình này, một tham số thứ tư được thêm vào — kênh alpha (Alpha), xác định mức độ trong suốt từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).

1. RGBA (Red, Green, Blue, Alpha):

Cú pháp:

    
      color: rgba(255, 0, 0, 0.5); /* Đỏ bán trong suốt */
      color: rgba(0, 255, 0, 0.3); /* Xanh lá bán trong suốt */
      color: rgba(0, 0, 255, 0.7); /* Xanh dương bán trong suốt */
    
  

Ví dụ:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Màu cà chua bán trong suốt */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Cú pháp:

    
      color: hsla(0, 100%, 50%, 0.5); /* Đỏ bán trong suốt */
      color: hsla(120, 100%, 50%, 0.3); /* Xanh lá bán trong suốt */
      color: hsla(240, 100%, 50%, 0.7); /* Xanh dương bán trong suốt */
    
  

Ví dụ:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Xanh dương bán trong suốt */
      }