CSS color-mix()

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

Adam Argyle

تابع 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);
}

این چیزی است که ما می خواهیم. انعطاف‌پذیری، قدرت و APIهای کاملاً برجسته. آن را دوست دارم.

ترکیب رنگ ها در CSS

CSS در یک فضای رنگی چندگانه و دنیای طیف رنگی وجود دارد و به همین دلیل تعیین فضای رنگی برای مخلوط کردن اختیاری نیست. علاوه بر این، فضاهای رنگی مختلف می توانند نتایج یک ترکیب را به شدت تغییر دهند، بنابراین دانستن تأثیرات یک فضای رنگی به شما کمک می کند تا به نتایج مورد نیاز خود برسید.

برای یک مقدمه تعاملی، این ابزار color-mix() را امتحان کنید: - اثرات هر فضای رنگی را کاوش کنید. - اثرات درونیابی رنگ را هنگام مخلوط کردن در یک فضای رنگی استوانه ای ( lch ، oklch ، hsl ، و hwb ) کاوش کنید. - رنگ های در حال مخلوط شدن را با کلیک کردن بر روی یکی از دو جعبه رنگ بالا تغییر دهید. - از نوار لغزنده برای تغییر نسبت اختلاط استفاده کنید. - کد CSS color-mix() در پایین موجود است.

اختلاط در فضاهای رنگی مختلف

فضای رنگی پیش‌فرض برای میکس (و گرادیان ) 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);