CSS renk karışımı()

Adam Argyle

CSS color-mix() işlevi, desteklenen renk alanlarından herhangi birindeki renkleri doğrudan CSS'inizden karıştırmanıza olanak tanır.

color-mix() öncesinde geliştiriciler, bir rengi koyulaştırmak, açmak veya doygunluğunu azaltmak için CSS ön işlemcileri ya da renk kanallarında calc() kullanıyordu.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass, renk CSS spesifikasyonunun bir adım önünde olmak için harika bir iş çıkardı. Ancak CSS'de renkleri karıştırmanın gerçek bir yolu yoktu. Yaklaşmak için kısmi renk değerlerinin matematiğini yapmanız gerekir. CSS'nin günümüzde karıştırmayı nasıl simüle edebileceğine dair basitleştirilmiş bir örneği aşağıda bulabilirsiniz:

.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'e renkleri karıştırma özelliği getiriyor. Geliştiriciler, hangi renk alanında karıştırma yapacaklarını ve her rengin karışımda ne kadar baskın olacağını seçebilir.

.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);
}

İstediğimiz de bu. Esneklik, güç ve tam özellikli API'ler. Sevdiğiniz içerikleri

CSS'de renkleri karıştırma

CSS, birden fazla renk alanı ve renk gamı dünyasında mevcuttur. Bu nedenle, karıştırma için renk alanını belirtmek isteğe bağlı değildir. Ayrıca farklı renk uzayları, karışımın sonuçlarını önemli ölçüde değiştirebilir. Bu nedenle, bir renk uzayının etkilerini bilmek, istediğiniz sonuçları elde etmenize yardımcı olur.

Etkileşimli bir giriş için bu color-mix() aracını deneyin: - Her renk uzayının etkilerini keşfedin. - Silindirik bir renk uzayında (lch, oklch, hsl ve hwb) karıştırma yaparken ton interpolasyonunun etkilerini keşfedin. - Üstteki iki renk kutusundan birini tıklayarak karıştırılan renkleri değiştirin. - Karıştırma oranını değiştirmek için kaydırma çubuğunu kullanın. - Oluşturulan color-mix() CSS kodu alt kısımda yer alır.

Çeşitli renk uzaylarında karıştırma

Karıştırma (ve renk geçişleri) için varsayılan renk alanı oklab'dir. Tutarlı sonuçlar sağlar. Karışımı ihtiyaçlarınıza göre uyarlamak için alternatif renk uzayları da belirtebilirsiniz.

Örneğin, black ve white'yi ele alalım. Karıştırma yaptıkları renk alanı çok büyük bir fark yaratmaz, değil mi? Yanlış.

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);

Bunun büyük bir etkisi var.

Başka bir örnek olarak blue ve white'yı ele alalım. Bunu özellikle seçtim çünkü renk uzayının şeklinin sonuçları etkileyebileceği bir durum. Bu durumda, beyazdan maviye geçiş sırasında çoğu renk alanının mora dönmesi söz konusudur. Ayrıca, oklab renginin karıştırma için ne kadar güvenilir bir renk alanı olduğunu da gösterir. Bu renk, çoğu kişinin beyaz ve mavi karıştırma beklentisine (mor yok) en yakın renktir.

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() ile renk uzayının etkilerini öğrenmek, gradyan oluşturma konusunda da çok faydalı bir bilgidir. Color 4 söz dizimi, renk alanını belirtmek için gradyanlara da olanak tanır. Gradyan, bir alan üzerindeki karışımı gösterir.

.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);
}

"En iyi" renk alanının hangisi olduğunu merak ediyorsanız böyle bir renk alanı yoktur. Bu nedenle çok fazla seçenek sunuyoruz. "En iyi" renk uzayı olsaydı yeni renk uzayları da icat edilmezdi (oklch ve oklab bölümlerine bakın). Her renk uzayının parladığı ve doğru seçim olduğu benzersiz bir an olabilir.

Örneğin, canlı bir karışım sonucu istiyorsanız hsl veya hwb kullanın. Aşağıdaki demoda, iki canlı renk (magenta ve açık yeşil) karıştırılıyor. HSL ve HWB, canlı bir sonuç üretirken sRGB ve Oklab, doygun olmayan renkler üretiyor.

Tutarlılık ve incelik istiyorsanız oklab'ı kullanın. Mavi ve siyahı karıştıran aşağıdaki demoda, hsl ve hwb aşırı canlı ve tonu kaydırılmış renkler üretirken srgb ve oklab daha koyu bir mavi üretir.

color-mix() oyun alanında beş dakika geçirip farklı renkleri ve alanları test ettiğinizde her alanın avantajlarını anlamaya başlayacaksınız. Ayrıca, kullanıcı arayüzlerimizde renk uzaylarının potansiyeline uyum sağladıkça renk uzayları hakkında daha fazla rehberlik sunulacaktır.

Ton enterpolasyon yöntemini ayarlama

Silindirik bir renk alanında karıştırmayı seçtiyseniz (temelde bir açıyı kabul eden h renk tonu kanalına sahip herhangi bir renk alanı), enterpolasyonun shorter, longer, decreasing ve increasing olup olmayacağını belirtebilirsiniz. Daha fazla bilgi edinmek isterseniz bu konu HD Renk Kılavuzu'nda ayrıntılı olarak ele alınmıştır.

Aynı mavi-beyaz karışımı örneğini bu kez yalnızca silindirik alanlarda farklı ton interpolasyon yöntemleriyle görebilirsiniz.

Renk tonu interpolasyonunu görselleştirmeye yardımcı olmak için oluşturduğum başka bir Codepen'i burada bulabilirsiniz. Bu Codepen, özellikle gradyanlar için tasarlanmıştır. Bu sayede, ton interpolasyonu belirtildiğinde her renk uzayının karışım sonucunu nasıl ürettiğini anlayabilirsiniz.

Farklı renk söz dizimleriyle karıştırma

Şimdiye kadar çoğunlukla blue ve white gibi CSS adlandırılmış renklerini karıştırdık. CSS renk karıştırma, iki farklı renk alanındaki renkleri karıştırmaya hazırdır. Bu nedenle, karıştırma için renk alanını belirtmek önemlidir. Çünkü bu, iki renk aynı alanda olmadığında ortak alanı belirler.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

Yukarıdaki örnekte, hsl ve display-p3 değerleri oklch değerine dönüştürülüp karıştırılır. Oldukça havalı ve esnek.

Karıştırma oranlarını ayarlama

Şimdiye kadarki örneklerin çoğunda gösterildiği gibi, her karıştırmada her renkten eşit miktarda kullanmak isteme olasılığınız düşüktür. İyi haber, sonuçta ortaya çıkan karışımda her rengin ne kadar görünmesi gerektiğini ifade eden bir söz dizimi var.

Bu konuya başlamak için, hepsi eşdeğer olan (ve spesifikasyona uygun) karışımların bir örneğini aşağıda bulabilirsiniz:

.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%);
}

Bu örneklerin, uç durumları iyi bir şekilde açıkladığını düşünüyorum. İlk örnekler grubunda, %50'nin zorunlu olmadığı ancak isteğe bağlı olarak belirtilebileceği gösterilmektedir. Son örnekte, oranlar toplandığında% 100'ü aşarsa toplam %100 olacak şekilde eşit olarak sınırlandırıldıkları ilginç bir durum gösterilmektedir.

Yalnızca bir renk için oran belirtilirse diğer rengin oranının %100'den kalan miktar olduğu varsayılır. Bu davranışı daha iyi açıklamak için birkaç örnek daha verelim.

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 */

Bu örnekler iki kuralı göstermektedir: 1. Oranlar %100'ü aştığında sıkıştırılır ve eşit olarak dağıtılır. 1. Yalnızca bir oran sağlandığında diğer renk, bu oranın 100'den çıkarılmasıyla elde edilen değere ayarlanır.

Son kural biraz daha az belirgindir. Her iki renk için de yüzdeler sağlanırsa ve toplamları %100'e ulaşmazsa ne olur?

color-mix(in lch, purple 20%, plum 20%)

color-mix() kombinasyonu şeffaflık, 40% şeffaflık sağlar. Oranların toplamı %100'e ulaşmadığında, elde edilen karışım opak olmaz. Renklerin hiçbiri tamamen karışmaz.

color-mix() iç içe yerleştiriliyor

Tüm CSS'lerde olduğu gibi iç içe yerleştirme de iyi ve beklendiği gibi işlenir. İç işlevler önce çözümlenir ve değerlerini üst bağlama döndürür.

color-mix(in lch, purple 40%, color-mix(plum, white))

İstediğiniz sonuca ulaşmak için istediğiniz kadar iç içe yerleştirme yapabilirsiniz.

Açık ve koyu renk şeması oluşturma

color-mix() ile renk şemaları oluşturalım.

Temel renk şeması

Aşağıdaki CSS'de, bir markanın onaltılık rengine göre açık ve koyu tema oluşturulur. Açık tema, iki koyu mavi metin rengi ve çok açık beyaz bir arka plan yüzey rengi oluşturur. Ardından, koyu tercihli bir medya sorgusunda özel özelliklere yeni renkler atanır. Böylece arka plan koyu, metin renkleri ise açık olur.

: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);
  }
}

Tüm bunlar, marka rengine beyaz veya siyah karıştırılarak yapılır.

Orta seviye renk şeması

Açık ve koyu temalardan daha fazlasını ekleyerek bu özelliği bir adım öteye taşıyabilirsiniz. Aşağıdaki demoda, radyo grubunda yapılan değişiklikler HTML etiketindeki bir özelliği [color-scheme="auto"] günceller. Bu da seçicilerin bir renk temasını koşullu olarak uygulamasına olanak tanır.

Bu orta düzey demo, tüm tema renklerinin :root içinde listelendiği bir renk teması tekniğini de gösterir. Bu sayede tümünü bir arada görmek ve gerekirse ayarlamak kolaylaşır. Stil sayfasının ilerleyen bölümlerinde, değişkenleri tanımlandıkları şekilde kullanabilirsiniz. Tüm renkler ilk :root bloğunda yer aldığından, renk değişiklikleri için stil sayfasında arama yapmanıza gerek kalmaz.

Diğer ilginç kullanım alanları

Ana Tudor, çalışma için birkaç kullanım alanını içeren harika bir demo hazırladı:

Geliştirici Araçları ile color-mix()'te hata ayıklama

Chrome Geliştirici Araçları, color-mix() için mükemmel destek sunar. Söz dizimini tanıyıp vurgular, Stiller bölmesindeki stilin hemen yanında karışımın önizlemesini oluşturur ve alternatif renkler seçmenize olanak tanır.

Geliştirici Araçları'nda şuna benzer bir görünüm elde edersiniz:

Herkese iyi mix'ler!