جدول درس

دستورالعمل مرجع CSS

ویژگی‌های CSS

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

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

جعبه ابزار CodeW3C.com

توابع oklch() در CSS

صفحه قبلی توابع oklab() CSS
صفحه بعدی توابع opacity() CSS
برگشت به لایه بالا دستورالعمل مرجع تابع 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% است.