Tiếng Việt
العربية
Deutsch
English
Español
Français
Italiano
Português
Русский
Türkçe
Chuyển đổi RGB sang mã màu Hex
Đổi các thông số màu red, green, blue thành mã hex chuẩn cho CSS.
Công cụ thiết kế hiển thị màu sắc dưới dạng rgb(46, 134, 171), nhưng tệp CSS của dự án lại dùng toàn bộ mã hex. Việc dùng xen kẽ nhiều định dạng màu trong cùng một bảng mã nguồn khiến cấu trúc CSS trở nên lộn xộn và khó đồng bộ.
Cách ghép các kênh RGB thành mã hex
Mỗi kênh trong bộ ba RGB có giá trị từ 0 đến 255. Mỗi số này tương ứng với một cặp hai ký tự trong hệ cơ số 16. Khi nối ba cặp ký tự này lại sau dấu #, bạn nhận được mã màu hoàn chỉnh. Xét ví dụ rgb(46, 134, 171): số 46 chuyển thành 2E, 134 đổi thành 86 và 171 thành AB, tạo nên mã #2E86AB.
Cách tính toán không phức tạp nhưng rất dễ nhầm lẫn nếu thao tác thủ công, đặc biệt với các giá trị nhỏ. Chẳng hạn, số 15 khi đổi sang hệ thập lục phân là 0F. Nếu bạn vô tình làm rơi chữ số 0 đứng trước, chuỗi kết quả sẽ bị thiếu ký tự và trở thành mã màu không hợp lệ.
Bảng chuyển đổi RGB sang hex cho các giá trị mẫu
| Giá trị RGB | Cặp hex | Mã màu hoàn chỉnh |
|---|---|---|
| 0 | 00 | #000000 (black) |
| 15 | 0F | a dark, easy-to-drop leading zero |
| 87 | 57 | #FF5733 (orange-red) |
| 171 | AB | #2E86AB (teal blue) |
| 255 | FF | #FFFFFF (white) |
Xử lý độ trong suốt với RGBA và hex 8 chữ số
Khi màu sắc cần độ trong suốt, chỉ số alpha được thêm vào thành định dạng rgba(46, 134, 171, 0.5) để biểu thị mức độ trong suốt 50%. Định dạng hex tương ứng sử dụng chuỗi 8 chữ số, ví dụ #2E86AB80.
Hai ký tự cuối cùng mã hóa mức độ alpha theo thang đo từ 0 đến 255 (tương đương 00 đến FF), chứ không hiển thị dạng phần trăm. Bạn nên kiểm tra kỹ công cụ thiết kế hoặc môi trường CSS của mình để đảm bảo hệ thống hỗ trợ định dạng hex 8 chữ số trước khi triển khai thay thế cho rgba().
Đánh giá độ tương phản khi dùng mã hex
- Tiêu chuẩn Hướng dẫn Tiếp cận Nội dung Web (WCAG) đặt ra tỷ lệ tương phản tối thiểu là 4.5:1 giữa màu chữ văn bản thông thường và nền.
- Đối với chữ lớn từ 18pt trở lên hoặc chữ đậm từ 14pt, tỷ lệ tương phản tối thiểu yêu cầu là 3:1.
- Màu xám nhạt như
#AAAAAAđặt trên nền trắng hoàn toàn không đạt chuẩn này, gây cản trở lớn khi đọc nội dung. - Chuyển đổi cả màu nền lẫn màu chữ sang mã hex giúp bạn dễ dàng đưa vào bộ kiểm tra độ tương phản trước khi hoàn thiện giao diện.
Các bước sử dụng công cụ RGB sang hex
- Nhập các chỉ số màu red, green, blue hoặc giá trị alpha vào các ô tương ứng trên giao diện.
- Nhấn nút chuyển đổi để gửi thông tin về máy chủ xử lý.
- Sao chép kết quả mã hex đã định dạng để dán trực tiếp vào tệp CSS của bạn.
Thắc mắc khi chuyển RGB sang mã màu hex
Làm thế nào để đổi một giá trị RGB đơn lẻ như 171 sang cặp hex?
Bạn lấy 171 chia cho 16, được thương số 10 và số dư 11. Trong hệ thập lục phân, 10 tương ứng với A và 11 là B, ghép lại thành cặp AB.
Hai ký tự cuối cùng trong mã hex 8 chữ số dùng để làm gì?
Cặp ký tự đó biểu thị giá trị alpha hay độ chắn sáng, với FF là hoàn toàn mờ đục và 00 là trong suốt hoàn toàn.
Tại sao một số giá trị hex bắt buộc phải có chữ số 0 phía trước?
Mỗi kênh màu luôn cần đủ 2 ký tự. Giá trị như 5 phải viết thành 05 thay vì chỉ một chữ số 5, tránh làm lệch độ dài của toàn bộ mã màu.
Tỷ lệ tương phản bao nhiêu là đủ để đáp ứng tiêu chuẩn tiếp cận văn bản thông thường?
Chuẩn WCAG AA quy định tỷ lệ tối thiểu là 4.5:1 cho văn bản thường và 3:1 cho văn bản chữ lớn từ 18pt hoặc chữ đậm 14pt.
Nên dùng định dạng rgba() hay hex 8 chữ số cho độ trong suốt trong CSS?
Cả hai phương án đều tương đương về mặt hiển thị. Định dạng rgba() trực quan và dễ hiểu, trong khi mã hex 8 chữ số gọn gàng hơn.
