OKLCH به زبان ساده: فرمت رنگی که بالاخره با چشم شما هماهنگ است

OKLCH چیست

OKLCH شکل قطبی Oklab است، یک فضای رنگی ادراکی که Björn Ottosson در سال 2020 منتشر کرد. این فرمت سه عدد دارد. L روشنایی ادراکی است، از 0 (سیاه) تا 1 یا 100% (سفید). C کروما یا میزان رنگ است، از 0 (خاکستری) تا حدود 0.37 برای پررنگ‌ترین رنگ‌هایی که صفحه‌نمایش‌ها نشان می‌دهند. H زاویه فام است، از 0 تا 360 درجه.

یک رنگ در فرمت‌های مختلف این‌طور نوشته می‌شود. همه مقدارهای زیر را PickShade همین حالا محاسبه می‌کند، پس می‌توانید آن‌ها را همان‌طور که هستند کپی کنید.

چرا OKLCH از HSL بهتر است

روشنایی در HSL یک فرمول است، نه ادراک چشم. hsl(60 100% 50%) یک زرد درخشان است و hsl(240 100% 50%) یک آبی تیره، اما هر دو ادعا می‌کنند روشنایی‌شان 50% است. اگر پالت را روی HSL بسازید، هر فام به اصلاح دستی نیاز دارد.

در OKLCH رنگ‌هایی که L برابر دارند، واقعاً به یک اندازه روشن دیده می‌شوند. می‌توانید L و C را ثابت نگه دارید و H را بچرخانید تا مجموعه‌ای از فام‌های متعادل بگیرید، یا H و C را ثابت نگه دارید و L را پله‌پله تغییر دهید تا یک مقیاس تمیزی از درجه‌ها بسازید. به همین دلیل Tailwind CSS v4 کل پالت پیش‌فرضش را با OKLCH تعریف کرده است.

روشنایی کنتراست را هم پیش‌بینی می‌کند. متنی که L آن حدود 0.4 یا بیشتر با پس‌زمینه فاصله دارد، معمولاً خوانا است. این کار انتخاب رنگ‌های دسترس‌پذیر را بسیار ساده‌تر می‌کند.

سینتکس در CSS

روشنایی را می‌توان به‌صورت درصد یا عددی از 0 تا 1 نوشت. کروما یک عدد است. فام زاویه‌ای بر حسب درجه است. شفافیت بعد از علامت اسلش می‌آید.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

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

oklch() در همه مرورگرهای امروزی کار می‌کند: Safari از نسخه 15.4، Chrome و Edge از نسخه 111 و Firefox از نسخه 113. این یعنی خیلی بیشتر از 90% کاربران. برای مرورگرهای خیلی قدیمی، یک مقدار HEX جایگزین در خط قبل از مقدار OKLCH بنویسید.

color: #ff5733;
color: oklch(68% 0.21 33.7);

محدودیت کروما و گاموت

OKLCH می‌تواند رنگ‌هایی را توصیف کند که هیچ صفحه‌نمایشی قادر به نشان دادنشان نیست. بیشترین کروما به روشنایی و فام بستگی دارد: زرد پررنگ فقط در روشنایی بالا ممکن است و آبی پررنگ فقط در روشنایی پایین. وقتی مقداری بیرون از گاموت sRGB یا Display P3 باشد، مرورگر آن را به داخل گاموت برمی‌گرداند و ممکن است رنگ کمی تغییر کند.

PickShade رنگ‌های بیرون از sRGB را علامت می‌زند و نزدیک‌ترین رنگی را که جا می‌شود به شما می‌دهد. این رنگ با پایین آوردن کروما و حفظ روشنایی و فام پیدا می‌شود، همان روشی که CSS Color 4 توصیه می‌کند.

چطور HEX را به OKLCH تبدیل کنیم

مسیر تبدیل این است: HEX به sRGB، sRGB به نور خطی، sRGB خطی به فضای مخروطی LMS، ریشه سوم، یک ماتریس برای رسیدن به Oklab و در آخر Oklab به مختصات قطبی. انجام دستی این کار پرخطاست، پس هر رنگی را در مبدل رنگ بچسبانید و نتیجه را کپی کنید.

پرسش و پاسخ