رنگ‌ها را OKLCH کنید!

چند هفته‌ی پیش به طور اتفاقی به شیوه‌ی معرفی رنگی به نام Oklch برخوردم که من رو شگفت‌زده کرد.

حدود یک هفته، همه‌ی کارها را رها کردم و مشغول بررسی و امتحان این مدل رنگی جدید شدم. احساس کردم مشکلات زیادی را حل می‌کند و متوجه شدم که هنوز به فارسی در مورد این موضوع صحبت نشده‌است.

این مقاله را جهت آگاه‌سازی و هم‌اندیشی مرقوم کردم.

پروژه‌ای را هم برای تست خودم (و البته شما) ایجاد کردم که در آدرس زیر در دسترس است:

لینک: https://oklch.tamtaam.com
کد: https://github.com/AliRezaBoroujerdian/oklch

و Oklch چیست؟

یک شیوه‌ی معرفی رنگ (یا در ترجمه‌ی لغوی یک فضای رنگ - color space) جدید است که در "CSS Color Module Level 4" معرفی شده‌است. (البته راه‌های جدید دیگری هم معرفی شده است. اگر کنجکاوی بیشتری دارید اینجا مطالعه کنید: w3)

احتمالاً با مدل‌های قدیمی‌تر تعریف رنگ در CSS مثل RGB آشنایی کامل دارید:

body {
     color: rgb(57, 140, 244);
}

در Oklch این‌طور می‌نویسیم:

body {
     color: oklch(64.24% 0.175 256);
}

معرفی رنگ با Oklch چگونه است؟

از دو الگوی (oklch(L C H یا (oklch(L C H / a می‌توانید استفاده کنید که حروف در این الگوها به شرح زیر هستند:

• حرف L ابتدای لغت Lightness است که با درصد مشخص می‌شود. در این بازه %0 سیاهی عمیق (بدون هیچ نوری) را تعریف می‌کند و %100 روشن‌ترین حالت است. دقت داشته باشید که درصد تعریف شده می‌تواند اعشار داشته باشد.
• حرف C ابتدای لغت Chroma است که خلوص رنگ را مشخص می‌کند. هر چه کمتر باشد، رنگ خاکستری‌تر و هر چه بیشتر باشد، اشباع شده‌تر و با خلوص بالاتر است. عددهای بالاتر در اصطلاح، رنگ های جیغ به شما می‌دهند. بازه‌ی Chroma از صفر شروع می‌شود و انتهای آن بسته به حالت‌های مختلف متفاوت است. (دقت کنید که مقادیر 0.15 و 15. هر دو برابر و صحیح هستند.)
• حرف H ابتدای لغت Hue خود رنگ را مشخص می‌کند. شامل بازه‌ی بسته‌ی 0 تا 360 می‌شود.
• حرف a ابتدای لغت Alpha است که میزان شفافیت (در واقع عدم شفافیت) را تعیین می‌کند. این مقدار هم می‌تواند به صورت درصد (%100 - %0) و هم به صورت عدد اعشاری (1 - 0) تعیین شود. مقدار 100% یا معادل آن عدد 1 حالت پیش‌فرض است که در آن شفافیتی برای رنگ وجود ندارد.

برای امتحان این سایت را مشاهده کنید: https://oklch.com

چرا Oklch مهم است؟

• رنگ‌های بیشتری را پشتیبانی می‌کند. نمایشگرهای به روز - مثل نمایشگرهایی که Apple به تازگی استفاده می‌کند - رنگ‌های بیشتری نسبت به نمایشگرهای sRGB قدیمی پوشش می‌دهند که این رنگ‌ها در Oklch قابل تعریف است. (فکر می‌کنم جالب است بدانید که این نمایشگرهای جدید هم هنوز، همه‌ی رنگ‌های قابل مشاهده‌ی ما را پشتیبانی نمی‌کنند.)
• یکسانی بیشتری در نمایشگر‌های متفاوت دارد.
• خوانایی بیشتری برای انسان‌ها نسبت به مدل‌های قدیمی‌تر دارد. در Oklch شما با نگاه کردن، فقط به اعداد متوجه خیلی چیزها مثل میزان روشنایی رنگ، شدت رنگ و … می‌شوید.
• و … .
  

مهندسی‌ساز

برای من به شخصه، موارد بالا مهم نبود.

یک اصطلاح رایج درباره‌ی ساختمان وجود دارد که فلان ساختمان مهندسی‌ساز است. (این اصطلاح به طور معمول از طرف مشاورین املاک به سازه‌هایی که دقیق و اصولی ساخته شده‌اند اطلاق می‌شود.)

به نظر من Oklch رنگ وب‌سایت‌ها را مهندسی‌ساز می‌کند. چرا؟

۱. ساخت رنگ‌ها با ریاضی

من یک رنگ برای دکمه‌ها در نظر می‌گیرم:

:root {
     --btn-color: oklch(80% .1 218);
}
.button {
     Background: var(--btn-color);
}

حالا تصمیم می‌گیرم که در زمان hover، رنگ این دکمه 5 درصد روشن‌تر شود.

.button:hover {
     Background: oklch(from var(--btn-color) calc(l + 5) c h);
}

توضیح کد:

اگر این عبارت را نوشته بودم:

Background: oklch(from var(--btn-color) l c h);

همان رنگ قبلی را ارائه می‌کرد. (مقادیر c، l و h تغییری نمی‌کرد.) من با استفاده از calc به درصد روشنایی قبلی، 5 واحد اضافه کرده‌ام.

در ادامه در نظر دارم که برای خطاها یک دکمه بسازم که از نظر روشنی و خلوص رنگ، دقیقاً برابر با سایر دکمه‌ها، ولی به رنگ قرمز باشد. پس می‌نویسم:

.error{
     background: oklch(from var(--btn-color) l c 15);
}

البته انجام این محاسبه‌ها به طور مستقیم ربطی به Oklch ندارد و در فضای رنگی hsl هم ممکن است. آنچه اینجا مهم می‌شود، امکان پیش‌بینی دقیق‌تر از خروجی رنگ‌ها به خاطر ساختار معرفی رنگ در Oklch است. (حالت‌های قبلی به اندازه‌ی Oklch محاسبه‌پذیر نبودند.)

حالا به طور مثال اگر روشنایی رنگ متغییر btn-color-- را کم کنم، دو ساختار دیگر نیز از این تغییر پیروی می‌کنند و دکمه‌ها همچنان با هر رنگی، از نظر شدت روشنایی یکپارچه باقی خواهند‌ماند.

برای بررسی دقیق‌تر، دکمه‌های تعریف شده در این صفحه‌ی نمونه را ببینید: https://oklch.tamtaam.com/

۲. رنگ‌های دلخواه / Palette

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

به طور مثال می‌توانید از این ساختار استفاده کنید:

html {
     --hue: 320;

     --color-primary: oklch(5% .2 var(--hue));
     --color-secondary: oklch(13% .2 var(--hue));
     --color-base-primary: oklch(99% .05 var(--hue));
     --color-base-secondary: oklch(90% .1 var(--hue));
}

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

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

۳. حالت تاریک / Dark Mode

داشتن نمای تیره از همیشه ساده‌تر است. (به نظر من این بخش عالی بود.)

اگر شما طیف‌های از پیش تعیین شده‌ی رنگی برای صفحه در نظر بگیرید. (مثل بخش قبلی) فقط با جابه‌جایی رنگ‌های روشن و تیره این امکان را دارید که از هر ترکیب رنگی، نمای روشن و تیره داشته باشید.

به طور مثال این حالت تاریک برای کدهای بخش قبلی است:

html {
     --hue: 320;

     --color-primary: oklch(99% .05 var(--hue));
     --color-secondary: oklch(90% .1 var(--hue));
     --color-base-primary: oklch(5% .2 var(--hue));
     --color-base-secondary: oklch(13% .2 var(--hue));
}

در این کد فقط مقادیر قبلی جابه‌جا شده‌اند.

برای آزمایش این بخش هم به صفحه‌ی نمونه مراجعه کنید. هر مقدار دلخواه را برای hue تعیین کنید و سپس حالت dark را انتخاب کنید.

و حالا A11y

عبارت A11y به لغت Accessibility اشاره دارد. در واقع یک اختصار برای این لغت است. یعنی حرف a و ۱۱ حرف بعد از آن و در آخر حرف y.

در دنیای توسعه‌ی وب، A11y به تلاش برای دسترسی‌پذیر کردن هر چه بیشتر محیط وب، برای افرادی که به نوعی با محدودیت مواجه هستند، اشاره می‌کند. مثل افراد کم‌بینا یا حتی نابینا.

من در حال تحقیق و تلاش در این زمینه بودم که به Oklch برخوردم و برای من، مهم‌ترین بخش، همین بخش بود.

فضای رنگ Oklch به ما امکان طراحی و پیاده‌سازی یک ساختار اصولی را می‌دهد که علاوه‌بر مواردی که بالا ذکر شد بتوانیم با استفاده از هر نوع ترکیب رنگی (palette)، مطمئن باشیم که تضاد (contrast) رنگ‌ها بین نوشته‌ها و پس‌زمینه به میزان مناسبی وجود داشته باشد تا افرادی که با طیف وسیعی از مشکلات بینایی برای تشخیص رنگ‌ها درگیر هستند تجربه‌ی بهتری در استفاده از وب‌سایت‌ها داشته باشند.

اگر دوباره به صفحه‌ای که برای نمونه طراحی کردم مراجعه کنید، می‌بینید که با انتخاب هر رنگی contrast با کیفیت بالایی حفظ شده‌است.

و Opera کجایی؟ دقیقاً کجایی؟

نکته قابل تامل این است که تا این لحظه که من در حال نوشتن هستم، مرورگر Opera در نسخه‌ی Android‌ از Oklch پشتیبانی نمی‌کند.

این مورد را به عنوان یک نکته‌ی منفی در نظر نمی‌گیرم چون به احتمال زیاد در هفته‌های آینده این مورد حل خواهد شد.

برای بررسی اینجا را چک کنید: mozilla

در پایان

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

اگر برای تصحیح و یا تکمیل این تجربه‌ی جدید می‌توانید کمک کنید در بخش نظرها، منتظر شما هستم؛ یا این‌که می‌توانید من را از طریق وب‌سایتم پیدا کنید: boroujerdian.com