Câu hỏi thường gặp Bộ chuyển đổi màu (HEX, RGB, HSL)
Làm thế nào để chuyển đổi HEX sang RGB?
Để chuyển đổi mã màu hex sang RGB, hãy tách chuỗi hex sáu chữ số #RRGGBB thành ba cặp, sau đó chuyển từng cặp từ hệ thập lục phân (cơ số 16) sang hệ thập phân (cơ số 10).
Ví dụ: #FF5733
FF= 255 (Đỏ)57= 87 (Xanh lục)33= 51 (Xanh lam)- Kết quả:
rgb(255, 87, 51)
Đối với hex rút gọn (#F53), hãy khai triển từng chữ số thành một cặp trước: #F53 trở thành #FF5533. Các chữ số được nhân đôi: F khai triển thành FF, 5 khai triển thành 55, 3 khai triển thành 33.
Hex tám chữ số (#RRGGBBAA) hoạt động tương tự nhưng có thêm một cặp cho kênh alpha. #FF573380 thêm 80 (128, hoặc ~50% độ mờ đục) cho kênh alpha.
Để chuyển đổi tức thì, hãy sử dụng công cụ chuyển đổi màu. Công cụ xử lý mọi định dạng, bao gồm hex ngắn và dài, có và không có alpha.
Sự khác biệt giữa RGB và RGBA là gì?
RGB định nghĩa màu sắc bằng các kênh đỏ, xanh lục và xanh lam. RGBA là RGB với thêm một kênh Alpha kiểm soát độ mờ đục. Giá trị alpha nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn mờ đục).
rgb(255, 0, 0) /* Đỏ hoàn toàn mờ đục */
rgba(255, 0, 0, 0.5) /* Đỏ ở độ mờ đục 50% */
Trong CSS hiện đại (CSS Color Level 4), bí danh rgba() không còn cần thiết nữa. Hàm rgb() giờ đây chấp nhận một kênh alpha tùy chọn:
rgb(255 0 0 / 0.5) /* Cú pháp hiện đại, đỏ ở độ mờ đục 50% */
Tất cả trình duyệt hiện đại đều hỗ trợ cú pháp này. Hàm rgba() kế thừa hoạt động ở mọi nơi và sẽ không bị loại bỏ, nhưng sử dụng rgb() với cú pháp dấu gạch chéo là cách được khuyến nghị cho mã mới.
Làm thế nào để chuyển đổi RGB sang HSL?
Chuyển đổi RGB sang HSL gồm ba bước:
- Chuẩn hóa các giá trị RGB về khoảng 0-1 (chia cho 255)
- Tìm min và max của ba giá trị đã chuẩn hóa — trung bình của min và max là độ sáng (L)
- Tính hue và saturation dựa trên kênh nào là max và hiệu số giữa max và min
Công thức thay đổi tùy theo kênh màu nào chiếm ưu thế:
- Nếu đỏ là max: hue = (green - blue) / (max - min)
- Nếu xanh lục là max: hue = 2 + (blue - red) / (max - min)
- Nếu xanh lam là max: hue = 4 + (red - green) / (max - min)
- Saturation phụ thuộc vào độ sáng: nếu L > 0.5, saturation = (max - min) / (2 - max - min), ngược lại saturation = (max - min) / (max + min)
Phép toán này không hề đơn giản và rất dễ tính sai, vì vậy sử dụng một công cụ chuyển đổi màu được khuyến nghị để có kết quả tức thì.
Tại sao màu sắc của tôi trông khác nhau trên các màn hình khác nhau?
Màu sắc hiển thị khác nhau giữa các màn hình vì nhiều lý do:
Hiệu chuẩn màn hình — Hầu hết màn hình tiêu dùng không được hiệu chuẩn màu. Các cài đặt mặc định từ nhà máy rất khác nhau về độ sáng, độ tương phản và nhiệt độ màu.
Khác biệt về dải màu (color gamut) — Các màn hình khác nhau hỗ trợ các dải màu khác nhau. sRGB là tiêu chuẩn web, nhưng nhiều điện thoại và laptop hiện đại hỗ trợ DCI-P3 (rộng hơn 25%). Một màu nằm ngoài gamut sRGB trông chính xác trên màn hình gamut rộng nhưng bị cắt bớt hoặc lệch màu trên màn hình tiêu chuẩn.
Công nghệ hiển thị — Màn hình OLED tạo ra màu đen sâu hơn và màu sắc bão hòa hơn màn hình LCD. Tấm nền IPS có độ chính xác màu tốt hơn tấm nền TN.
Góc nhìn — Màu sắc bị dịch chuyển khi nhìn ở một góc, đặc biệt trên các màn hình giá rẻ.
Độ sáng và ánh sáng xung quanh — Một màn hình ở độ sáng 50% trong phòng tối trông khác với cùng màn hình đó ở độ sáng 100% dưới ánh nắng trực tiếp.
Để giảm thiểu khác biệt: Làm việc trong không gian màu sRGB, hiệu chuẩn màn hình bằng thiết bị hiệu chuẩn phần cứng và kiểm tra thiết kế của bạn trên nhiều thiết bị trước khi phát hành.
Mô hình màu HSL tốt cho việc gì?
HSL (Hue, Saturation, Lightness) lý tưởng cho thao tác màu lập trình. Ưu điểm chính của nó là một kênh mang thông tin "màu sắc" (hue), trong khi hai kênh còn lại kiểm soát diện mạo độc lập với giá trị hue.
Những gì HSL làm dễ dàng:
- Bảng màu (color palettes) — Giữ nguyên hue, thay đổi lightness và saturation để tạo một thang màu hoàn chỉnh
- Trạng thái hover và active — Thay đổi lightness theo một tỷ lệ phần trăm cố định:
hsl(220, 80%, 50%)->hsl(220, 80%, 60%) - Chế độ tối — Giảm lightness trên tất cả màu sắc: trừ 30% khỏi lightness của mỗi màu
- Chủ đề (themes) — Hoán đổi giá trị hue để tạo ra các bảng màu hoàn toàn mới từ cùng một cấu trúc saturation/lightness
- Trạng thái disabled — Giảm saturation để làm mất bão hòa các phần tử:
hsl(220, 80%, 50%)->hsl(220, 30%, 70%)
Những gì HSL không tốt cho:
HSL không đồng nhất về mặt tri giác (perceptually uniform). Hai màu có cùng giá trị lightness (ví dụ: hsl(60, 100%, 50%) — màu vàng sáng và hsl(240, 100%, 50%) — màu xanh lam thuần) có độ sáng cảm nhận rất khác nhau. Để thao tác màu đồng nhất về mặt tri giác, hãy sử dụng OKLCH thay thế.
Dấu # trong mã màu hex có nghĩa là gì?
Tiền tố # (dấu thăng hoặc dấu pound) báo cho trình phân tích CSS biết rằng các ký tự tiếp theo đại diện cho một giá trị màu hex. Đây là ký hiệu chuẩn trong CSS và HTML cho mã màu hex.
Định dạng đầy đủ là #RRGGBB hoặc #RRGGBBAA:
| Thành phần | Ý nghĩa | Ví dụ (#FF5733) |
|-----------|---------|---------------------|
| # | Tiền tố hex | Chỉ báo bắt buộc |
| RR | Kênh đỏ | FF (255) |
| GG | Kênh xanh lục | 57 (87) |
| BB | Kênh xanh lam | 33 (51) |
Trong HTML, # cũng được dùng cho các liên kết neo (<a href="#section">), nhưng trong ngữ cảnh CSS hoặc thuộc tính style, nó luôn chỉ định một màu hex. HTML cũng hỗ trợ các "màu đặt tên" kế thừa (140 tên được định nghĩa sẵn như red, blue, rebeccapurple) không yêu cầu dấu #.
Dải màu (color gamut) là gì và tại sao nó quan trọng?
Color gamut là phạm vi màu sắc mà một thiết bị có thể hiển thị hoặc một không gian màu có thể biểu diễn. Hãy coi nó như "vốn từ vựng" màu sắc có sẵn cho một màn hình hoặc định dạng tệp.
Các color gamut phổ biến, từ nhỏ nhất đến rộng nhất:
| Không gian màu | Kích thước tương đối | Nơi sử dụng | |-------------|--------------|------------| | sRGB | Đường cơ sở | Tiêu chuẩn web, hầu hết màn hình, mọi trình duyệt | | Adobe RGB | Rộng hơn ~50% | Nhiếp ảnh chuyên nghiệp, in ấn | | DCI-P3 | Rộng hơn ~25% | Điện thoại hiện đại, Mac, nhiều laptop | | Rec. 2020 | Rộng hơn ~75% | Truyền hình HDR, màn hình cao cấp |
Tại sao nó quan trọng: Một màu nằm ngoài gamut của màn hình không thể hiển thị chính xác. Thiết bị sẽ cắt màu về giá trị trong gamut gần nhất hoặc xấp xỉ nó. Đây là lý do tại sao một màu đỏ đậm rực rỡ trong tệp thiết kế có thể trông xỉn hoặc bị đục trên màn hình laptop tiêu chuẩn.
Đối với thiết kế web: Luôn thiết kế trong sRGB hoặc kiểm tra rằng màu sắc của bạn an toàn với sRGB. OKLCH và không gian màu display-p3 cho phép bạn nhắm đến gamut rộng hơn, nhưng bạn nên cung cấp một phương án dự phòng sRGB cho các màn hình tiêu chuẩn.
Sự khác biệt giữa hex và hex có alpha là gì?
Hex tiêu chuẩn (#FF5733) sử dụng sáu chữ số và không có kênh alpha — màu luôn hoàn toàn mờ đục. Hex có alpha (#FF573380) sử dụng tám chữ số, thêm hai chữ số hex ở cuối cho kênh alpha (độ mờ đục).
Giá trị alpha trong hex:
| Cặp Hex | Thập phân | Độ mờ đục |
|----------|---------|---------|
| 00 | 0 | Hoàn toàn trong suốt |
| 80 | 128 | ~50% độ mờ đục |
| FF | 255 | Hoàn toàn mờ đục |
Ví dụ:
#FF5733 — Đỏ cam đặc, không trong suốt
#FF5733FF — Cùng màu, hoàn toàn mờ đục (FF thừa)
#FF573380 — Cùng màu, trong suốt 50%
#FF573300 — Cùng màu, hoàn toàn vô hình
Ngoài ra còn có hex rút gọn bốn chữ số có alpha: #F538 khai triển thành #FF553388 (độ mờ đục 50%).
Hỗ trợ trình duyệt: Hex tám chữ số được hỗ trợ trong tất cả trình duyệt hiện đại. Để hỗ trợ trình duyệt cũ (Internet Explorer), hãy sử dụng rgba() thay thế.
Làm thế nào để chọn màu sắc dễ tiếp cận (accessible) cho trang web của tôi?
Hãy làm theo quy trình từng bước sau để xây dựng một hệ thống màu dễ tiếp cận:
1. Bắt đầu với màu thương hiệu chính. Chọn một hue đại diện cho thương hiệu của bạn, sau đó sử dụng HSL hoặc OKLCH để tạo một thang đầy đủ từ rất sáng (nền) đến rất tối (chữ).
2. Đặt chữ của bạn gần màu đen. Chữ nội dung trên nền trắng nên là #1A1A1A đến #333333. Không bao giờ dùng màu đen thuần (#000000) trên nền trắng thuần — điều này gây mỏi mắt cho một số người đọc. Xám đậm trên nền trắng mang lại khả năng đọc tốt hơn.
3. Kiểm tra từng cặp nền-chữ. Mọi tổ hợp chữ và nền phải đạt tiêu chuẩn WCAG:
- Chữ thường: tối thiểu 4.5:1 (WCAG AA)
- Chữ lớn: tối thiểu 3:1 (WCAG AA)
- Hướng đến 7:1 cho chữ nội dung (WCAG AAA)
4. Không bao giờ dùng màu sắc làm điểm phân biệt duy nhất. Liên kết phải có gạch chân (không chỉ khác màu). Trạng thái lỗi phải kèm biểu tượng hoặc văn bản. Biểu đồ phải dùng họa tiết hoặc nhãn.
5. Kiểm tra bằng trình mô phỏng mù màu. Deuteranopia (đỏ-xanh lục) là loại phổ biến nhất. Đảm bảo thiết kế của bạn hoạt động mà không cần nhận biết màu sắc.
6. Xác minh ở chế độ xám. Nếu thiết kế của bạn mất ý nghĩa khi chuyển sang thang xám, bạn đang phụ thuộc quá nhiều vào màu sắc để truyền tải thông tin.
Sử dụng công cụ chuyển đổi màu của chúng tôi để kiểm tra ngay tỷ lệ tương phản giữa bất kỳ hai màu nào.