وصلة التوصية:

دالة lch() في CSS

تعريف و استخدام lch() تعريف الألوان في مساحة الألوان LCH (الإضاءة - اللون - اللون الداكن) من خلال الدوال.

مثال

تعريف lch() اللون:

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}
#p9 {background-color:lch(90% 130 70);}

آزمایش کنید

نحوه استفاده از CSS

نحوه استفاده از مقدار‌های مطلق

lch(L C H / A)
مقدار توضیح
L

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

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

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

ضروری. میزان رنگ (مقدار رنگ) را تعریف می‌کند، می‌تواند عددی یا درصدی باشد.

حداقل مقدار 0 (یا 0%) است. حداکثر مقدار بی‌نهایت است (اما در واقع بیش از 230 نیست). 100% برابر با 150 است.

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

ضروری. زاویه رنگ را تعریف می‌کند، می‌تواند عدد یا مقدار زاویه باشد.

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

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

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

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

نحوه استفاده از مقدار‌های نسبی

lch(from color L C H / A)
مقدار توضیح
from color

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

این رنگ اولیه‌ای است که رنگ‌های مطلق بر اساس آن تعریف می‌شوند.
L

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

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

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

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

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

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

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

ضروری. زاویه رنگ را تعریف می‌کند، می‌تواند عدد یا مقدار زاویه باشد.

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

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

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

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

جزئیات فنی

نسخه: CSS Color Module Level 4

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

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

Chrome Edge Firefox Safari Opera
lch()
111 111 113 15 97
در پارامترها ترکیب اعداد و درصد
116 116 113 16.2 102

صفحات مرتبط

مطالبه:CSS colors

مطالبه:CSS hsl() فونکشن

مطالبه:函数 hwb() CSS

مطالبه:函数 lab() CSS

مطالبه:函数 oklab() CSS

مطالبه:函数 oklch() CSS