تبدیل HSLA به OKLCH
یک مقدار HSLA وارد کنید و فوراً OKLCH بگیرید. فرمتهای دیگر هم کار می‌کنند.
خوانده‌شده به‌صورت HSL
همین رنگ بدون شفافیت، به‌صورت OKLCH مات
تنظیم رنگ
همهٔ فرمتهای دیگر
جدول کدری: آلفا در HEX و HSLA
در HEX هشت‌رقمی، دو رقم آخر کدری را تعیین می‌کنند: FF کاملاً مات، 80 حدود ۵۰٪ و 00 کاملاً شفاف است. جدول رنگ نمونه را با گام‌های ۵٪ نشان میدهد.
| کدری | آلفا در 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) |
نمونه‌های تبدیل HSLA به OKLCH
دربارهٔ HSLA و OKLCH
HSLA همان HSL به‌همراه کانال آلفا برای کدری است و به شکل hsla(11, 100%, 60%, 0.5) نوشته میشود. آلفا از 0 (کاملاً شفاف) تا 1 (کاملاً مات) است و CSS مدرن آن را داخل hsl() هم می‌پذیرد.
OKLCH همان OKLab در مختصات قطبی است: روشنایی، کروما و فام. Tailwind CSS v4 کل پالتش را با آن تعریف میکند، چون تغییر روشنایی فام را ثابت نگه می‌دارد.
تبدیل چطور انجام میشود
مقدار HSLA را می‌خوانیم، با ماتریس‌های مشخصات CSS Color 4 به CIE XYZ و سپس به OKLCH تبدیلش می‌کنیم. مقادیر بیرون از گاموت مقصد با الگوریتم CSS Color 4 نگاشت میشوند که روشنایی و فام را نگه می‌دارد و کروما را کم میکند.
پرسش و پاسخ
چطور HSLA را به OKLCH تبدیل کنم؟
یک مقدار HSLA را در کادر بالا جایگذاری یا تایپ کنید. PickShade همزمان با تایپ، آن را با فرمولهای CSS Color 4 تبدیل میکند و با یک کلیک مقدار OKLCH کپی میشود.
آیا تبدیل HSLA به OKLCH دقیق است؟
محاسبات دقیق است و نتیجه فقط برای نمایش گرد میشود، با رقمهای کافی برای برگشت به همان رنگ. اگر رنگ در گاموت مقصد جا نشود، PickShade هشدار میدهد و نزدیکترین رنگی را که جا میشود نشان میدهد.
آیا میتوانم همزمان فرمتهای دیگر را هم بگیرم؟
بله. همهٔ فرمتهای دیگر، از جمله OKLCH، Display P3، Tailwind، SwiftUI، Flutter و Android، زیر نتیجه آمدهاند و با یک کلیک کپی میشوند.
این مبدل رایگان است؟
بله. رایگان است، ثبتنام نمیخواهد و کاملاً در مرورگر شما اجرا میشود.