تابع color-mix() و رنگ نسبی در CSS: هاور، نسخه روشن‌تر و شفافیت

تابع color-mix() چطور کار می‌کند

تابع color-mix() یک فضای رنگی و دو رنگ با درصدهای اختیاری می‌گیرد و رنگ میان آن‌ها را برمی‌گرداند. عبارت color-mix(in oklab, var(--brand) 90%, black) یعنی 90% رنگ برند و 10% سیاه، ترکیب‌شده در Oklab. اگر فقط یک درصد بدهید، رنگ دیگر باقی‌مانده را می‌گیرد. اگر هیچ درصدی ندهید، سهم هرکدام 50% است.

مرورگر نتیجه را هنگام اجرا حساب می‌کند، پس با متغیرهای سفارشی (custom properties)، currentColor و تغییر تم کار می‌کند. توابع Sass فقط یک بار هنگام بیلد اجرا می‌شوند و مقدارهای var() را نمی‌بینند.

اگر جمع دو درصد کمتر از 100% باشد، نتیجه تا حدی شفاف هم می‌شود: color-mix(in srgb, red 30%, blue 30%) ترکیبی مساوی با کدری 60% است. جمع را روی 100% نگه دارید، مگر اینکه دقیقاً همین را بخواهید.

.button {
    --brand: #2563eb;
    background: var(--brand);
}

.button:hover {
    background: color-mix(in oklab, var(--brand) 90%, black);
}

.badge {
    background: color-mix(in oklab, var(--brand) 10%, white);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

در کدام فضای رنگی ترکیب کنیم: srgb، oklab یا oklch

فضای رنگی بیش از آنچه بیشتر افراد انتظار دارند نتیجه را تغییر می‌دهد. در زیر، آبی خالص #0000ff به نسبت 50/50 با زرد خالص #ffff00 ترکیب شده است، با همان محاسباتی که مرورگر انجام می‌دهد.

در srgb میانگین کانال‌ها دقیقاً 128، 128، 128 می‌شود: نتیجه #808080 است، خاکستری‌ای با کرومای صفر. Oklab هم در امتداد یک خط راست ترکیب می‌کند و آبی و زرد در دو طرف مقابل آن قرار دارند، پس تا حد زیادی همدیگر را خنثی می‌کنند و به یک آبی خاکستری کدر می‌رسند. اما Oklch زاویه فام را درون‌یابی می‌کند و مسیر کوتاه‌تر از 264° به 110° را می‌رود؛ پس نقطه میانی یک سبزآبی زنده با فام 187° است که کرومای هر دو رنگ ورودی را حفظ می‌کند.

• آبی #0000ff#0000ff
• زرد #ffff00#ffff00
• در srgb: #808080#808080
• در oklab: #6cabc7#6cabc7
• در oklch: #00bdb0#00bdb0

جفت دوم رنگ‌های #2563eb و #facc15 از Tailwind است. نتیجه‌های oklch بیرون از sRGB هستند؛ برای همین کروما پیش از نگاشت گاموت نشان داده شده و کد HEX نزدیک‌ترین رنگی است که صفحه sRGB می‌تواند نشان دهد.

دو نکته جلب توجه می‌کند. srgb روی روشنایی 0.600 می‌نشیند، در حالی که نقطه میانی ادراکی بین آبی (0.452) و زرد (0.968) برابر 0.710 است: این همان میانه تیره و گل‌آلود گرادیان‌های srgb است. و فقط oklch ترکیب را زنده نگه می‌دارد، به این قیمت که از فامی عبور می‌کند که هیچ‌کدام از دو رنگ ورودی ندارند.

قاعده سرانگشتی: برای نسخه‌های روشن‌تر، تیره‌تر و حالت هاور در oklab ترکیب کنید، جایی که روی یک فام می‌مانید و گام‌های روشنایی یکنواخت می‌خواهید. وقتی هر دو رنگ پراشباع‌اند و نتیجه پراشباع می‌خواهید، در oklch ترکیب کنید. برای شفافیت در srgb ترکیب کنید، چون با روش مرورگر در روی هم گذاشتن لایه‌ها یکی است.

نمونه کدها: هاور، نسخه روشن‌تر و نسخه شفاف

همه مقدارهای زیر #2563eb را به‌عنوان --brand به کار می‌برند. متن سفید روی آن نسبت کنتراست 5.17:1 دارد.

ترکیب با 10% سیاه در oklab بیشتر از srgb تیره می‌کند: کنتراست متن سفید به 6.50:1 می‌رسد، در برابر 6.11:1. وقتی رنگ دوم سیاه یا سفید باشد، oklab و oklch نتیجه یکسانی می‌دهند، چون این دو رنگ فامی برای درون‌یابی ندارند.

مراقب نسخه‌های روشن باشید. متن به رنگ برند روی سفید 5.17:1 است، روی نسخه روشن 10% برابر 4.51:1 و روی نسخه روشن 20% فقط 3.95:1، که برای متن معمولی در WCAG AA رد می‌شود. اگر متن به رنگ برند را روی پس‌زمینه روشن همان برند می‌گذارید، برای متن از رنگ هاور استفاده کنید.

ترکیب با transparent خود رنگ را نگه می‌دارد و فقط آلفا را کم می‌کند، چون مرورگر مقدارهای پیش‌ضرب‌شده (premultiplied) را ترکیب می‌کند. نتیجه با آنچه پشتش قرار دارد هماهنگ می‌شود: همان قاعده روی سفید شبیه #d3e0fb است و روی سطح تیره #0f172a شبیه #132651. نسخه‌ای که با سفید ترکیب شده روی صفحه تیره همچنان رنگ‌پریده می‌ماند؛ پس برای کامپوننت‌هایی که در هر دو تم ظاهر می‌شوند، نسخه شفاف معمولاً انتخاب بهتری است.

سینتکس رنگ نسبی: تغییر یک کانال

سینتکس رنگ نسبی یک رنگ موجود را می‌گیرد، آن را به کانال‌هایش تجزیه می‌کند و اجازه می‌دهد هرکدام را با calc() بازنویسی کنید. در oklch(from var(--brand) l c h)، کلیدواژه‌های l، c و h روشنایی (0 تا 1)، کروما و فام --brand را در خود دارند.

برخلاف color-mix()، این روش دقیقاً یک ویژگی را تغییر می‌دهد: روشنایی را بدون دست زدن به کروما کم کنید، فام را بدون تغییر روشنایی بچرخانید یا به رنگی که به‌صورت HEX ذخیره شده آلفا اضافه کنید.

:root {
    --brand: #2563eb;
    --brand-hover: oklch(from var(--brand) calc(l - 0.08) c h);
    --brand-muted: oklch(from var(--brand) l calc(c * 0.5) h);
    --brand-ring: oklch(from var(--brand) l c h / 0.4);
    --accent: oklch(from var(--brand) l c calc(h + 30));
}

به چهار ردیفی نگاه کنید که l را نگه می‌دارند: تغییر کروما یا فام کنتراست متن سفید را فقط بین 4.95:1 و 5.46:1 جابه‌جا می‌کند، در برابر 5.17:1 برای رنگ اصلی. کنتراست را روشنایی تعیین می‌کند، پس نسخه‌هایی با فام دیگر که این‌طور ساخته می‌شوند تقریباً همان دسترس‌پذیری را حفظ می‌کنند. رنگ‌های روشن‌تر و مکمل با کرومای کامل بیرون از sRGB هستند و مرورگر آن‌ها را به نزدیک‌ترین رنگی که می‌تواند نشان دهد نگاشت می‌کند.

مقایسه color-mix()، رنگ‌های نسبی و darken() در Sass

وقتی به «کمی سیاه» یا «کمی شفافیت» فکر می‌کنید، از color-mix() استفاده کنید. وقتی به کانال‌ها فکر می‌کنید، یعنی «همین رنگ، 0.1 تیره‌تر»، از سینتکس رنگ نسبی استفاده کنید. هر دو جای بیشتر توابع رنگ Sass را می‌گیرند و بدون بیلد دوباره همراه با تغییر تم به‌روز می‌شوند.

چرا darken() در Sass گام‌های ناهموار می‌دهد

darken($color, 10%) ده واحد از روشنایی HSL کم می‌کند. روشنایی HSL همان روشنایی ادراکی نیست، پس تغییری که دیده می‌شود به فام بستگی دارد. در جدول زیر darken(10%) در کنار oklch(from … calc(l - 0.1) c h) روی چهار رنگ رایج رابط کاربری آمده است، اندازه‌گیری‌شده با ΔE OK که در آن حدود 0.02 کوچک‌ترین تفاوتی است که چشم می‌بیند.

همان darken(10%) سبز را 1.7 برابر بیشتر از آبی تغییر می‌دهد. نسخه OKLCH برای همه فام‌ها بین 0.089 و 0.101 می‌ماند؛ این پراکندگی کم از نگاشت گاموت می‌آید، چون برخی رنگ‌های تیره‌تر کمی بیرون از sRGB می‌افتند. خود Sass هم به‌جای darken() استفاده از color.adjust() یا color.scale() را توصیه می‌کند و در CSS خالص به هیچ‌کدام نیازی ندارید.

پشتیبانی مرورگرها و مقدار جایگزین

تابع color-mix() در Chrome و Edge 111، Safari 16.2 و Firefox 113 کار می‌کند که همه در سال 2023 منتشر شدند. سینتکس رنگ نسبی در Chrome و Edge 119 و Firefox 128 آمد؛ Safari نسخه اولیه آن را در 16.4 و سینتکس فعلی را در Safari 18 عرضه کرد. همه مرورگرهای فعلی از هر دو پشتیبانی می‌کنند.

ترفند رایج، یعنی گذاشتن یک مقدار ساده در خط قبل، وقتی مقدار جدید شامل var() باشد کار نمی‌کند. اعلانی که var() دارد همیشه هنگام تجزیه پذیرفته می‌شود؛ پس مرورگر خط جایگزین شما را کنار می‌گذارد و اگر نتواند color-mix() را حساب کند، به مقدار ارث‌برده یا اولیه برمی‌گردد. به‌جای آن، نسخه مدرن را درون @supports بگذارید.

.button:hover {
    background: #1f55cc;
}

@supports (color: color-mix(in oklab, red, blue)) {
    .button:hover {
        background: color-mix(in oklab, var(--brand) 90%, black);
    }
}

@supports (color: oklch(from red l c h)) {
    .badge {
        border-color: oklch(from var(--brand) l c h / 0.3);
    }
}

پرسش و پاسخ