چطور با OKLCH و color-mix در CSS، کدهای رنگی هوشمندتر بنویسیم و حجم پروژه رو کم کنیم؟

سلام به همه کدولوپری‌های عزیز!

به عنوان یک فرانت‌اند دولوپر، حتماً برای شما هم پیش اومده که در پروژه‌های بزرگ با انبوهی از متغیرهای رنگی برای حالت‌های مختلف مثل Hover، Active یا Disabled سردرگم شید. تعریف کردن ده‌ها کد Hex یا HSL نه تنها فایل‌های CSS ما رو شلوغ و شلخته می‌کنه، بلکه مدیریت اون‌ها در آینده رو هم سخت می‌کنه.

امروز می‌خوایم با هم بررسی کنیم که چطور فضای رنگی مدرن OKLCH به همراه تابع فوق‌العاده کاربردی color-mix در CSS، می‌تونن این مشکل رو به راحتی حل کنن و حتی حجم باندل (Bundle Size) پروژه‌های بزرگمون رو پایین بیارن.

خب، اول بریم بررسی کنیم OKLCH چیه؟

فضای رنگی OKLCH یک روش جدید و به‌شدت جذاب برای تعریف رنگ در CSS هستش که دقیقاً بر اساس درک چشم انسان از رنگ‌ها طراحی شده. این متد از ۴ مؤلفه تشکیل شده:

• Lightness (L): میزان روشنایی رنگ رو مشخص می‌کنه (از 0% تا 100%).

• Chroma (C): میزان خلوص، زنده بودن یا شدت رنگ هستش. مثلاً رنگ قرمزِ جیغ Chroma بالایی داره. هرچی Chroma رو کمتر کنیم، رنگمون کدرتر و به خاکستری نزدیک‌تر می‌شه.

• Hue (H): زاویه رنگ روی چرخه رنگ میشه؛ یک عدد بین 0 تا 360 درجه که خودِ رنگ (قرمز، آبی، سبز و...) رو تعیین می‌کنه.

• Alpha (A): همون میزان شفافیت یا transparency هستش (بین 0 تا 1 یا به صورت درصد).

یک نکته خیلی جالب: در OKLCH، این مؤلفه‌ها به شکل هوشمندانه‌ای به هم متصل هستن؛ یعنی با تغییر یکی، بقیه هم طوری تغییر می‌کنن که رنگ در دنیای واقعی کاملاً طبیعی و چشم‌نواز به نظر برسن. پیشنهاد می‌کنم حتماً به سایت oklch.com سر بزنید و خودتون اهرم‌های مختلف رو جا به جا کنید تا بیشتر این مبحث رو درک کنید!

داستان واقعی: از طرح دیزاینر تا دکمه‌های Hover

تصور کنید طراح پروژه، یک رنگ اصلی (Primary Color) به شما داده که قراره در دکمه‌ها و لینک‌ها ازش استفاده کنید. خب، این المان‌ها قطعاً به حالت Hover (وقتی موس روی اون‌ها میر‌ه) نیاز دارن.

یک راه این هستش که رنگ اصلی رو در سایت oklch.com وارد کنید و فقط با کم و زیاد کردن بخش Lightness (روشنایی)، خیلی راحت نسخه‌های تاریک‌تر یا روشن‌ترِ همون رنگ رو برای Hover بسازید.

راه دوم که پیشنهاد میشه افزونه OKLChanger در VS Code هست:

برای اینکه مدام بین مرورگر و ادیتور جابجا نشید:
۱. افزونه OKLChanger رو در VS Code نصب کنید.
۲. در فایل استایل خود (مثلاً global.css در پروژه‌های Next.js) رنگ Hex خودتون رو بنویسید:

:root {
  --color-primary: #3b82f6;
}

:root {
  --color-primary: oklch(0.63 0.25 258.2); /* رنگ اصلی */
  
  /* ساخت رنگ به صورت داینامیک */
  --primary-hover: color-mix(in oklch, var(--color-primary), black 7%);
}

@theme {
  --color-primary: var(--color-primary);
  --color-primary-hover: var(--primary-hover);
}