Hướng dẫn sử dụng mã màu HEX có độ trong suốt (Alpha) trong CSS

Trước đây, khi làm việc với CSS, lập trình viên thường sử dụng mã màu HEX 6 chữ số (#RRGGBB) hoặc 3 chữ số (#RGB). Nếu muốn thay đổi độ trong suốt (Alpha/Opacity) của màu sắc, chúng ta buộc phải chuyển sang cú pháp rgba(). Tuy nhiên, với các chuẩn CSS hiện đại, bạn hoàn toàn có thể thêm độ trong suốt trực tiếp vào mã HEX bằng cách sử dụng định dạng 8 chữ số hoặc 4 chữ số.

Bài viết này Bitech sẽ hướng dẫn bạn cách áp dụng mã màu HEX kết hợp giá trị Alpha đơn giản và hiệu quả.

1. Định dạng mã HEX 8 chữ số (#RRGGBBAA)

Định dạng 8 chữ số mở rộng từ mã màu 6 chữ số chuẩn bằng cách thêm 2 ký tự đại diện cho kênh Alpha ở cuối:

• RR: Red (Màu đỏ, từ 00 đến FF)
• GG: Green (Màu xanh lá, từ 00 đến FF)
• BB: Blue (Màu xanh dương, từ 00 đến FF)
• AA: Alpha (Độ đục/trong suốt, từ 00 - hoàn toàn trong suốt, đến FF - đục hoàn toàn)

Ví dụ:

.box {
  /* Màu đỏ hoàn toàn đục (100% opacity) */
  background-color: #ff0000ff;

  /* Màu đỏ trong suốt 50% */
  background-color: #ff000080;

  /* Màu đỏ hoàn toàn trong suốt (0% opacity) */
  background-color: #ff000000;
}

2. Định dạng mã HEX 4 chữ số (#RGBA)

Tương tự như mã 3 chữ số (#RGB), bạn có thể rút gọn mã 8 chữ số thành 4 chữ số khi các cặp ký tự lặp lại giống nhau:

• R: Red (tương đương RR)
• G: Green (tương đương GG)
• B: Blue (tương đương BB)
• A: Alpha (tương đương AA)

Ví dụ:

• #F008 tương đương với #FF000088 (màu đỏ trong suốt khoảng 53%).
• #000F tương đương với #000000FF (màu đen 100% đục).

3. Bảng quy đổi độ trong suốt (Alpha) từ Phần trăm sang HEX

Giá trị Alpha chạy từ 00 (0% opacity / trong suốt hoàn toàn) đến FF (100% opacity / đục hoàn toàn). Dưới đây là bảng quy đổi các mức độ đục phổ biến:

4. Ví dụ ứng dụng thực tế trong CSS

Bạn có thể sử dụng mã HEX có giá trị Alpha cho bất kỳ thuộc tính CSS nào chấp nhận màu sắc:

.card {
  /* Tạo nền màu đen trong suốt nhẹ (10% opacity) */
  background-color: #0000001a;

  /* Viền màu xanh đục 75% */
  border: 2px solid #007bffbf;

  /* Chữ màu trắng đục 90% */
  color: #ffffffe6;
}

5. Khả năng hỗ trợ của trình duyệt

Định dạng mã màu HEX 4 và 8 chữ số đã nằm trong thông số kỹ thuật CSS Color Module Level 4 và được hỗ trợ đầy đủ trên tất cả các trình duyệt web hiện đại như Google Chrome, Mozilla Firefox, Microsoft Edge, Safari và Opera. Bạn hoàn toàn có thể yên tâm sử dụng cú pháp này trong các dự án thực tế mà không cần lo lắng về tính tương thích.

Ngày phát hành: 09/06/2026
Nguồn: www.digitalocean.com