rgba to hex chuyển thế nào khi có alpha?

R, G, B mỗi kênh thành 2 chữ số hex (0–255 → 00–FF), rồi nối thành #RRGGBB. Có alpha thì nhân alpha (0–1) với 255, làm tròn, thêm 2 chữ số cuối → #RRGGBBAA. Ví dụ: rgba(255, 0, 0, 0.5) ≈ #FF000080.

hex to rgba với mã 8 chữ số (#RRGGBBAA) đọc alpha ra sao?

Tách AA (2 chữ số cuối) từ hex sang số 0–255, chia 255 để ra alpha 0–1. Ví dụ #3B82F6CC → rgba(59, 130, 246, 0.8). Mã 6 chữ số #RRGGBB mặc định alpha = 1 (không trong suốt).

Design system nên lưu token dạng HEX hay rgba()?

Lưu màu gốc (solid) bằng HEX 6 chữ số; lưu biến thể có alpha bằng HEX8 hoặc rgba() tùy stack. Figma hay xuất HEX8; CSS thuần và nhiều token JSON dùng rgba()/modern rgb(). Quan trọng là một nguồn sự thật và bảng chuyển đổi rõ — không copy tay từng chỗ.

Tại sao alpha 0.5 thành #80 chứ không phải #7F?

0.5 × 255 = 127.5. Làm tròn nửa lên thường ra 128 → hex 80. Công cụ khác có thể floor/ceil khác nhau → lệch 1 đơn vị giữa Figma, browser và script. Khi review token, so sánh bằng cùng một công cụ chuyển đổi.

Tailwind slash opacity (bg-blue-500/50) khác HEX8 thế nào?

Slash opacity nhân alpha lên màu đã resolve của class. HEX8 là màu tuyệt đối #RRGGBBAA. Cả hai nhìn gần giống nếu base khớp, nhưng token design system thường cần HEX/rgba tường minh cho CSS variables, email HTML, hoặc native app — không chỉ class Tailwind.

RGBA to HEX / HEX to RGBA | Token màu có

Kết luận

rgba to hex / hex to rgba với alpha không chỉ là đổi hệ cơ số — đó là chuẩn hóa token màu giữa Figma, CSS và Tailwind. Lưu màu solid bằng #RRGGBB; biến thể trong suốt bằng #RRGGBBAA hoặc rgba(). Alpha 0–1 × 255 rồi làm tròn (0.5 → 80). Dùng công cụ RGBA ↔ HEX để tránh lệch 1 đơn vị giữa designer và dev.

Khi team outsourcing hoặc freelancer Việt Nam nhận file Figma, màu hay xuất dạng #3B82F6CC, trong khi ticket Jira/Notion viết rgba(59, 130, 246, 0.8), và PR Tailwind lại dùng bg-blue-500/80. Ba cách viết cùng một ý — nhưng làm tròn alpha khác nhau thì overlay modal lệch, hover list “nhạt hơn mock”, QA báo bug màu.

Bài này tập trung token màu có alpha: công thức rgba to hex / hex to rgba, bảng giá trị hay dùng, chỗ dễ sai, và checklist đưa vào design system — không dừng ở định nghĩa CSS.

Ai cần bài này

Frontend / design system keeper đồng bộ Figma styles → CSS variables
Freelancer bàn giao landing/SME: brand color + overlay modal
Dev Nest/Next/React Native cần cùng palette cho web và app
QA so sánh mock với production khi “màu gần đúng nhưng không khớp”

Ba định dạng bạn sẽ gặp mỗi ngày

Định dạng	Ví dụ	Alpha?
rgba / modern rgb	`rgba(59, 130, 246, 0.8)` hoặc `rgb(59 130 246 / 80%)`	Có (0–1 hoặc %)
HEX 6 chữ số	`#3B82F6`	Không (mặc định opaque)
HEX 8 chữ số (HEX8)	`#3B82F6CC`	Có (2 chữ số cuối)

Tìm kiếm tiếng Anh thường là rgba to hex, hex to rgba, hex8 alpha. Trong design system, tên token nên ổn định (color.overlay.scrim, color.brand.primary/10) — giá trị có thể đổi format theo môi trường.

Chuyển ngay HEX ↔ RGBA (có alpha)

Mã HEX / HEX8

Mã RGBA

Công cụ chạy trên trình duyệt — dán mã từ Figma/CSS, không upload palette lên server lạ. Chi tiết đầy đủ tại RGBA to HEX.

Công thức rgba to hex (và ngược lại)

RGBA → HEX / HEX8

Mỗi kênh R, G, B (0–255) → hex 2 chữ số, zero-pad (15 → 0F)
Nối # + RR + GG + BB
Nếu có alpha A (0–1): round(A × 255) → hex 2 chữ số → #RRGGBBAA

rgba(255, 0, 0, 0.5)
R=FF  G=00  B=00
A = round(0.5 × 255) = round(127.5) = 128 → 80
→ #FF000080

HEX / HEX8 → RGBA

#RGB rút gọn → nhân đôi từng chữ (#F03 → #FF0033)
#RRGGBB → rgba(R, G, B, 1)
#RRGGBBAA → alpha = parseInt(AA, 16) / 255

#3B82F6CC
R=59  G=130  B=246
A = 0xCC / 255 ≈ 0.8
→ rgba(59, 130, 246, 0.8)

Bảng alpha hay gặp (bookmark)

Alpha (0–1)	≈ %	HEX AA	Dùng token
0.04	4%	`0A`	Hover rất nhẹ, divider
0.08	8%	`14`	Row hover light theme
0.1	10%	`1A`	Selected tint, shadow mềm
0.15	15%	`26`	Dropdown elevation
0.25	25%	`40`	Focus ring soft
0.4	40%	`66`	Scrim modal còn thấy nền
0.5	50%	`80`	Modal / lightbox chuẩn
0.8	80%	`CC`	Glass panel trắng/màu brand

Công thức đúng vẫn có thể lệch 1 giữa Figma “50%” và browser nếu một bên round, một bên truncate. Khi merge PR token, một công cụ chuẩn cho cả team — RGBA ↔ HEX của Kawa đủ cho việc này.

Token design system: lưu gì, ở đâu

Nơi xuất hiện màu có alpha

Nguồn	Format thường gặp	Nên làm gì
Figma / FigJam	HEX8 hoặc % opacity trên fill	Export bảng token: tên + HEX8 + rgba đã round
CSS variables	`--color-scrim: rgba(...)` hoặc `#00000080`	Chọn 1 convention cho cả repo; document trong README theme
Tailwind	`bg-black/50`, `text-primary/80`	Slash cho utility; token gốc vẫn cần HEX/rgba cho JS/email
JSON theme / Style Dictionary	Thường HEX hoặc object `{r,g,b,a}`	Build pipeline sinh cả HEX8 và rgba nếu cần đa nền tảng

Quy ước thực tế (đủ dùng cho SME / product)

Solid brand / semantic → HEX 6: --color-primary: #3B82F6
Overlay / scrim / tint → HEX8 hoặc rgba tường minh: --color-scrim: #00000080
Tint từ brand (selected row) → rgba từ cùng RGB primary + alpha cố định trong bảng (0.08 / 0.1 / 0.16)
Không nhét opacity “ảo” vào component bằng opacity: 0.5 trên cả khối có chữ — làm mờ cả text (fail đọc). Tách màu nền có alpha.

:root {
  --color-primary: #3b82f6;
  --color-primary-soft: rgba(59, 130, 246, 0.1); /* ≈ #3B82F61A */
  --color-scrim: #00000080; /* rgba(0,0,0,0.5) */
}

.row-selected {
  background: var(--color-primary-soft);
}

.modal-backdrop {
  background: var(--color-scrim);
}

Tailwind v3/v4: bg-primary/10 tiện — nhưng khi viết email HTML, canvas, hoặc React Native, bạn vẫn cần số tuyệt đối. Đó là lúc hex to rgba / rgba to hex thành bước bắt buộc trong pipeline, không phải “tiện thì dùng”.

Case study: lệch màu giữa Figma và production

Designer ghi Black 50%. Dev viết rgba(0,0,0,0.5). QA đo trên screenshot thấy gần khớp. Sau đó ai đó “optimize” thành #0000007F (127) thay vì #00000080 (128) — lệch nhỏ nhưng trên banner sáng dễ thấy. Fix: khóa token --color-scrim: #00000080 và cấm sửa tay trong component.

Case 2 — Brand tint selected row

Primary #2563EB. Figma dùng fill 10%. Dev copy #2563EB1A từ plugin A; plugin B xuất rgba(37, 99, 235, 0.1) — cùng ý. Nhưng một PR khác dùng opacity-10 trên cả row có icon + text → text cũng mờ. Fix: chỉ background dùng token soft; text giữ solid contrast AA.

Case 3 — Handoff freelance → client WordPress

Client dán HEX8 vào Customizer không hỗ trợ 8 chữ số (theme cũ). Cần hex to rgba trước khi paste. Checklist bàn giao: “mọi màu có alpha kèm bản rgba()”.

Lỗi thường gặp (checklist trước merge)

Quên alpha khi round-trip: #3B82F6 ↔ rgba(59,130,246,1) — mất CC nếu từng là HEX8
Nhầm thứ tự: một số tool cũ ghi #AARRGGBB (Android) vs CSS #RRGGBBAA — đọc nhầm sẽ đảo màu
Short hex + alpha: #F0380 không hợp lệ; short chỉ #RGB / #RGBA (4 chữ) trong CSS hiện đại — nên normalize về 6/8
Tailwind /50 trên màu đã có alpha sẵn trong CSS variable → alpha nhân đôi, UI quá trong
So contrast WCAG trên màu có alpha mà lấy HEX solid làm nền — phải composite lên nền thật rồi mới đo

Quy trình đề xuất cho team VN (agency / product)

Trong Figma: đặt tên token (scrim/50, primary/soft) — không chỉ “Rectangle blue”
Export hoặc chép HEX8 → dán công cụ chuyển → lấy rgba chuẩn
Ghi bảng (Notion/Spreadsheet): token | HEX8 | rgba | usage
Commit CSS variables / theme JSON cùng PR với component đầu tiên dùng token
Visual QA: modal, hover list, focus ring trên nền sáng và nền tối

Không cần wiki dài — một bảng token + một tool chung đã cắt phần lớn “màu gần đúng”.

Câu hỏi nhanh trước khi chọn format

Câu hỏi	Nếu “có” → ưu tiên
Theme hỗ trợ HEX8?	HEX8 gọn trong CSS
Cần đọc alpha dễ trong code review?	`rgba()` hoặc `rgb(... / %)`
Chủ yếu Tailwind utility?	Slash opacity + token solid
Đa nền tảng (web + app + email)?	Style Dictionary / JSON sinh nhiều format

Liên kết liên quan

Công cụ chuyển RGBA ↔ HEX — hỗ trợ alpha / HEX8, chạy local trên trình duyệt
Màu Tailwind — map HEX sang class gần nhất
Kiểm tra độ tương phản WCAG — đo sau khi đã composite màu có alpha
Danh sách công cụ

Công cụ