rgba() cú pháp alpha ngắn | rgb() slash, %, HEX8 cho CSS hiện đại

(Cập nhật: 19 tháng 7, 2026 ) rgba rgb slash alpha ngắn HEX8 CSS độ trong suốt opacity
Kết luận

Cú pháp alpha ngắn năm 2026 nên ưu tiên rgb(R G B / A) (hoặc %) — gọn, đọc được, trùng MDN. rgba() kiểu cũ vẫn đúng nhưng dài hơn. Muốn nền trong suốt / chữ rõ → rgba hoặc rgb slash, không opacity trên parent. Token Figma HEX8 (#RRGGBBAA) ↔ CSS: dùng RGBA ↔ HEX để khỏi lệch làm tròn.

Developer Việt Nam hay gặp ticket kiểu: “overlay đen 40%”, “glass trắng 80%”, hoặc paste từ Figma ra #00000066. Tutorial cũ chỉ dạy rgba(0, 0, 0, 0.4) — đúng nhưng dài, và dễ nhầm với opacity. Bài này tập trung cú pháp alpha ngắn: slash, phần trăm, HEX ngắn/HEX8, khi nào dùng gì, và lỗi làm chữ bị mờ.

Ai nên đọc

  • Frontend mới gặp rgb(... / ...) lần đầu trên codebase Tailwind/shadcn
  • Freelancer nhận Figma HEX8 rồi phải viết CSS/React Native
  • Team outsourcing cần convention chung cho token màu có alpha
  • Sinh viên làm landing: modal, sticky header, badge hover

rgba() là gì — bốn số, một ý

rgba(R, G, B, A) = Red / Green / Blue (mỗi kênh 0–255) + Alpha (độ đục).

Thành phầnPhạm viÝ nghĩa
R, G, B0–255Cường độ màu (thập phân, không phải hex)
A0–1 (hoặc %)0 = trong suốt hoàn toàn, 1 / 100% = đặc hoàn toàn
/* Đỏ bán trong suốt — alpha 0.5 = 50% đục */
background-color: rgba(255, 0, 0, 0.5);

Alpha ngắn không đổi vật lý màu — chỉ viết ngắn và rõ hơn cùng một ý.

Ba cách viết alpha (so sánh nhanh)

Cú pháp màu có alpha
Kiểu Ví dụ Khi dùng
rgba() cổ điển rgba(0, 0, 0, 0.4) Codebase cũ, snippet Stack Overflow, email HTML hạn chế
rgb() + slash (ngắn) rgb(0 0 0 / 0.4) hoặc / 40% CSS mới, design token, dễ đọc trong PR
HEX8 / HEX ngắn #00000066, #000a Figma export, CSS variables kiểu hex, một số design system

1) Cú pháp slash — nên học trước

Theo CSS Color Module Level 4, rgba() là bí danh của rgb(). Dạng khuyến nghị:

/* Cũ — vẫn hợp lệ */
.overlay { background: rgba(0, 0, 0, 0.4); }

/* Ngắn & hiện đại — khoảng trắng, slash trước alpha */
.overlay { background: rgb(0 0 0 / 0.4); }

/* Alpha bằng phần trăm — nói chuyện dễ với designer */
.overlay { background: rgb(0 0 0 / 40%); }

Ưu điểm: mắt đọc “đen / 40%” nhanh hơn bốn số ngăn cách bằng dấu phẩy. Trình duyệt hiện đại (Chrome, Firefox, Safari, Edge gần đây) đều hiểu.

2) Phần trăm vs số thập phân

Nói với designerViết CSS slashTương đương cổ điển
Đen 10%rgb(0 0 0 / 10%)rgba(0,0,0,0.1)
Đen 40%rgb(0 0 0 / 40%)rgba(0,0,0,0.4)
Trắng 90%rgb(255 255 255 / 90%)rgba(255,255,255,0.9)

Rule nội bộ gợi ý: token JSON giữ 0.1–1; CSS utility ưu tiên % nếu team design nói bằng phần trăm.

3) HEX ngắn và HEX8

/* 8 chữ số: RR GG BB AA */
color: #3B82F6CC; /* blue + alpha ~0.8 */

/* 4 chữ số #RGBA — mỗi chữ nhân đôi: #RGBA → #RRGGBBAA */
border-color: #0008; /* ≈ #00000088 */

Figma hay xuất HEX8. CSS thuần và nhiều stack vẫn thích rgb(... / ...). Đừng convert tay mỗi PR — mở công cụ chuyển RGBA ↔ HEX, dán một phía, copy phía kia. Chạy local trên trình duyệt, không upload palette.

rgba vs opacity — lỗi làm chữ mờ

Đây là chỗ sinh viên và junior hay “fix một lần nhớ cả đời”:

/* SAI khi muốn chỉ nền mờ — chữ cũng mờ theo */
.card {
  opacity: 0.5;
  background: #fff;
  color: #111;
}

/* ĐÚNG — chỉ nền trong suốt */
.card {
  background: rgb(255 255 255 / 80%);
  color: #111; /* vẫn đặc */
}
opacity vs màu có alpha
opacity rgba / rgb slash
Ảnh hưởng cả cây DOM con Chỉ property màu được gắn
Chữ, icon, border đều nhạt Có thể nền nhạt + chữ đậm
Hợp fade-in/out cả khối Hợp overlay, glass, scrim modal

Case: Modal product trên nền hero ảnh Đà Nẵng — dùng opacity: 0.5 trên .modal → tiêu đề tiếng Việt khó đọc. Đổi thành background: rgb(0 0 0 / 50%) trên lớp scrim riêng, content giữ opacity: 1.

Bảng alpha ngắn hay dùng (bookmark)

Đen (scrim / shadow / hover)

Ngắn (slash)Cổ điểnViệc thường làm
rgb(0 0 0 / 8%)rgba(0,0,0,0.08)Hover hàng list light theme
rgb(0 0 0 / 10%)rgba(0,0,0,0.1)Divider mềm, card elevation nhẹ
rgb(0 0 0 / 40%)rgba(0,0,0,0.4)Modal còn thấy backdrop
rgb(0 0 0 / 50%)rgba(0,0,0,0.5)Lightbox / modal chuẩn
rgb(0 0 0 / 70%)rgba(0,0,0,0.7)Chữ trắng trên ảnh

Trắng (glass / panel)

NgắnCổ điểnViệc thường làm
rgb(255 255 255 / 80%)rgba(255,255,255,0.8)Panel kính trên ảnh
rgb(255 255 255 / 90%)rgba(255,255,255,0.9)Header sticky nhẹ
.modal-scrim {
  background: rgb(0 0 0 / 50%);
}
.glass-panel {
  background: rgb(255 255 255 / 85%);
  backdrop-filter: blur(8px); /* blur ≠ alpha; kết hợp khi cần */
}

Checklist trước khi merge CSS có alpha

  1. Parent có chữ/icon? → không gắn opacity chỉ để làm nền mờ
  2. Team dùng slash hay rgba()? → một convention / file hoặc / design token
  3. Nguồn từ Figma HEX8? → convert một lần bằng RGBA ↔ HEX, ghi cả hai dạng vào token table
  4. Kiểm tra contrast chữ trên nền bán trong suốt (WCAG) — alpha thấp trên ảnh sáng dễ fail
  5. Email HTML / IE giả tưởng? → có thể phải fallback rgba() cổ điển

Case study ngắn: landing SME

Freelancer giao landing cho cửa hàng online: designer ghi “overlay 66 hex”. Dev viết #0006 (4 chữ) rồi ngạc nhiên vì đậm hơn mock #00000066. #RGBA nhân đôi từng chữ (6→66), khác HEX8 đủ 8 ký tự. Sau khi đối chiếu trên công cụ, team khóa quy tắc: “Figma luôn export HEX8 đủ 8; CSS dùng rgb(... / %)”.

Quy trình 2 phút với Kawa

  1. Mở chuyển RGBA ↔ HEX
  2. Dán rgba(0, 0, 0, 0.4) hoặc #00000066 hoặc chỉnh slider alpha
  3. Copy dạng bạn cần cho PR (rgb(... / 40%) hoặc HEX8)
  4. Dán vào CSS variable / Tailwind arbitrary value và xem trên nền thật

Không cần đăng ký; xử lý trên máy bạn — phù hợp palette nội bộ client.

Tóm tắt

  • Alpha ngắn = rgb(R G B / A|%) (+ HEX8 khi token cần)
  • rgba() cũ vẫn đúng; codebase mới nên nghiêng slash
  • opacity ≠ rgba — đừng làm mờ chữ khi chỉ cần nền
  • Bookmark bảng 8–10% / 40–50% đen và 80–90% trắng
  • Convert Figma ↔ CSS bằng /vi/tools/rgba-hex/ để tránh lệch làm tròn

Liên kết liên quan