Cách dùng Chuyển HEX sang RGBA
- Nhập hoặc dán mã HEX, ví dụ
#ff6347— hoặc chọn màu bằng ô màu. - Kéo thanh độ mờ (từ 0 đến 1) để đặt độ trong suốt. Khung nền caro sẽ hiển thị kết quả.
- Nhấn Sao chép ở định dạng bạn cần:
rgba(),rgb()hiện đại, HEX 8 số, HSLA hoặc OKLCH. - Dán giá trị
rgba()hoặc HEX 8 số để chuyển ngược lại — thanh độ mờ sẽ tự lấy giá trị alpha.
Công cụ chuyển HEX sang RGBA làm gì?
Mã HEX như #FF6347 gồm ba cặp chữ số thập lục phân: đỏ FF (255), xanh lá 63 (99) và xanh dương 47 (71). Dạng sáu số truyền thống của HEX không có chỗ cho độ trong suốt, nên khi bạn cần lớp phủ bán trong suốt, bóng đổ hay trạng thái hover, hãy chuyển sang rgba(255, 99, 71, 0.5). Giá trị thứ tư là kênh alpha, từ 0 (vô hình) đến 1 (đặc hoàn toàn).
Cách chuyển đổi hoạt động
Mỗi cặp hai chữ số được đổi từ hệ 16 sang hệ 10: FF = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99. Dạng viết tắt ba số như #f63 được mở rộng bằng cách nhân đôi mỗi chữ số (#ff6633). Giá trị alpha bạn chọn được thêm vào nguyên vẹn.
Nên dùng cú pháp nào?
| Cú pháp | Ví dụ | Ghi chú |
|---|---|---|
| rgba() truyền thống | rgba(255, 99, 71, 0.5) | Hoạt động ở mọi nơi, kể cả trình duyệt cũ và ứng dụng email. |
| rgb() hiện đại | rgb(255 99 71 / 50%) | CSS Color Level 4 — các giá trị cách nhau bằng khoảng trắng, alpha đặt sau dấu gạch chéo. Được mọi trình duyệt hiện tại hỗ trợ. |
| HEX 8 số | #ff634780 | Cặp cuối là alpha (80 hex = 128 ≈ 50%). Tiện trong các công cụ thiết kế và ô màu của Webflow. |
| Biến kênh màu | rgb(var(--color) / .5) | Chỉ lưu các kênh màu trong một thuộc tính tùy chỉnh và thay đổi độ mờ theo từng nơi dùng — cách Tailwind áp dụng. |
Opacity khác gì alpha?
Thuộc tính CSS opacity làm mờ toàn bộ phần tử kể cả chữ và các phần tử con. Nền RGBA chỉ làm trong suốt chính màu đó, nên chữ phía trên vẫn rõ nét. Với lớp phủ trên ảnh và thẻ có nền màu, RGBA (hoặc color-mix()) thường là lựa chọn phù hợp. Hãy nhớ rằng màu chữ bán trong suốt sẽ thay đổi độ tương phản tùy theo nền phía sau — hãy kiểm tra kết quả bằng Kiểm tra độ tương phản.
Cũng được tìm dưới tên: hex to rgba, mã màu hex sang rgb, độ trong suốt css, rgba là gì, hex8, chuyển rgba sang hex.
Các công cụ dùng kèm tốt với Chuyển HEX sang RGBA
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
- Chuyển đổi màu OKLCH — Khám phá không gian màu OKLCH đồng đều về mặt thị giác với thanh trượt trực tiếp, xem màu có nằm trong sRGB hay không, và sao chép các giá trị HEX, RGB, HSL dự phòng tương ứng.
- Trộn màu — Chọn hai màu và số bước để có các màu chuyển tiếp pha đều nhau, phù hợp cho gradient, viền, biểu đồ và trạng thái hover.
- Tạo bảng màu Tailwind — Dán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý độ tương phản và xuất file cho Tailwind v3, v4, CSS và SCSS.
Câu hỏi thường gặp
Làm thế nào để chuyển HEX sang RGBA thủ công?
#336699 với độ mờ 70% sẽ thành rgba(51, 102, 153, 0.7).Độ mờ 50% trong HEX là bao nhiêu?
80 trong hệ hex — vì vậy đen 50% là #00000080. 25% là 40, 75% là BF.rgba() có bị khai tử không?
rgba() là bí danh của rgb(), và cả hai đều nhận giá trị alpha. Cú pháp có dấu phẩy vẫn hoạt động trên mọi trình duyệt.Tôi có thể chuyển RGBA ngược lại thành HEX không?
rgba() vào ô nhập. Bạn sẽ nhận được HEX đặc và HEX 8 số có kèm kênh alpha.