Định dạng Màu được Giải thích: HEX, RGB và HSL
Trả lời nhanh
HEX (#RRGGBB) và RGB (0–255 mỗi kênh) mã hóa trực tiếp cường độ đỏ, lục và lam. HSL (sắc độ 0–360°, bão hòa/độ sáng 0–100%) mã hóa màu theo cách phù hợp nhận thức con người. Chuyển đổi giữa cả ba bằng Color Converter của chúng tôi.
Giới thiệu
Màu web được chỉ định trong ba định dạng chủ đạo: HEX (base-16 đỏ, lục, lam), RGB (thập phân 0–255 mỗi kênh) và HSL (sắc độ, bão hòa, độ sáng). Cả ba đều mô tả cùng một không gian màu sRGB nhưng lộ các trục khác nhau: HEX và RGB hướng phần cứng, trong khi HSL hướng con người. CSS hiện đại cũng hỗ trợ alpha qua HEX8, rgba() và hsla().
Từng bước một
-
Hiểu ký hiệu HEX
HEX ghi mỗi kênh dưới dạng số cơ sở 16 có hai chữ số: #RRGGBB. 00 tắt, FF (255) là cường độ tối đa. #FF0000 có màu đỏ thuần, #00FF00 xanh thuần, #0000FF xanh thuần, #FFFFFF trắng, #000000 đen. Tốc ký gồm 4 chữ số #RGB mở rộng thành #RRGGBB và #RRGGBBAA thêm alpha (ví dụ: #FF573380 là 50% alpha).
-
Hiểu ký hiệu RGB
RGB sử dụng số thập phân 0—55 trên mỗi kênh: rgb(255, 87, 51) giống như #FF5733. Hàm rgba() thêm 0— alpha: rgba(255, 87, 51, 0.5) mờ 50%. RGB tương đương với HEX —nó chỉ là số thập phân thay vì cơ số 16.
-
Hiểu ký hiệu HSL
HSL sử dụng màu sắc (0—60° trên bánh xe màu: 0=đỏ, 120=xanh lục, 240=xanh lam), độ bão hòa (0% = xám, 100% = đủ màu) và độ sáng (0% = đen, 50% = bình thường, 100% = trắng). hsl(11, 100%, 60%) có màu cam sống động. HSL khiến việc tạo tông màu (tăng độ sáng) và sắc thái (độ sáng thấp hơn) của cùng một màu trở nên đơn giản hơn.
-
Chuyển đổi giữa các định dạng
HEX→RGB: phân tích từng cặp dưới dạng cơ sở 16. RGB→HEX: chuyển đổi mỗi kênh thành 2 chữ số cơ số 16. RGB→HSL: tính toán tối đa/phút của kênh chuẩn hóa, độ sáng = (max+min)/2, độ bão hòa phụ thuộc vào độ sáng, màu sắc là góc của kênh chiếm ưu thế. Sử dụng Trình chuyển đổi màu của chúng tôi để thực hiện tất cả những điều này ngay lập tức.
-
Chọn định dạng phù hợp cho nhiệm vụ
Sử dụng HEX để thu gọn mã thông báo và nội dung thiết kế. Sử dụng RGB/rgba() khi bạn cần nội suy hoặc tạo hoạt ảnh cho các kênh. Sử dụng HSL/HSLA khi tạo bảng màu, sắc thái hoặc biến thể chủ đề —điều chỉnh độ sáng 10% dễ dàng hơn nhiều so với lý luận về RGB vùng đồng bằng.
Ví dụ
Màu đỏ thuần ở cả ba định dạng
đầu vào: #FF0000
đầu ra: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Một màu cam sống động
đầu vào: #FF5733
đầu ra: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Trắng và đen
đầu vào: #FFFFFF và #000000
đầu ra: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Tạo bóng râm 5 bước từ một màu sắc HSL
đầu vào: hsl(210, 70%, 50%) —độ sáng khác nhau 30/40/50/60/70%
đầu ra: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 —một bảng màu xanh lam mạch lạc
Các vấn đề thường gặp
- Trộn HEX 3 chữ số và 6 chữ số: #F00 và #FF0000 có cùng màu, nhưng một số trình phân tích cú pháp chỉ chấp nhận một dạng. Bình thường hóa thành mã 6 chữ số để tránh những điều bất ngờ.
- Quên rằng HSL độ sáng 50% không phải là 'một nửa độ sáng': ở độ bão hòa 100%, độ sáng 50% là màu sắc thuần khiết; trên 50% nó chuyển sang màu trắng, dưới 50% nó chuyển sang màu đen. '50% màu xám' là hsl(0, 0%, 50%).
- Nhầm lẫn kênh alpha: #RRGGBBAA (HEX8) được hỗ trợ trong các trình duyệt hiện đại nhưng không được hỗ trợ trong các trình duyệt cũ hơn; rgba()/hsla() có sự hỗ trợ rộng rãi hơn. Luôn kiểm tra môi trường mục tiêu.
- Không gian màu không khớp: HEX, RGB và HSL đều mô tả sRGB. Nếu bạn chuyển đổi sang/từ P3 hoặc Lab/OKLCH (được sử dụng bởi màn hình hiện đại), bản sao kênh đơn giản sẽ tạo ra màu sai—hãy sử dụng thư viện màu thích hợp.
Mẹo
- Sử dụng HSL khi thiết kế bảng màu: chọn một màu sắc, sau đó thay đổi độ sáng (ví dụ: 30/50/70%) và độ bão hòa (ví dụ: 60/80/100%) để tạo ra các sắc thái và tông màu nhất quán.
- Để có khả năng truy cập, hãy kiểm tra tỷ lệ tương phản so với nền —WCAG AA yêu cầu 4,5:1 đối với văn bản thông thường, AAA 7:1. Sử dụng Bộ chuyển đổi màu của chúng tôi để tính toán độ chói và độ tương phản tương đối.
- Ưu tiên CSS color-mix() hoặc oklch() hiện đại để nội suy thống nhất về mặt nhận thức —RGB nội suy có thể chuyển qua màu xám đục khi trộn các màu bổ sung.
- Khi tạo độ dốc, trước tiên hãy chuyển đổi điểm cuối sang cùng định dạng — việc trộn HEX và HSL trong một khai báo độ dốc duy nhất có thể tạo ra điểm giữa không mong muốn.