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

CSS lab() توابع

تعریف و استفاده lab() توابع در فضای رنگی CIE Lab رنگ‌ها را مشخص می‌کنند. این فضای رنگی تمام رنگ‌های قابل مشاهده چشم انسان را نشان می‌دهد.

مثال

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

#p1 {background-color:lab(0 40% 20% / 0.5);}
#p2 {background-color:lab(30 -40% -20%);}

آزمایش کنید

نحوه نوشتن CSS

نحوه نوشتن مقدارهای قطعی

lab(L a b / A)
مقدار توضیح
L

ضروری. تعریف روشنایی رنگ، می‌تواند عددی بین 0 تا 100 یا درصدی باشد.

0 (یا 0%) نشان‌دهنده سیاه و 100 (یا 100%) نشان‌دهنده سفید است.

همچنین می‌توان از none (معادل 0%) استفاده کرد.
a

ضروری. تعریف عددی بین -125 تا 125 یا درصدی بین -100% تا 100%.

تعریف فاصله رنگ در محور a، نشان‌دهنده میزان قرمز-سبز رنگ است.-125 نشان‌دهنده سبز و 125 نشان‌دهنده قرمز است.

همچنین می‌توان از none (معادل 0%) استفاده کرد.
b

ضروری. تعریف عددی بین -125 تا 125 یا درصدی بین -100% تا 100%.

تعریف فاصله رنگ در محور b، نشان‌دهنده میزان زرد-آبی رنگ است.

-125 نشان‌دهنده آبی و 125 نشان‌دهنده زرد است.

همچنین می‌توان از none (معادل 0%) استفاده کرد.
/ A

اختیاری. نشان‌دهنده مقدار شفافیت رنگ است (0% یا 0 نشان‌دهنده شفافیت کامل و 100% یا 100 نشان‌دهنده عدم شفافیت کامل است).

همچنین می‌توان از none (که نشان‌دهنده کانال شفافیت است) استفاده کرد.

مقدار پیش‌فرض 100% است.

نحوه نوشتن مقدارهای نسبی

lab(از رنگ L a b / A)
مقدار توضیح
از رنگ

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

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

ضروری. تعریف روشنایی رنگ، می‌تواند عددی بین 0 تا 100 یا درصدی باشد.

0 (یا 0%) نشان‌دهنده سیاه و 100 (یا 100%) نشان‌دهنده سفید است.

همچنین می‌توان از none (معادل 0%) استفاده کرد.
a

ضروری. تعریف عددی بین -125 تا 125 یا درصدی بین -100% تا 100%.

تعریف فاصله رنگ در محور a، نشان‌دهنده میزان قرمز-سبز رنگ است.

-125 نشان‌دهنده سبز و 125 نشان‌دهنده قرمز است.

همچنین می‌توان از none (معادل 0%) استفاده کرد.
b

ضروری. تعریف عددی بین -125 تا 125 یا درصدی بین -100% تا 100%.

تعریف فاصله رنگ در محور b، نشان‌دهنده میزان زرد-آبی رنگ است.

-125 نشان‌دهنده آبی و 125 نشان‌دهنده زرد است.

همچنین می‌توان از none (معادل 0%) استفاده کرد.
/ A

اختیاری. نشان‌دهنده مقدار شفافیت رنگ است (0% یا 0 نشان‌دهنده شفافیت کامل و 100% یا 100 نشان‌دهنده عدم شفافیت کامل است).

همچنین می‌توان از none (که نشان‌دهنده کانال شفافیت است) استفاده کرد.

مقدار پیش‌فرض 100% است.

جزئیات فنی

نسخه: CSS Color Module Level 4

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

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

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

صفحات مرتبط

منابع:رنگ CSS

منابع:دستورالعمل hsl()

منابع:فункциون hwb() CSS

منابع:فункциون lch() CSS

منابع:فункциون oklab() CSS

منابع:فункциون oklch() CSS