تابع color-mix یکی از ویژگی‌های جدید در CSS است که به توسعه‌دهندگان وب کمک می‌کند تا رنگ‌ها را به شکل دقیق‌تری با یکدیگر ترکیب کنند. این قابلیت به خصوص زمانی مفید است که قصد دارید طیف‌های رنگی جدیدی را براساس رنگ‌های موجود ایجاد کنید، بدون نیاز به استفاده از ابزارهای خارجی.
به جای اینکه به صورت دستی مقادیر رنگی (مثلاً RGB یا HSL) را محاسبه کنید، می‌توانید از color-mix برای ایجاد رنگ‌های میان‌جزئی یا حتی ترکیب کامل دو رنگ استفاده کنید.
این تابع از نظر ساختاری شباهت زیادی به توابع دیگر در CSS دارد و شما می‌توانید پارامترهایی را تعریف کنید که به CSS بگویید چگونه رنگ‌ها باید ترکیب شوند. مثلاً اگر می‌خواهید دو رنگ پایه را به نسبت‌های مختلف ترکیب کنید، color-mix دقیقاً برای همین کار است.
بیایید با یک مثال ساده شروع کنیم که چگونه می‌توانیم رنگ‌های آبی و زرد را با استفاده از color-mix ترکیب کنیم تا به یک طیف سبز برسیم. همچنین، نکاتی وجود دارد که باید به خاطر داشته باشیم، برای مثال هکثر مرورگرها هنوز از این ویژگی پشتیبانی نمی‌کنند و باید از پیشوندهای خاصی استفاده کرد.
مثال کاربردی از color-mix
div {
color: color-mix(in srgb, blue 50%, yellow 50%);
}
توضیح خط به خط مثال:
div: تعیین می‌کند که استایل به تگ‌های div در HTML اعمال می‌شود.
color: این ویژگی رنگ متن داخل عنصر را مشخص می‌کند.
color-mix: تابعی برای ترکیب دو رنگ مشخص.
in srgb: فضای رنگی که ترکیب در آن صورت می‌گیرد. اینجا srgb است، که فضای رنگی رایج برای وب است.
blue 50%: مشخص می‌کند که 50% از رنگ آبی در ترکیب نهایی حضور داشته باشد.
yellow 50%: مشخص می‌کند که 50% از رنگ زرد در ترکیب نهایی حضور داشته باشد.