CSS color-mix()
fonksiyonunu kullanarak, desteklenen renk alanlarından herhangi birinde renkleri doğrudan CSS'nizden karıştırabilirsiniz.
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.
.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:
.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.
.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ğlam
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);
![7 renk alanının (s Etkinlik, Doğrusal-s yüksek, lch, oklch, lab, oklab, xyz) her biri, siyah ve beyazın karıştırılmasıyla elde edilen sonuçları gösteriyor. Her bir renk alanının griyle bile farklı bir şekilde karıştırılacağını gösteren yaklaşık 5 farklı ton gösterilir.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/7-color-spaces-srgb-lin-f139be872a18a.png?hl=tr)
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);
![Her biri farklı sonuçlar elde ettiği gösterilen 7 renk alanının (s yapıldığı, Doğrusal-s indir, lch, oklch, lab, oklab, xyz) Renklerin çoğu pembe veya mor, bazıları ise hâlâ mavi.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/7-color-spaces-srgb-lin-5415cf7a20d75.png?hl=tr)
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);
}
![Farklı renk alanlarında siyah-beyaz gradyanlar.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-a16c67a3aee6c.png?hl=tr)
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.
![Önceki paragrafta açıklandığı gibi mix sonuçları.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-93bf2be27ac03.png?hl=tr)
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.
![Önceki paragrafta açıklandığı gibi mix sonuçları.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-f139d29a23359.png?hl=tr)
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.
Burada, aynı maviden beyaza mix örneği var, ancak bu seferki farklı ton interpolasyon yöntemleri kullanan silindirik alanlar.
![Önceki paragrafta açıklandığı gibi mix sonuçları.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-5b90e9287d746.png?hl=tr)
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!
Ç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!