تابع CSS color-mix()
به شما امکان می‌دهد رنگ‌ها را در هریک از فضاهای رنگی پشتیبانی‌شده مستقیماً از CSS خود ترکیب کنید.
قبل‌از color-mix()، توسعه‌دهندگان برای تیره کردن، روشن کردن، یا کاهش اشباع رنگ، از پیش‌پردازنده‌های CSS یا
calc() در کانال‌های رنگ استفاده می‌کردند.
.color-mixing-with-sass { /* Sass: equally mix red with white */ --red-white-mix: color.mix(red, white); }
Sass کار بزرگی انجام داده است و از مشخصات CSS رنگ جلوتر است. بااین‌حال، روشی واقعی برای ترکیب رنگ‌ها در CSS وجود نداشته است. برای نزدیک شدن به آن باید محاسبات ریاضی مقادیر رنگی جزئی را انجام دهید. در اینجا نمونه‌ای ساده‌شده از نحوه شبیه‌سازی ترکیب توسط CSS درحال‌حاضر آورده شده است:
.color-mixing-with-vanilla-css-before { --lightness: 50%; --red: hsl(0 50% var(--lightness)); /* add "white" to red by adding 25% to the lightness channel */ --lightred: hsl(0 50% calc(var(--lightness) + 25%); }
color-mix() قابلیت ترکیب رنگ‌ها را به CSS می‌آورد. توسعه‌دهندگان می‌توانند انتخاب کنند که در کدام فضای رنگی ترکیب کنند و هر رنگ در ترکیب چقدر غالب باشد.
.color-mixing-after { /* equally mix red with white */ --red-white-mix: color-mix(in oklab, red, white); /* equally mix red with white in srgb */ --red-white-mix-srgb: color-mix(in srgb, red, white); }
این چیزی است که می‌خواهیم. میاناهای برنامه‌سازی کاربردی انعطاف‌پذیر، قدرتمند، و دارای ویژگی‌های کامل. خیلی عالی.
ترکیب رنگ‌ها در CSS
«سرویس مقایسه قیمت» در دنیای فضای رنگ و گستره رنگ چندگانه وجود دارد، و به همین دلیل مشخص کردن فضای رنگ برای ترکیب کردن اختیاری نیست. علاوه‌براین، فضاهای رنگی مختلف می‌توانند نتایج یک ترکیب را به‌شدت تغییر دهند، بنابراین آگاهی از تأثیرات یک فضای رنگی به شما کمک می‌کند نتایج موردنیاز خود را به‌دست آورید.
برای آشنایی تعاملی، این ابزار color-mix() را امتحان کنید:
- جلوه‌های هر فضای رنگ را کاوش کنید.
- هنگام ترکیب در فضای رنگ استوانه‌ای (lch، oklch، hsl، و hwb)، جلوه‌های میان‌یابی رنگ را کاوش کنید.
- با کلیک کردن روی هریک از دو چارگوش رنگ بالایی، رنگ‌های ترکیبی را تغییر دهید.
- از لغزنده برای تغییر نسبت ترکیب استفاده کنید.
- کد color-mix() CSS تولیدشده در پایین دردسترس است.
ترکیب کردن در فضاهای رنگی مختلف
فضای رنگ پیش‌فرض برای ترکیب (و گرادیان‌ها) oklab است. نتایج
ثابتی ارائه می‌دهد. همچنین می‌توانید فضاهای رنگی جایگزین را مشخص کنید تا ترکیب را متناسب با نیازهایتان سفارشی‌سازی کنید.
black و white را درنظر بگیرید. فضای رنگی که در آن ترکیب می‌شوند
تفاوت چندانی ایجاد نمی‌کند، درست است؟ اشتباه است.
color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);
تأثیر زیادی دارد!
برای مثال، blue و white را درنظر بگیرید. این را به‌طور خاص انتخاب کردم زیرا
موردی است که شکل فضای رنگ می‌تواند بر نتایج تأثیر بگذارد. در این مورد،
این است که اکثر فضاهای رنگی هنگام حرکت از سفید به آبی به بنفش می‌روند. همچنین نشان می‌دهد که چرا oklab فضای رنگی قابل‌اعتمادی برای ترکیب است، زیرا به انتظارات اکثر افراد از ترکیب سفید و آبی (بدون بنفش) نزدیک‌تر است.
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
یادگیری تأثیرات فضای رنگی با color-mix() دانش بسیار خوبی برای
ساختن گرادیان
نیز هست. نحو Color 4 همچنین به گرادیان‌ها اجازه می‌دهد فضای رنگ را مشخص کنند، جایی که
گرادیان ترکیب را در یک ناحیه از فضا نشان می‌دهد.
.black-to-white-gradient-in-each-space {
--srgb: linear-gradient(to right in srgb, black, white);
--srgb-linear: linear-gradient(to right in srgb-linear, black, white);
--lab: linear-gradient(to right in lab, black, white);
--oklab: linear-gradient(to right in oklab, black, white);
--lch: linear-gradient(to right in lch, black, white);
--oklch: linear-gradient(to right in oklch, black, white);
--hsl: linear-gradient(to right in hsl, black, white);
--hwb: linear-gradient(to right in hwb, black, white);
--xyz: linear-gradient(to right in xyz, black, white);
--xyz-d50: linear-gradient(to right in xyz-d50, black, white);
--xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}
اگر می‌خواهید بدانید کدام فضای رنگی «بهترین» است، باید بگوییم که هیچ‌کدام. به‌همین دلیل
گزینه‌های زیادی وجود دارد! اگر یکی از آن‌ها «بهترین» بود، فضاهای رنگی جدیدی هم
ابداع نمی‌شد (oklch و oklab را ببینید). هر فضای رنگی می‌تواند لحظه منحصربه‌فردی برای درخشش داشته باشد و انتخاب مناسبی باشد.
برای مثال، اگر نتیجه ترکیبی پرطراوت می‌خواهید، از hsl یا hwb استفاده کنید. در نمونه نمایشی زیر، دو رنگ زنده (سرخابی و لیمویی) با هم ترکیب شده‌اند و هم hsl و هم hwb نتیجه‌ای زنده تولید می‌کنند، درحالی‌که srgb و oklab رنگ‌های غیر اشباع تولید می‌کنند.
اگر می‌خواهید رنگ‌ها یکنواخت و ملایم باشند، از oklab استفاده کنید. در نسخه نمایشی زیر که آبی و سیاه را ترکیب می‌کند، hsl و hwb رنگ‌های بیش‌ازحد زنده و تغییریافته تولید می‌کنند، درحالی‌که srgb و oklab آبی تیره‌تری تولید می‌کنند.
پنج دقیقه را در زمین بازی color-mix() بگذرانید و رنگ‌ها و فضاهای مختلف را آزمایش کنید تا با مزایای هر فضا آشنا شوید. همچنین انتظار می‌رود که با تطبیق همه ما با پتانسیل‌های فضاهای رنگی در رابط‌های کاربری، راهنمایی‌های بیشتری درباره فضاهای رنگی ارائه شود.
درحال تنظیم روش درونیابی رنگ‌مایه
اگر انتخاب کرده‌اید که در فضای رنگ استوانه‌ای ترکیب کنید، اساساً هر فضای رنگی با کانال فام h که زاویه را می‌پذیرد، می‌توانید مشخص کنید که آیا درونیابی shorter، longer، decreasing، و increasing باشد. اگر می‌خواهید بیشتر بدانید، این موضوع به‌خوبی در این راهنمای رنگ HD پوشش داده شده است.
در اینجا همان مثال ترکیب آبی به سفید را داریم، اما این بار، فقط در فضاهای استوانه‌ای با روش‌های درونیابی رنگ متفاوت است.
این Codepen دیگری است که برای کمک به تجسم درونیابی فام ساخته‌ام، اما به‌طور خاص برای گرادیان‌ها. فکر می‌کنم این به شما کمک می‌کند بفهمید که چگونه هر فضای رنگی نتیجه ترکیب خود را هنگام مشخص شدن درونیابی فام تولید می‌کند، آن را مطالعه کنید!
ترکیب کردن با نحوهای رنگی مختلف
تاکنون بیشتر رنگ‌های نام‌گذاری‌شده CSS را ترکیب کرده‌ایم، مثل blue و white. ترکیب رنگ CSS آماده است تا رنگ‌هایی را که از دو فضای رنگی متفاوت هستند ترکیب کند. این یکی دیگر از دلایلی است که تعیین فضای رنگ برای ترکیب بسیار مهم است، زیرا فضای مشترکی را برای زمانی که دو رنگ در یک فضا نیستند، تعیین می‌کند.
color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));
در مثال قبلی، hsl و display-p3 به oklch
تبدیل می‌شوند و سپس ترکیب می‌شوند. خیلی جالب و انعطاف‌پذیر است.
تنظیم نسبت‌های ترکیب
احتمالاً هربار که رنگ‌ها را مخلوط می‌کنید، نمی‌خواهید مقدار مساوی از هر رنگ داشته باشید، همان‌طور که بیشتر مثال‌های قبلی نشان دادند. خبر خوب اینکه برای بیان اینکه چه مقدار از هر رنگ باید در ترکیب حاصل دیده شود، نحو وجود دارد.
برای شروع این موضوع، در اینجا نمونه‌ای از ترکیب‌ها آورده شده است که همگی معادل هستند (و از مشخصات):
.ratios-syntax-examples {
/* omit the percentage for equal mixes */
color: color-mix(in lch, purple, plum);
color: color-mix(in lch, plum, purple);
/* percentage can go on either side of the color */
color: color-mix(in lch, purple 50%, plum 50%);
color: color-mix(in lch, 50% purple, 50% plum);
/* percentage on just one color? other color gets the remainder */
color: color-mix(in lch, purple 50%, plum);
color: color-mix(in lch, purple, plum 50%);
/* percentages > 100% are equally clamped */
color: color-mix(in lch, purple 80%, plum 80%);
/* above mix is clamped to this */
color: color-mix(in lch, purple 50%, plum 50%);
}
به‌نظرم این مثال‌ها موارد حاشیه‌ای را به‌خوبی روشن می‌کند. مجموعه اول مثال‌ها نشان می‌دهد که ۵۰٪ الزامی نیست اما می‌توان آن را به‌صورت اختیاری مشخص کرد. آخرین مثال مورد جالبی را نشان می‌دهد که در آن نسبت‌ها هنگام جمع شدن از ۱۰۰٪ فراتر می‌روند، آن‌ها به‌طور مساوی محدود می‌شوند تا مجموعاً ۱۰۰٪ شوند.
همچنین توجه داشته باشید که اگر فقط یک رنگ نسبت را مشخص کند، فرض می‌شود که رنگ دیگر باقیمانده تا ۱۰۰٪ است. در اینجا چند مثال دیگر برای کمک به توضیح این رفتار آورده شده است.
color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */
این مثال‌ها دو قانون را نشان می‌دهند: ۱. وقتی نسبت‌ها از ۱۰۰٪ فراتر می‌روند، محدود می‌شوند و به‌طور مساوی توزیع می‌شوند. ۱. وقتی فقط یک نسبت ارائه شود، رنگ دیگر روی ۱۰۰ منهای آن نسبت تنظیم می‌شود.
قانون آخر کمی کمتر واضح است؛ اگر درصدها برای هر دو رنگ ارائه شود و مجموع آن‌ها به ۱۰۰٪ نرسد، چه اتفاقی می‌افتد؟
color-mix(in lch, purple 20%, plum 20%)
این ترکیب color-mix() منجر به شفافیت، 40% شفافیت می‌شود.
وقتی نسبت‌ها به ۱۰۰٪ نمی‌رسند، ترکیب حاصل مات نخواهد بود.
هیچ‌یک از رنگ‌ها به‌طور کامل ترکیب نخواهند شد.
آشیانه‌سازی color-mix()
مانند همه CSS، تودرتو کردن به‌خوبی و طبق انتظار انجام می‌شود؛ توابع داخلی ابتدا حل می‌شوند و مقادیر خود را به بافت والد برمی‌گردانند.
color-mix(in lch, purple 40%, color-mix(plum, white))
هرچقدر که لازم است آزادانه تو در تو کنید تا به نتیجه‌ای که می‌خواهید برسید.
ساختن آرایش رنگ‌های روشن و تیره
بیایید با color-mix() آرایش رنگ‌ها بسازیم!
آرایش رنگ‌های اصلی
در CSS زیر، زمینه روشن و تیره براساس رنگ هگز نمانام ایجاد شده است. زمینه روشن دو رنگ نوشتار آبی تیره و یک رنگ سطح پس‌زمینه سفید بسیار روشن ایجاد می‌کند. سپس در پُرسمان رسانه‌ای اولویت تاریک، خواص سفارشی رنگ‌های جدیدی را دریافت می‌کنند تا پس‌زمینه تاریک و رنگ‌های نوشتار روشن شوند.
:root {
/* a base brand color */
--brand: #0af;
/* very dark brand blue */
--text1: color-mix(in oklab, var(--brand) 25%, black);
--text2: color-mix(in oklab, var(--brand) 40%, black);
/* very bright brand white */
--surface1: color-mix(in oklab, var(--brand) 5%, white);
}
@media (prefers-color-scheme: dark) {
:root {
--text1: color-mix(in oklab, var(--brand) 15%, white);
--text2: color-mix(in oklab, var(--brand) 40%, white);
--surface1: color-mix(in oklab, var(--brand) 5%, black);
}
}
همه این‌ها با ترکیب کردن سفید یا سیاه در رنگ نمانام انجام می‌شود.
آرایش رنگ‌های متوسط
با افزودن زمینه‌هایی غیراز زمینه روشن و تیره، می‌توان این کار را یک گام فراتر برد. در
نمونه نمایشی زیر، تغییرات در گروه دکمه رادیویی یک ویژگی را در برچسب HTML
[color-scheme="auto"] به‌روز می‌کند که سپس انتخابگرها را قادر می‌سازد تا
یک مضمون رنگ را به‌صورت شرطی اعمال کنند.
این نسخه نمایشی متوسط همچنین تکنیک زمینه‌سازی رنگ را نشان می‌دهد که در آن همه
رنگ‌های زمینه در :root فهرست شده‌اند. این کار باعث می‌شود همه آن‌ها را به‌راحتی باهم ببینید و
درصورت نیاز اصلاح کنید. بعداً در برگه سبک نگارش، می‌توانید از متغیرها همان‌طور که تعریف شده‌اند استفاده کنید. این کار باعث می‌شود که برای دستکاری رنگ‌ها نیازی به جستجو در برگه‌سبک نباشد، زیرا همه آن‌ها در بلوک اولیه :root قرار دارند.
موارد استفاده جالب‌تر
آنا تودور نسخه نمایشی عالی‌ای با چند مورد استفاده برای مطالعه دارد:
عیب‌یابی کردن color-mix() با DevTools
Chrome DevTools پشتیبانی عالی‌ای از color-mix() دارد. این ابزار نحو را تشخیص می‌دهد و برجسته می‌کند، پیش‌نمایشی از ترکیب را درست در کنار سبک در پانل «سبک‌ها» ایجاد می‌کند، و امکان انتخاب رنگ‌های جایگزین را فراهم می‌کند.
در DevTools چیزی شبیه این خواهد بود:
میکس خوبی داشته باشید!