Màu trong CSS: tên màu, hex, RGB, RGBA, HSL và độ trong suốt

Các cách viết màu trong CSS

Mọi thuộc tính nhận màu (color, background-color, border-color, bóng đổ, fill của SVG) đều chấp nhận cùng các định dạng. Bốn ô màu đầu tiên là cùng một màu xanh viết theo bốn cách, còn ô thứ năm là một tên màu gần giống:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Màu hex

Màu hex là # theo sau là đỏ, xanh lá và xanh dương, mỗi màu hai chữ số thập lục phân, từ 00 đến ff. Có ba dạng rút gọn hoặc mở rộng:

• #rgb: mỗi chữ số được nhân đôi, nên #25e là #2255ee.
• #rrggbbaa: cặp cuối là alpha, nên #2563eb80 có độ đục khoảng 50%.
• #rgba: dạng rút gọn có alpha.

Hex không phân biệt chữ hoa chữ thường: #2563EB và #2563eb là cùng một màu.

rgb() và rgba()

rgb() nhận đỏ, xanh lá và xanh dương từ 0 đến 255 (hoặc từ 0% đến 100%). Giá trị thứ tư không bắt buộc, đặt sau dấu gạch chéo, là alpha, từ 0 (vô hình) đến 1 hoặc từ 0% đến 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() và rgb() giờ là cùng một hàm: cả hai đều nhận cả hai cú pháp và một alpha không bắt buộc. Code cũ dùng rgba() khi cần độ trong suốt, và nó vẫn chạy bình thường.

hsl(): định dạng dễ điều chỉnh nhất

hsl() mô tả màu theo cách con người nghĩ về màu: một sắc độ trên bánh xe màu, một độ bão hòa và một độ sáng. Giữ nguyên sắc độ và đổi độ sáng là có cả một dải màu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

Hàng thứ nhất giữ sắc độ 221 và độ bão hòa 83%, chỉ thay đổi độ sáng. Hàng thứ hai đi vòng quanh bánh xe màu với cùng độ bão hòa và độ sáng.

Độ trong suốt: alpha và opacity

Kênh alpha làm một màu trở nên trong suốt. opacity làm cả phần tử trong suốt, bao gồm cả chữ và các phần tử con:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent là từ khóa cho màu đen hoàn toàn trong suốt, rgb(0 0 0 / 0). Đây là nền mặc định của hầu hết phần tử.

currentColor

currentColor bằng đúng color của chính phần tử. Một nút có viền, biểu tượng và chữ đều dùng nó sẽ đổi tất cả chỉ với một khai báo:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

Viền vốn đã mặc định là currentColor, đó là lý do border: 2px solid không ghi màu vẫn khớp với màu chữ.

Thử bất kỳ màu nào

Nhập một màu ở bất kỳ định dạng nào. Trình duyệt phân tích nó và hiển thị giá trị đã tính; màu không hợp lệ sẽ để ô màu giữ nguyên.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Thử tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) và color-mix(in srgb, #2563eb, white 50%).

Các hàm màu mới hơn

• oklch(L C H): độ sáng, độ đậm màu (chroma) và sắc độ trong một không gian màu được thiết kế để độ sáng bằng nhau thì trông sáng như nhau. Bảng màu dựng bằng nó ít có những bước giữa bị đục hơn so với bảng màu HSL.
• color-mix(in srgb, A, B 30%): trộn hai màu. Trộn với white hoặc black sẽ tạo các sắc độ nhạt và đậm từ một màu thương hiệu duy nhất, và nó chạy được với biến CSS: color-mix(in srgb, var(--brand), white 80%).

Cả hai đều chạy trên Chrome, Firefox và Safari hiện tại. Hãy giữ màu thương hiệu trong biến CSS để các định dạng bạn chọn nằm ở một chỗ.

Lỗi thường gặp

• Thiếu # trong màu hex. color: 2563eb không hợp lệ và bị bỏ qua.
• Dùng opacity để làm nền trong suốt. Nó làm mờ cả chữ. Hãy dùng một màu có alpha.
• Trộn lẫn dấu phân cách trong cú pháp mới. rgb(37 99, 235) không hợp lệ: dùng toàn dấu cách hoặc toàn dấu phẩy.
• Cho rằng một tên màu khớp với thiết kế. royalblue không phải #2563eb. Hãy sao chép đúng mã màu.
• Đánh giá độ tương phản bằng mắt. Kiểm tra màu chữ so với nền bằng một công cụ kiểm tra độ tương phản; 4.5:1 là mức tối thiểu cho chữ nội dung.