توابع oklab() در 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

ضروری. میزان روشنایی احساسی رنگ را تعریف کنید که می‌تواند عددی بین 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 color L a b / A)
مقادیر توضیحات
from color

با کلمه کلیدی from شروع می‌شود، سپس رنگ اولیه را نشان می‌دهد.

این رنگ اولیه‌ای است که رنگ‌های نسبی بر اساس آن قرار دارند.
L

ضروری. میزان روشنایی احساسی رنگ را تعریف کنید که می‌تواند عددی بین 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% است.

جزئیات فنی

نسخه: CSS Color Module Level 4

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای اولین مرتبه که این فنکشن در مرورگرها پشتیبانی می‌شود.

کروم ایج فایرفاکس سافاری آپرا
oklab()
111 111 113 15.4 97
در پارامترها استفاده از اعداد و درصد ترکیبی
116 116 113 16.2 102

معلوماتی صفحات

مشارکت:رنگ CSS

مشارکت:CSS hsl() فنکشن

مشارکت:CSS hwb() فانکشن

مشارکت:CSS lch() فانکشن

مشارکت:CSS lab() فانکشن

مشارکت:CSS oklch() فانکشن