رنگ‌های نسبی در CSS

مفهوم رنگ‌های نسبی در CSS

وقتی صحبت از رنگ در CSS می‌کنیم، معمولاً به رنگ‌های ثابت مثل قرمز یا آبی فکر می‌کنیم. اما در CSS روش‌های پیشرفته‌تری برای تعیین رنگ وجود دارد که به آن‌ها رنگ‌های نسبی می‌گویند. این رنگ‌ها به شما این امکان را می‌دهند که بر اساس رنگ‌های دیگر موجود در صفحه، رنگ‌های خود را تعریف کنید. این قابلیت برای ایجاد زنجیره‌های رنگی پویا و واکنش‌گرا بسیار مفید است.

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

چرا از رنگ‌های نسبی استفاده کنیم؟

استفاده از رنگ‌های نسبی نه تنها باعث انعطاف‌پذیری بیشتر طراحی می‌شود، بلکه مدیریت رنگ‌ها را نیز ساده‌تر می‌کند. با تغییر یک رنگ پایه، تمامی رنگ‌های وابسته به آن به صورت خودکار تغییر خواهند کرد. این امر در پروژه‌های بزرگ که نیاز به تغییرات مکرر دارند، یک ویژگی مهم به شمار می‌رود.

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

نحوه استفاده از رنگ‌های نسبی در CSS

در CSS، شما می‌توانید با استفاده از توابعی مثل color-mix() یا color-contrast() رنگ‌های نسبی تعریف کنید. گرچه این توابع هنوز به طور گسترده پشتیبانی نمی‌شوند، اما مفهومی از رنگ‌های پویا و نسبی را به خوبی به نمایش می‌گذارند.

مثال‌هایی از کد برای رنگ‌های نسبی

body {
  --main-bg-color: #3498db;
  --main-text-color: color-contrast(var(--main-bg-color) contrast- text);
}

header {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

footer {
  background-color: color-mix(in oklab, var(--main-bg-color) 40%, white 60%);
}

توضیحات خط به خط کد