توابع oklch() CSS

CSS

تعریف و استفاده در oklch() این تابع برای مشخص کردن رنگ در فضای رنگی OKLCH استفاده می‌شود.

oklch() این تابع بسیار ساده است: شما باید مقدار روشنایی/میزان روشنایی (L)، قدرت رنگ (C) و خود رنگ (H) را در نظر بگیرید. علاوه بر این، می‌توانید یک مقدار شفافیت (A) نیز اضافه کنید که شفافیت رنگ را نشان می‌دهد.

مثال

تعریف مختلف oklch() رنگ:

/* مختلف روشنایی سبز /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ زردهای با شدت مختلف /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ قرمزهای با شدت مختلف */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

آزمایش کنید

زبان CSS

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

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

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

0 (یا 0%) به معنای سیاه، 1 (یا 100%) به معنای سفید است.

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

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

باید عددی بین -0.4 تا 0.4 یا درصدی بین -100% تا 100% باشد.

در حداقل مقدار (0% یا -0.4)، رنگ به رنگ خاکستری نزدیک‌تر است.

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

ضروری. تعریف رنگ خود، می‌تواند عدد یا درجه باشد (0 تا 360).

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

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

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

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

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

oklch(from رنگ L C H / A)
مقدار توضیح
از رنگ

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

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

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

0 (یا 0%) به معنای سیاه، 1 (یا 100%) به معنای سفید است.

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

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

باید عددی بین -0.4 تا 0.4 یا درصدی بین -100% تا 100% باشد.

در حداقل مقدار (0% یا -0.4)، رنگ به رنگ خاکستری نزدیک‌تر است.

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

ضروری. تعریف رنگ خود، می‌تواند عدد یا درجه باشد (0 تا 360).

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

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

همچنین می‌توان از none (به معنای کانال شفافیت) استفاده کرد. مقدار پیش‌فرض 100% است.

جزئیات فنی

نسخه: CSS Color Module Level 4

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

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

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

مستندات مرتبط

مراجع:سی ایس ایس رنگ

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

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

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

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

مراجع:CSS اوکلاب() فانکشن