Chuyển đổi HSLA sang OKLab
Dán giá trị HSLA, nhận ngay OKLab. Các định dạng khác cũng dùng được.
Nhận dạng: HSL
Cùng màu nhưng không trong suốt, dạng OKLab đặc
Tinh chỉnh màu
Mọi định dạng khác
Bảng độ mờ: alpha trong HEX và HSLA
Trong mã HEX 8 chữ số, hai chữ số cuối quy định độ mờ đục: FF là đục hoàn toàn, 80 khoảng 50%, 00 là trong suốt hoàn toàn. Bảng hiển thị màu ví dụ theo từng bước 5%.
| Độ mờ đục | Alpha HEX | HEX | HSLA |
|---|---|---|---|
| 100% | ff | #ff5733 | hsla(10.59, 100%, 60%, 1) |
| 95% | f2 | #ff5733f2 | hsla(10.59, 100%, 60%, 0.95) |
| 90% | e6 | #ff5733e6 | hsla(10.59, 100%, 60%, 0.9) |
| 85% | d9 | #ff5733d9 | hsla(10.59, 100%, 60%, 0.85) |
| 80% | cc | #ff5733cc | hsla(10.59, 100%, 60%, 0.8) |
| 75% | bf | #ff5733bf | hsla(10.59, 100%, 60%, 0.75) |
| 70% | b3 | #ff5733b3 | hsla(10.59, 100%, 60%, 0.7) |
| 65% | a6 | #ff5733a6 | hsla(10.59, 100%, 60%, 0.65) |
| 60% | 99 | #ff573399 | hsla(10.59, 100%, 60%, 0.6) |
| 55% | 8c | #ff57338c | hsla(10.59, 100%, 60%, 0.55) |
| 50% | 80 | #ff573380 | hsla(10.59, 100%, 60%, 0.5) |
| 45% | 73 | #ff573373 | hsla(10.59, 100%, 60%, 0.45) |
| 40% | 66 | #ff573366 | hsla(10.59, 100%, 60%, 0.4) |
| 35% | 59 | #ff573359 | hsla(10.59, 100%, 60%, 0.35) |
| 30% | 4d | #ff57334d | hsla(10.59, 100%, 60%, 0.3) |
| 25% | 40 | #ff573340 | hsla(10.59, 100%, 60%, 0.25) |
| 20% | 33 | #ff573333 | hsla(10.59, 100%, 60%, 0.2) |
| 15% | 26 | #ff573326 | hsla(10.59, 100%, 60%, 0.15) |
| 10% | 1a | #ff57331a | hsla(10.59, 100%, 60%, 0.1) |
| 5% | 0d | #ff57330d | hsla(10.59, 100%, 60%, 0.05) |
| 0% | 00 | #ff573300 | hsla(10.59, 100%, 60%, 0) |
Ví dụ chuyển HSLA sang OKLab
Về HSLA và OKLab
HSLA là HSL thêm kênh alpha cho độ mờ đục, viết là hsla(11, 100%, 60%, 0.5). Alpha từ 0 (trong suốt hoàn toàn) đến 1 (đục hoàn toàn), và CSS hiện đại cũng chấp nhận nó trong hsl().
OKLab là không gian màu cảm nhận hiện đại ra đời năm 2020. Các bước bằng nhau trông cũng bằng nhau với mắt, nên gradient và màu pha trông sạch hơn so với RGB hay HSL.
Cách chuyển đổi hoạt động
PickShade đọc giá trị HSLA, chuyển sang CIE XYZ bằng các ma trận trong đặc tả CSS Color 4, rồi chuyển tiếp sang OKLab. Giá trị nằm ngoài gam màu đích được ánh xạ theo thuật toán CSS Color 4: giữ độ sáng và tông màu, chỉ giảm độ rực.
Hỏi đáp
Làm sao chuyển HSLA sang OKLab?
Dán hoặc nhập giá trị HSLA vào ô phía trên. PickShade chuyển đổi ngay khi bạn gõ theo công thức CSS Color 4, và chỉ cần một cú nhấp để sao chép giá trị OKLab.
Chuyển HSLA sang OKLab có chính xác không?
Phép tính là chính xác, kết quả chỉ được làm tròn khi hiển thị, với đủ chữ số để chuyển ngược lại vẫn ra đúng màu cũ. Nếu màu không nằm trong gam màu đích, PickShade sẽ cảnh báo và hiện màu gần nhất nằm trong gam.
Có lấy được các định dạng khác cùng lúc không?
Có. Mọi định dạng khác, gồm OKLCH, Display P3, Tailwind, SwiftUI, Flutter và Android, đều được liệt kê bên dưới kết quả và sao chép bằng một cú nhấp.
Công cụ chuyển đổi này có miễn phí không?
Có. Hoàn toàn miễn phí, không cần đăng ký và chạy hoàn toàn trong trình duyệt của bạn.