CSS renk karışımı()

Adam Argyle

CSS color-mix() fonksiyonunu kullanarak, desteklenen renk alanlarından herhangi birinde renkleri doğrudan CSS'nizden karıştırabilirsiniz.

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 16.2

Kaynak

color-mix() tarihinden önce geliştiriciler, bir rengi daha koyu, daha açık veya solgun hale getirmek için CSS ön işlemcileri veya Renkli üzerinde calc() kanallar.

SCSS ile daha önce

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

Sass çok başarılı oldu bir ürün geliştirmenize yardımcı oluyor. Ancak hiç renk karıştırmanın gerçek bir yoludur. Yaklaşmak için kısmi denklemi yapmanız gerekir renk değerleri. CSS'nin şu anda karıştırmayı nasıl simüle edebileceğine dair daha düşük bir örneği aşağıda bulabilirsiniz:

HSL ile önce

.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() şunları getirir: renkleri CSS'ye karıştırma olanağı. Geliştiriciler hangi renk alanını karıştıracaklarını seçebilir ve bu sırada her bir rengin ne kadar baskın olması gerektiğini belirleyebilirsiniz.

Sonra

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

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

CSS'de renkleri karıştırma

CSS birden fazla renk alanında ve renk gamı dünyasında bulunur ve bu nedenle karıştırma için renk alanının belirtilmesi isteğe bağlı değildir. Dahası, farklı renk alanları, bir karışımın sonuçlarını önemli ölçüde değiştirebilir; bu nedenle, renk alanı eklemek, istediğiniz sonuçları elde etmenize yardımcı olur.

Etkileşimli tanıtım için bu color-mix() aracını deneyin: - Her bir renk alanının etkilerini keşfedin. - Silindir bir renge karıştırırken ton interpolasyonunun etkilerini keşfetme boşluk (lch, oklch, hsl ve hwb). - Ü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şturulmuş color-mix() CSS kodu en altta bulunmaktadır.

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

Karıştırma (ve gradyanlar) için varsayılan renk alanı oklab değerine sahiptir. Sağlar tutarlı sonuçlar sağlar. gereksinimlerinize göre değişiyor.

black ve white örneğine bakalım. Birleştirdikleri renk alanı büyük bir fark oluşturuyor, 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);

.

Demoyu deneyin

Bunun muazzam bir etkisi var!

Başka bir örnek için blue ve white örneğine bakalım. Bunu seçmemin sebebi, bir renk alanının şeklinin sonuçları etkileyebileceği bir durumdur. Bu durumda beyazdan maviye doğru giderken çoğu renk alanı mor olur. Google oklab özelliğinin karıştırma açısından nasıl güvenilir bir renk alanı olduğunu da gösteriyor. mavi ile maviyi (mor değil) bir araya getirme konusundaki beklentilerine en yakın.

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

.

Demoyu deneyin

color-mix() kullanarak renk alanının etkilerini öğrenmek, gradyan oluşturma çok önemlidir. Renk 4 söz dizimi, renk geçişlerinin renk alanını belirtmesine de olanak tanır. Burada bir gradyan, karışımı bir alan üzerinde 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);
}

.

Demoyu deneyin

Hangi renk alanının "en iyi" olduğunu merak ediyorsanız Hepsi bu değil. Bu nedenle çok fazla seçenek var! Yeni renk alanları da olmayacaktır; biri (bkz. oklch ve oklab) olup olmadığını kontrol edin. Her bir renk ışıldamak ve doğru seçim olmak için benzersiz bir an olabilir.

Örneğin, canlı bir mix sonucu istiyorsanız hsl veya hwb kullanın. Sonraki demo, iki canlı renk (macenta ve misket limonu) karışık olarak sunuluyor ve hsl ile hwb hem canlı sonuç verir hem de sren ve oklab doymamış renkler üretir.

Demoyu deneyin

Tutarlılık ve incelik istiyorsanız oklab'i kullanın. Aşağıdaki demoda mavi ve siyah, hsl ve hwb fazla canlı ve ton değişimli renkler üretir. sEmail ve oklab daha koyu mavi verir.

Demoyu deneyin

Farklı renkleri test ederek color-mix() oyun alanında beş dakika geçirin ayıracak ve her bir alanın avantajları hakkında fikir edinmeye başlayacaksınız. Ayrıca hepimiz renklere uyum sağladıkça renk alanları konusunda daha fazla yol gösterici geliştirdiğimizden emin olmak istiyoruz.

Ton interpolasyon yöntemini ayarlama

Silindir şeklinde bir renk alanında, aslında herhangi bir renkten bir açıyı kabul eden h ton kanalına sahip boşluk interpolasyon değeri shorter, longer, decreasing ve increasing olur. Bu hakkında daha fazla bilgi edinmek isterseniz bu HD Renk Kılavuzu'na göz atabilirsiniz.

Not: Renk alanı silindir şeklindeyse color-mix() oyun alanı ek bir seçim açılır listesi ekler. Mix üzerindeki etkilerini görmek için bu bölümde oynayabilirsiniz.

Burada, aynı maviden beyaza mix örneği var, ancak bu seferki farklı ton interpolasyon yöntemleri kullanan silindirik alanlar.

Demoyu deneyin

Ton interpolasyonunu görselleştirmek için oluşturduğum başka bir Codepen'i burada bulabilirsiniz. hoşuma gidiyor. Bu soruların, her birinin nasıl renk alanı, ton interpolasyonu belirtildiğinde karma sonucunu üretir. araştırın!

Uyarı: Silindir olmayan bir öğe için ton interpolasyon yöntemi sağlanıyor renk alanı, color-mix() dilinde bir söz dizimi hatasıdır.

Çeşitli renk söz dizimleriyle karıştırma

Şu ana kadar blue ve white gibi CSS adlandırılmış renkleri çoğunlukla karışık şekilde kullanıldı. CSS rengi karıştırma işlemi, iki farklı renk alanından gelen renkleri karıştırmaya hazırdır. Bu bir diğer nedendir. Bu nedenle, karıştırma için renk alanını ortak bir alana sahip olabiliyor.

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

Yukarıdaki örnekte hsl ve display-p3, oklch öğesine dönüştürülecektir. ve daha sonra karıştırılır. Oldukça havalı ve esnek.

Karıştırma oranlarını ayarlama

Her karıştırışınızda her rengin eşit sayıda olmasını istemeniz pek olası değildir; tam olarak bunu yapabilirsiniz. Güzel bir haberimiz var. Google Haberler'de elde edilen karışımda her rengin ne kadarının görünmesi gerektiğini vurgular.

Bu konuyu başlatmak için aşağıda tamamı eşdeğer olan (ve spesifikasyona göre) mix'lere örnek verilmiştir:

.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 aydınlattığını düşünüyorum. Bu dizideki %50'nin nasıl gerekli olmadığı ancak isteğe bağlı olarak belirtilebileceği örnekler verilmiştir. Son örnek, eklendiğinde oranların% 100'ü aştığı ilginç bir durumu gösterir toplamda %100'e ayarlanırlar.

Yalnızca bir renk bir orantı belirtirse, diğerinin de normal oran %100'e ayarlanır. Aşağıda, bunu açıklığa kavuşturmaya yardımcı olacak birkaç örnek daha verilmiştir gösterir.

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 örneklerde iki kural gösterilmektedir: 1. Oranlar %100'ü aştığında, ayarlanır ve eşit olarak dağıtılır. 1. Yalnızca bir oran sağlandığında diğer renk, bu oran çıkarılarak 100 olarak ayarlanır.

Son kural da pek açık değil. yüzde değerleri sağlanırsa ne olur toplamları %100'e eşit değil mi?

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

Bu color-mix() kombinasyonu şeffaflık ve 40% şeffaflık sağlar. Oranların toplamı %100'e eşit olmadığında, elde edilen karışım opak olmaz. Renklerin ikisi de tamamen karışmaz.

İç içe yerleştirilen color-mix()

Tüm CSS gibi iç içe yerleştirme işlemi iyi ve beklendiği gibi yapılır; iç fonksiyonlar çözümlemeli ve değerlerini üst bağlama döndürmelidir.

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

Ulaşmaya çalıştığınız sonucu elde etmek için ihtiyacınız olduğu kadar iç içe yerleştirmekten çekinmeyin.

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

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

Temel renk şeması

Aşağıdaki CSS'de, markanın onaltılık koduna göre açık ve koyu tema oluşturuluyor rengi. Açık tema, iki koyu mavi metin rengi ve çok açık beyaz arka plan yüzey rengi. Dark tercihli medya sorgusunda, özelliklerine yeni renkler atanır. Böylece, arka plan koyu, metin renkleri hafif.

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

Bunların tümü, beyaz veya siyahın bir marka rengiyle karıştırılmasıyla gerçekleştirilir.

Ara renk şeması

Açık ve koyu temadan daha fazla ekleme yaparak bunu bir adım öteye taşıyabilirsiniz. İçinde aşağıdaki demoda, radyo grubunda yapılan değişiklikler HTML'deki bir özelliği günceller etiketi [color-scheme="auto"] olarak tanımlar ve bu etiket, seçicilerin koşullu olarak bir renk teması var.

Bu ara demo ayrıca tüm öğelerin farklı bir çerçevede gösterildiği bir renk teması tema renkleri :root bölümünde listeleniyor. Böylece tüm öğeleri bir arada görebilir düzenleme yapabilirsiniz. Stil sayfasının ilerleyen bölümlerinde, değişkenlerini anında tanımlanmıştır. Böylece stil sayfasında elle yapılan renk manipülasyonları için hepsi ilk :root blokunda bulunur.

Diğer ilginç kullanım alanları

Ana Tudor, birkaç kullanım alanı içeren harika bir demo sunuyor şu çalışma için:

Geliştirici Araçları ile color-mix() hatalarını ayıklama

Chrome Geliştirici Araçları, color-mix() için mükemmel destek sunar. Tanıdık ve söz dizimini vurgular, stilin hemen yanında mix'in bir önizlemesini renklendirir ve alternatif renkler seçebilirsiniz.

Geliştirici Araçları'nda şuna benzer bir görünümde olacaktır:

İyi mikslemeler!