پرش به مطلب اصلی

رنگ‌ها

Color Functions​

تو CSS از روش‌های مختلفی میشه رنگ یه المان رو تعیین کرد. در ادامه معایب بعضی از روش‌ها رو توضیح میدم و در انتها میگم که چرا بهترین روش hsl ئه.

Named Colors​

شاید به نظر برسه بهترین راه برای مشخص کردن یه رنگ، استفاده از اسم اون باشه. برای رنگ‌هایی که معمولاً باهاشون سروکار داریم و اسمشون رو می‌دونیم، این موضوع صادقه؛ اما CSS بیش از 160 رنگ داره که تعداد زیادی از اون‌ها برای توسعه‌دهندگان، خصوصاً کسانی که زبان مادریشون انگلیسی نیست، ناآشنا هستن.

از طرفی حتی در مورد رنگ‌هایی که اسمشون رو می‌دونیم، نمی‌تونیم دقیقاً میزان پررنگ یا کم‌رنگ بودنشون رو تشخیص بدیم. به‌عنوان مثال تفاوت رنگ‌های pink و lightpink چیه؟ یا کدوم‌یک از رنگ‌های hotpink و deeppink پررنگ‌تره؟

البته این نوع رنگ‌ها کاملاً هم بلااستفاده نیستن، بلکه بعضاً برای زمانی که صرفاً به دنبال تست کردن پروژه یا شناسایی باگ هستید، میشه ازشون استفاده کرد.

.named-color {
  color: palevioletred;
}

HEX​

این فرمت از سه عدد در مبنای 16 تشکیل شده؛ جدا از اینکه تشخیص یه عدد مبنای 16 و محاسبه ذهنی برای تبدیلش به مبنای 10 کار سختیه، این فرمت مشکل بزرگ دیگه‌ای هم داره که در قسمت RGB بهش اشاره می‌کنیم.

.hex {
  color: #db7093;
}

RGB​

این فرمت از سه عدد در مبنای 10 تشکیل شده که به ترتیب نشون‌دهنده رنگ‌های قرمز، سبز و آبی هستن. این اعداد از 0 تا 255 می‌تونن انتخاب بشن و هر چی عدد متناظر یه رنگ بزرگ‌تر باشه، مقدار بیشتری از اون در رنگ نهایی استفاده می‌شه.

مشکل این فرمت اینه که نمی‌شه رنگ فعلی رو به راحتی تشخیص داد. مثلاً rgb(219,112,147) مربوط به چه رنگیه؟ درسته که میشه متوجه شد رنگ قرمز تقریباً 3 برابر رنگ‌های سبز و آبی استفاده شده، اما اینکه رنگ نهایی چی هست، خیلی سخته. همچنین ساخت نسخه‌های روشن‌تر یا تیره‌تر با استفاده از این فرمت اصلاً ساده نیست.

.rgb {
  color: rgb(219, 112, 147);
}

HSL​

این فرمت از سه قسمت تشکیل شده:

  • Hue: درجه در Color Wheel
  • Saturation: میزان استفاده از Hue
    • هر چقدر به صفر نزدیک‌تر باشه، بی‌رنگ‌تر (خاکستری‌تر) میشه
    • هر چقدر به 100 نزدیک‌تر باشه، رنگی‌تر میشه
  • Lightness: روشنایی
    • هر چقدر به صفر نزدیک‌تر باشه سیاه‌تر میشه
    • هر چقدر به 100 نزدیک‌تر باشه سفیدتر میشه

اگه Color Wheel و زاویه‌ی رنگ‌های اصلی رو حفظ کنید، راحت می‌تونید رنگی که با این فرمت ساخته می‌شه رو تشخیص بدید. حفظ کردن Color Wheel خیلی ساده‌تر از چیزیه که فکر می‌کنید؛ فقط کافیه رنگ‌های رنگین‌کمان رو بلد باشید:

  • قرمز: 0
  • نارنجی: 30
  • زرد: 60
  • سبز: 120
  • آبی: 180
  • نیلی: 240
  • بنفش: 270

Color Wheel Color Wheel

ایجاد قالب‌های رنگی با استفاده از این فرمت خیلی ساده‌ست:

  • از Hue می‌تونید برای تغییر رنگ پایه استفاده کنید و صرفاً با اضافه‌کردن 180 درجه، به رنگ مکمل می‌رسید؛
  • از Saturation می‌تونید برای تعیین مقدار روشنایی تو Light Mode و Dark Mode استفاده کنید؛
  • از Lightness می‌تونید برای ایجاد رنگ Stateهایی مثل Hover استفاده کنید.
:root {
  --color-primary-100: hsl(200deg 70% 90%);
  --color-primary-200: hsl(200deg 70% 80%);
  --color-primary-300: hsl(200deg 70% 70%);
  --color-primary-400: hsl(200deg 70% 60%);
  --color-primary-500: hsl(200deg 70% 50%);
  --color-primary-600: hsl(200deg 70% 40%);
  --color-primary-700: hsl(200deg 70% 30%);
  --color-primary-800: hsl(200deg 70% 20%);
  --color-primary-900: hsl(200deg 70% 10%);
}