Màu HSLA trong CSS3

Giới thiệu

HSLA = Hue (sắc độ) + Saturation (độ bão hòa) + Lightness (độ sáng) + Alpha (độ trong suốt). Mô hình màu trực quan hơn RGB, dễ điều chỉnh sắc độ/sáng/tỏ mà không lo làm đổi màu.

Cú pháp

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);

Hue (0-360deg): Vị trí trên vòng tròn màu (0=red, 120=green, 240=blue)
Saturation (0-100%): 0% = xám, 100% = màu thuần túy
Lightness (0-100%): 0% = đen, 50% = bình thường, 100% = trắng
Alpha (0-1): 0 = trong suốt, 1 = đậm đặc

Ví dụ: Cùng Hue (120° = Green), khác Lightness

<!DOCTYPE html>
<html>
<head>
  <style>
    .hsla-box {
      width: 200px; height: 100px;
      margin: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-family: system-ui, sans-serif;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #d1 { background-color: hsla(120, 100%, 25%, 0.3); }  /* Dark green, 30% opacity */
    #d2 { background-color: hsla(120, 100%, 50%, 0.3); }  /* Normal green, 30% opacity */
    #d3 { background-color: hsla(120, 100%, 75%, 0.3); }  /* Light green, 30% opacity */
  </style>
</head>
<body>
  <p>HSLA colors (cùng Hue=120°, Sat=100%, Alpha=0.3):</p>
  <div id="d1" class="hsla-box">Lightness 25% (Dark)</div>
  <div id="d2" class="hsla-box">Lightness 50% (Normal)</div>
  <div id="d3" class="hsla-box">Lightness 75% (Light)</div>
</body>
</html>

Tại sao HSLA tốt hơn RGBA?

Khía cạnh	RGBA	HSLA
Điều chỉnh độ sáng	Phải đổi 3 giá trị R,G,B cùng lúc	Chỉ đổi Lightness (1 giá trị)
Tạo biến thể màu	Khó (tính toán phức tạp)	Dễ: đổi S% hoặc L%
Tạo màu tương phản	Khó	Dễ: Hue + 180° = complementary
Hệ thống màu (Design System)	Khó quản lý	Dễ: fix Hue, biến S/L
Trực quan cho designer	Khó hình dung	Dễ hình dung (vòng tròn màu)

CSS Custom Properties + HSLA = Design System mạnh

:root {
  --brand-hue: 220;        /* Blue */
  --brand-sat: 80%;
  --brand-light: 45%;
  
  --color-primary: hsl(var(--brand-hue), var(--brand-sat), var(--brand-light));
  --color-primary-light: hsl(var(--brand-hue), var(--brand-sat), 65%);
  --color-primary-dark: hsl(var(--brand-hue), var(--brand-sat), 25%);
  --color-primary-alpha: hsla(var(--brand-hue), var(--brand-sat), var(--brand-light), 0.1);
  
  /* Màu phụ: complementary (hue + 180) */
  --color-accent: hsl(calc(var(--brand-hue) + 180), 70%, 50%);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
}
.btn-primary:hover { background: var(--color-primary-dark); }

HSL vs HSLA

/* HSL - không có alpha (opacity = 1) */
hsl(120, 100%, 50%)        /* Green thuần túy */

/* HSLA - có alpha */
hsla(120, 100%, 50%, 0.5)  /* Green 50% opacity */

/* CSS Color Level 4: HSL cũng chấp nhận alpha (space-separated) */
hsl(120 100% 50% / 0.5)    /* Cú pháp mới, tương đương hsla() */

Hỗ trợ trình duyệt

HSLA: IE9+, tất cả trình duyệt hiện đại
Cú pháp space-separated (hsl(h s% l% / a)): Chrome 65+, Firefox 52+, Safari 12.1+, Edge 79+