Các thuộc tính màu bổ sung trong CSS3

Giới thiệu

CSS3 bổ sung 3 mô hình màu mới so với CSS2 (chỉ có tên màu, hex, rgb): RGBA, HSL, HSLA. Cho phép kiểm soát độ trong suốt và điều chỉnh màu trực quan hơn.

1. RGBA — RGB + Alpha

rgba(red, green, blue, alpha)
/* red, green, blue: 0-255 hoặc 0%-100% */
/* alpha: 0-1 hoặc 0%-100% */

rgba(255, 0, 0, 0.5)     /* Red 50% opacity */
rgba(100%, 0%, 0%, 0.5)  /* Tương đương */

2. HSL — Hue, Saturation, Lightness

hsl(hue, saturation%, lightness%)
/* hue: 0-360 (deg) */
/* saturation: 0%-100% */
/* lightness: 0%-100% */

hsl(120, 100%, 50%)   /* Green thuần túy */
hsl(0, 100%, 50%)     /* Red thuần túy */
hsl(240, 100%, 50%)   /* Blue thuần túy */

3. HSLA — HSL + Alpha

hsla(hue, saturation%, lightness%, alpha)
/* alpha: 0-1 */

hsla(120, 100%, 50%, 0.3)  /* Green 30% opacity */

Ví dụ: HSL tạo biến thể màu xanh lá

<!DOCTYPE html>
<html>
<head>
  <style>
    .hsl-box {
      width: 150px; height: 100px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
      color: white;
      font-weight: bold;
      font-family: system-ui, sans-serif;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #g1 { background-color: hsl(120, 100%, 25%); }  /* Dark green */
    #g2 { background-color: hsl(120, 100%, 50%); }  /* Normal green */
    #g3 { background-color: hsl(120, 100%, 75%); }  /* Light green */
  </style>
</head>
<body>
  <p>HSL colors (Hue=120°, Sat=100%):</p>
  <div id="g1" class="hsl-box">Lightness 25%</div>
  <div id="g2" class="hsl-box">Lightness 50%</div>
  <div id="g3" class="hsl-box">Lightness 75%</div>
</body>
</html>

So sánh 3 mô hình màu CSS3

Mô hình	Tham số	Ưu điểm	Nhược điểm	Best for
RGB/RGBA	R,G,B,(A)	Phổ biến, trực quan cho dev, screen color	Khó điều chỉnh sáng/bão hòa	Màu chính xác từ design tool, image
HSL	H,S,L	Trực quan, dễ tạo biến thể (fix H, đổi S/L)	Khó match màu từ image	Design system, theming, color palette
HSLA	H,S,L,A	HSL + transparency	Cũ: comma syntax	Overlay, glassmorphism, design system

Tạo Color Palette hệ thống với HSL + CSS Variables

:root {
  /* Primary: Blue */
  --primary-h: 220; --primary-s: 80%;
  --primary-l: 45%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 65%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 25%);
  --primary-alpha: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
  
  /* Success: Green (hue + 120) */
  --success: hsl(calc(var(--primary-h) + 120), 70%, 40%);
  
  /* Warning: Orange (hue - 60) */
  --warning: hsl(calc(var(--primary-h) - 60), 90%, 50%);
  
  /* Danger: Red (hue + 180) */
  --danger: hsl(calc(var(--primary-h) + 180), 75%, 50%);
}

/* Dark mode tự động */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-l: 55%;
    --primary-light: hsl(var(--primary-h), var(--primary-s), 75%);
    --primary-dark: hsl(var(--primary-h), var(--primary-s), 35%);
  }
}

Hỗ trợ trình duyệt

RGB/RGBA: Tất cả (IE9+ cho RGBA)
HSL/HSLA: IE9+, tất cả hiện đại
Space-separated syntax (hsl(h s% l% / a)): Chrome 65+, Firefox 52+, Safari 12.1+, Edge 79+