CSS color-mix() işlevi, renkleri doğrudan CSS'nizden desteklenen renk alanlarında dilediğiniz renkle karıştırmanıza olanak tanır.
Geliştiriciler, color-mix() tarihinden önce bir rengi koyulaştırmak, açmak veya solgunlaştırmak için renk kanallarında CSS ön işlemcilerini veya calc() özelliğini kullanıyordu.
.color-mixing-with-sass {
/* Sass: equally mix red with white */
--red-white-mix: color.mix(red, white);
}
Sass, renk CSS spesifikasyonunun ilerisinde kalarak harika bir iş çıkardı. Ancak, CSS'de renkleri karıştırmanın gerçek bir yolu yoktur. Yaklaşmak için kısmi renk değerlerini hesaplamalısınız. Aşağıda, CSS'nin bugün mix'i nasıl simüle edebileceğine dair azaltılmış bir örnek verilmiştir:
.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(), renkleri CSS'ye karıştırma özelliğini getirir. Geliştiriciler birlikte kullanabilecekleri renk alanını ve her bir rengin karışımda ne kadar baskın olacağını seçebilirler.
.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);
}
Biz de bunu istiyoruz. 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 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, bir renk alanının etkilerini bilmek istediğiniz sonuçları elde etmenize yardımcı olur.
Etkileşimli giriş için bu color-mix() aracını deneyin:
- Her renk alanının efektlerini keşfedin.
- Silindir şeklindeki bir renk alanını (lch, oklch, hsl ve hwb) karıştırırken 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 en altta mevcut.
Çeşitli renk alanlarını karıştırma
Karıştırma (ve gradyanlar) için varsayılan renk alanı oklab'dir. Tutarlı sonuçlar sağlar. Karışımı ihtiyaçlarınıza göre
düzenlemek için alternatif renk alanları da belirleyebilirsiniz.
Örneğin black ve white. Karıştırdıkları renk alanı o kadar da
önemli değil, 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 için blue ve white öğelerini ele alalım. Bu özellikle renk alanının şekli
sonuçları etkileyebilecek bir durum olduğu için bunu seçtim. Bu örnekte, beyazdan maviye doğru giderken renk alanlarının çoğu mor olur. Ayrıca oklab renginin karıştırma için nasıl güvenilir bir renk alanı olduğunu, çoğu kişinin beyaz ve maviyi (mor değil) karıştırma beklentisine en yakın olanıdır.
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 bir renk alanının etkilerini öğrenmek, renk geçişleri oluşturma konusunda da harika bir bilgidir. Renk 4 söz dizimi, renk geçişlerinin renk alanını belirtmesine de olanak tanır. Burada renk geçişi, bir alan 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);
}
Hangi renk alanının "en iyi" olduğunu merak ediyorsanız renk alanı yoktur. İşte bu yüzden
pek çok seçenek var. Ayrıca, "en iyi " renk icat edildiyse yeni renk alanları da icat
edilmezdi (oklch ve oklab'a bakın). Her renk alanının öne çıkma ve doğru seçim olma açısından benzersiz bir anı olabilir.
Örneğin, canlı bir karışım sonucu almak istiyorsanız hsl veya hwb kullanın. Aşağıdaki demoda iki canlı renk (eflatun ve misket limonu) birlikte karıştırılmış ve hsl ile hwb canlı bir sonuç oluştururken srgb ve oklab doymamış renkler üretiyor.
Tutarlılık ve incelik istiyorsanız oklab'i kullanın. Mavi ile siyahın bir arada kullanıldığı aşağıdaki demoda hsl ve hwb aşırı canlı ve ton değişimli renkler oluştururken, srgb ve oklab koyu mavi üretir.
color-mix() oyun alanında farklı renkleri ve alanları test ederek beş dakika harcayın ve her alanın avantajlarını öğrenmeye başlayın. Ayrıca, hepimiz kullanıcı arayüzlerimizdeki potansiyellere uyum sağladığından renk alanları konusunda daha fazla rehberlik verilmesini bekleyebiliriz.
Ton interpolasyonu yöntemini ayarlama
Silindir şeklindeki bir renk alanını (yani, h ton kanalına sahip olan ve belirli bir açıyı kabul eden bir renk kanalına sahip herhangi bir renk alanını) karıştırmayı tercih ettiyseniz, interpolasyonun shorter, longer, decreasing ve increasing olup olmadığını belirtebilirsiniz. Daha fazla bilgi edinmek isterseniz bu HD Renk Kılavuzu'nda bu konu ayrıntılı bir şekilde ele alınmıştır.
Burada, maviden beyaza karışım örneğinin aynısını görüyorsunuz, ama bu kez yalnızca farklı ton interpolasyon yöntemlerine sahip silindir alanlarda bulunuyor.
Burada, ton interpolasyonunu görselleştirmeye yardımcı olmak için özel olarak gradyanlar için oluşturduğum başka bir Codepen'i bulabilirsiniz. Bu özelliğin, ton interpolasyonu belirtildiğinde her bir renk alanının karışım sonucunu nasıl ürettiğini anlamanıza yardımcı olacağını düşünüyorum. Lütfen inceleyin!
Çeşitli renk söz dizimleriyle karıştırma
Şu ana kadar blue ve white gibi CSS adlı renkleri çoğunlukla karıştırdık. CSS renk karıştırma, iki farklı renk alanındaki renkleri karıştırmaya hazırdır. İki rengin aynı alanda olmadığı durumlar için ortak alanı belirlediğinden, karıştırma işlemi için renk alanını belirtmenin önemli olmasının bir başka nedeni de budur.
color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));
Önceki örnekte hsl ve display-p3, oklch biçimine dönüştürülüp karıştırılır. Çok havalı ve esnek.
Karıştırma oranlarını ayarlama
Şimdiye kadarki örneklerin çoğunda gösterildiği gibi, her karıştırışınızda her rengin eşit parçalarını istemeniz pek olası değildir. Güzel bir haberimiz var. Sonuçta ortaya çıkan karışımda her rengin ne kadarının görülmesi gerektiğini belirtmek için bir söz dizimi var.
Bu konuyu başlatmak için aşağıda, tamamen eşdeğer olan (ve spesifikasyondan) bir mix örneği 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%);
}
Uç durumları iyi açıklamak için bu örnekleri buluyorum. İlk örnek grubunda% 50'nin zorunlu olmadığı ancak isteğe bağlı olarak belirtilebildiği gösterilmektedir. Son örnekte ilginç bir durum gösterilmektedir. Oranlar bir araya getirildiğinde% 100'ü aştığında toplam %100'e eşit olarak kenetlenir.
Ayrıca, yalnızca bir renk bir oran belirtiyorsa diğerinin %100'e kalan değer olarak kabul edildiğine de dikkat edin. Bu davranışı daha iyi anlamak 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 örneklerde iki kural gösterilmiştir: 1. Oranlar %100'ü aştığında, sabitlenir ve eşit olarak dağıtılır. 1. Yalnızca bir oran sağlandığında diğer renk bu oran çıkarılarak 100'e ayarlanır.
Son kural biraz daha belirsizdir; her iki renk için yüzdeler sağlanırsa ve bunların toplamı %100'e eşit değilse ne olur?
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 ulaşmadığında elde edilen karışım opak olmaz.
Renklerin hiçbiri tamamen karıştırılmaz.
color-mix() iç içe yerleştiriliyor
Tüm CSS'ler gibi iç içe yerleştirme iyi ve beklendiği gibi işlenir; iç 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 sonucu almak için içine istediğiniz kadar yerleştirebilirsiniz.
Açık ve koyu renk şeması oluşturma
color-mix() ile renk şemaları oluşturalım.
Temel renk şeması
Aşağıdaki CSS'de 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 arka plan yüzey rengi oluşturur. Daha sonra, koyu tercihli bir medya sorgusunda, özel özelliklere yeni renkler atanır. Böylece arka plan koyu ve metin renkleri 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, beyaz veya siyahın marka rengiyle karıştırılmasıyla gerçekleştirilir.
Ara renk şeması
Açık ve koyu temalardan daha fazlasını ekleyerek bunu bir adım öteye taşıyabilirsiniz. Aşağıdaki demoda, radyo grubunda yapılan değişiklikler, [color-scheme="auto"] HTML etiketindeki bir özelliği günceller. Bu özellik, seçicilerin bir renk temasını koşullu olarak uygulamasını sağlar.
Bu orta seviye demoda, tüm tema renklerinin :root öğesinde listelendiği bir renk teması tekniği de gösterilmektedir. Böylece hepsini bir arada görmek
ve gerekiyorsa ayarlamak kolaylaşır. Daha sonra stil sayfasında, değişkenleri tanımlandıkları şekilde kullanabilirsiniz. Bu sayede, bunların hepsi ilk :root blokunda yer aldığı için stil sayfasında renk değiştirme faaliyetlerini araştırmak zorunda kalmazsınız.
Daha ilginç kullanım alanları
Ana Tudor, çalışma için birkaç kullanım alanı içeren harika bir demo sunuyor:
Geliştirici Araçları'nı kullanarak color-mix() hatalarını ayıklama
Chrome Geliştirici Araçları, color-mix() için mükemmel destek sunar. Söz dizimini tanır ve vurgular, Stiller bölmesinde stilin hemen yanında mix'in bir önizlemesini oluşturur ve alternatif renklerin seçilmesine olanak tanır.
Geliştirici Araçları'nda bu görünüm aşağıdaki gibi olacaktır:
Hepinizi mikslemeniz dileğiyle!