جدول درس

دستورالعمل‌های مرجع CSS

ویژگی CSS

درس‌های انتخابی

پیشنهاد دوره:

صندوقچه CodeW3C.com

توابع oklab() در CSS

صفحه قبلی توابع mod() CSS
صفحه بعدی توابع oklch() CSS
برگشت به لایه بالاتر دستورالعمل‌های مرجع Function CSS

تعریف و استفاده

CSS‌ها oklab() توابع مختلف برای تعیین رنگ در فضای رنگی OKLAB استفاده می‌شوند. این فضای رنگی به منظور شبیه‌سازی روش شناسایی رنگ توسط چشم انسان طراحی شده است.

مثال‌ها

تعریف oklab() رنگ:

#p1 {background-color:oklab(0 40% 20% / 0.5);}
#p2 {background-color:oklab(0.3 -40% -20%);}
#p3 {background-color:oklab(0.4 30% -20% / 20%);}
#p4 {background-color:oklab(0.5 60% 20%);}
#p5 {background-color:oklab(0.6 50% -10%);}
#p6 {background-color:oklab(0.7 70% -80% / 0.3);}
#p7 {background-color:oklab(0.8 70% 20% / 0.5);}
#p8 {background-color:oklab(0.9 80% -20%);}
#p9 {background-color:oklab(1 90% -100%);}

آزمایش کنید

زبان CSS

زبان مقادیر نسبی

oklab(L a b / A)

مقدار	توضیحات
L	ضروری. لuminانس احساسی رنگ را تعریف می‌کند که می‌تواند عددی بین 0 تا 1 یا درصدی بین 0% تا 100% باشد. 0 (یا 0%) نشان‌دهنده سیاه است، 1 (یا 100%) نشان‌دهنده سفید است. همچنین می‌توان از None (که معادل 0% است) استفاده کرد.
a	ضروری. عدد یا درصدی بین -0.4 و 0.4 یا بین -100% و 100% را تعریف می‌کند. تعریف فاصله رنگ در محور a، که نشان‌دهنده میزان قرمز یا سبز رنگ است. -0.4 نشان‌دهنده سبز است، 0.4 نشان‌دهنده قرمز است. همچنین می‌توان از none (که معادل 0% است) استفاده کرد.
b	ضروری. عدد یا درصدی بین -0.4 و 0.4 یا بین -100% و 100% را تعریف می‌کند. تعریف فاصله رنگ در محور b، که نشان‌دهنده میزان زرد یا آبی رنگ است. -0.4 نشان‌دهنده آبی است، 0.4 نشان‌دهنده زرد است. همچنین می‌توان از none (که معادل 0% است) استفاده کرد.
/ A	اختیاری. مقدار کانال شفافیت رنگ (0% یا 0 به معنای شفافیت کامل، 100% یا 100 به معنای نیمه‌شفافیت کامل) را نشان می‌دهد. همچنین می‌توان از none (که معنای کانال شفافیت را نشان می‌دهد) استفاده کرد. مقدار پیش‌فرض 100% است.

زبان مقادیر مطلق

oklab(from رنگ L a b / A)

مقدار	توضیحات
از رنگ	با کلمه کلیدی from شروع می‌شود، سپس رنگ اصلی را نشان می‌دهد. این رنگ اصلی اولیه‌ای است که رنگ‌های مطلق بر اساس آن تعریف می‌شوند.
L	ضروری. لuminانس احساسی رنگ را تعریف می‌کند که می‌تواند عددی بین 0 تا 1 یا درصدی بین 0% تا 100% باشد. 0 (یا 0%) نشان‌دهنده سیاه است، 1 (یا 100%) نشان‌دهنده سفید است. همچنین می‌توان از none (که معادل 0% است) استفاده کرد.
a	ضروری. عدد یا درصدی بین -0.4 و 0.4 یا بین -100% و 100% را تعریف می‌کند. تعریف فاصله رنگ در محور a، که نشان‌دهنده میزان قرمز یا سبز رنگ است. -0.4 نشان‌دهنده سبز است، 0.4 نشان‌دهنده قرمز است. همچنین می‌توان از none (که معادل 0% است) استفاده کرد.
b	ضروری. عدد یا درصدی بین -0.4 و 0.4 یا بین -100% و 100% را تعریف می‌کند. تعریف فاصله رنگ در محور b، که نشان‌دهنده میزان زرد یا آبی رنگ است. -0.4 نشان‌دهنده آبی است، 0.4 نشان‌دهنده زرد است. همچنین می‌توان از none (که معادل 0% است) استفاده کرد.
/ A	اختیاری. مقدار کانال شفافیت رنگ (0% یا 0 به معنای شفافیت کامل، 100% یا 100 به معنای نیمه‌شفافیت کامل) را نشان می‌دهد. همچنین می‌توان از none (که معنای کانال شفافیت را نشان می‌دهد) استفاده کرد. مقدار پیش‌فرض 100% است.