Başka bir rengin kanallarına ve değerlerine dayalı olarak yeni renkler oluşturun.
Chrome 119'da, CSS Renk Düzeyi 5'in çok güçlü bir renk özelliği vardır. Göreli renk söz dizimi renk manipülasyonu için yumuşak bir yol oluşturur ve ve tasarımcılarla tanıştırmak:
- Lighten
- Koyulaştır
- Doygunluğu ayarla
- Doygunluğu azalt
- Renk artırma
- Opaklığı ayarlama
- Ters çevir
- Tamamlama
- Dönüştür
- Kontrast
- Renk paletleri
Göreli renk söz diziminden önce bir rengin opaklığını değiştirmek için bir rengin kanalları için (genellikle HSL ve derle) özel özellikler oluşturabilir bir renk ve nihai varyant rengine dönüştürmenizi sağlar. Bu sayede birçok farklı türde zaman zaman külfetli olabilen renkli parçalara ayrılır.
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
Göreli renk söz diziminden sonra herhangi bir renk alanıyla marka rengi oluşturabilirsiniz veya söz dizimi oluşturmalı ve çok daha az kodla yarı opaklıklı bir varyant oluşturabilirsiniz. İnsanların stillerin ve sistemin amacını okumak da daha kolaydır.
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
Bu yayın, söz dizimini öğrenmenize ve yaygın renk manipülasyonlarını göstermenize yardımcı olacaktır.
Video kullanmayı tercih ederseniz, bu GUI Challenge'da aşağıdaki makalelerin neredeyse tamamı ele alınmıştır.
Söz dizimine genel bakış
Göreli renk söz diziminin amacı, başka bir öğeden renk türetilmesine olanak tanımaktır.
rengi. Taban rengine kaynak renk denir. Bu renk,
yeni from anahtar kelimesinden sonra gelir. Tarayıcı,
Dönüştürün ve bu rengi ayırt edip teklif edin.
bu parçaları yeni renk tanımında
kullanılacak değişken olarak ayarlar.
Önceki şemada green kaynak rengi,
yeni rengin renk alanını,
r, g, b ve alpha şeklinde temsil edilen bağımsız numaralara dönüştürüldü
değişkenlerini ifade eder. Bunlar daha sonra doğrudan yeni rgb() renginin değerleri olarak kullanılır.
Bu resimde döküm, işlem ve değişkenler gösterilse de rengi değiştiriyoruz. Değişkenler aynı renk içine geri yerleştirilir, böylece yeşil renkte sabit kalmasına neden olur.
from anahtar kelimesi
Öğrenilecek söz diziminin ilk bölümü, from <color> ek bölümüdür
bir renk belirtirsiniz. Süreç, değerleri belirtmeden hemen önce geçer. İşte bir kod
eklenen her şeyin değerlerinden hemen önce from green olduğu bir örnek
rgb() için belirtildi.
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
Bu from anahtar kelimesi, işlevsel gösterimde ilk parametre olarak görüldüğünde,
renk tanımını göreli bir renge dönüştürür! from anahtar kelimesinden sonra CSS
bir renk, bir sonraki renge ilham verecek bir renk bekliyor.
Renk dönüştürme
Daha basit bir ifadeyle, yeni bir rengi.
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
Özel özelliklerden elde edilen renkler
rgb from green okuması son derece net ve kolay anlaşılır. İşte bu nedenle
özel özellikler ve göreli renk söz dizimi çok iyi bir eşleşme sağlar, çünkü
from rengindeki gizemi ortadan kaldırabilir. Ayrıca genellikle bir dizi proje
yeni bir özel mülk renginin renk biçimini bildiğiniz için
istediğiniz bir biçimde ekleyebilirsiniz.
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
Tercih ettiğiniz renk alanında çalışın
İşlevsel renk gösterimi ile renk alanını seçebilirsiniz.
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
Göreli renk söz diziminde bu dönüşüm adımı vardır; from sonrası renk
göreceli değerin başında belirtilen renk alanına dönüştürülür
rengi. Giriş ve çıkışın eşleşmesi gerekmez, bu da son derece özgürdür.
Renk alanı seçme olanağı da bir o kadar güçlü bir etki yaratıyor; bir model yerine renk değişiminin türüne daha fazla odaklanıyor. tıklayın. Tercih, renk biçimi veya kanalda değil sonuçlarda yer alır bulunur. Bu durum, müzakere etme becerilerinizi gösteren farklı görevlerde uzmanlaşır.
Değişkenleri karıştırın, eşleştirin, çıkarın ve tekrar edin
Bu söz dizimiyle ilgili tuhaf ama heyecan verici bir şey var; değişkenlerin tekrar tekrarlandığından emin olun.
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
Değişken olarak opaklık
Söz dizimi, opaklığı alpha adlı bir değişken olarak da sağlar. Bu kısım isteğe bağlıdır.
ve işlevsel renk gösteriminde / işaretinden sonra gelir.
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
Değişkenlerde calc() veya diğer CSS işlevlerini kullanma
Şimdiye kadar yeşil rengi defalarca tekrar tekrar oluşturduk. söz dizimini kullanarak, dönüşüme alışmak ve yapılandırma adımlarını uygulamaktır. Şimdi zaman çizelgesine uyarak çıkışı giriş.
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
Lacivert oldu! Ton ikiye katlandı ve 120 tonu aldı ve şuna dönüştürdü:
240, renk tamamen değiştiriliyor. Bu işlem, tonu renk boyunca döndürdü
silindir renk alanlarla çok daha basit hale getirilmiş şık bir çark
HSL,
HWB
LCH ve
OKLCH.
Kanalların değerlerini görsel olarak görmek ve böylece tahminde bulunmadan ya da spesifikasyon ezberlemeden doğru hesaplamayı yapmak için bu göreceli renk söz dizimi kanal değerleri aracını deneyin. Belirttiğiniz söz dizimine göre her bir kanalın değerini ortaya çıkararak hangi değerlerle oynayabileceğinizi tam olarak bilmenize olanak tanır.
Tarayıcı desteğini kontrol etme
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
Kullanım alanları ve demolar
Aşağıdaki örneklerde ve kullanım alanlarında ya da aynı sonuçları sunmaktır. Varyasyonlar renk alanlarından ve ilgili bilgi edindiniz.
Ayrıca, birçok örnekte by ve
to. Renk değişikliği by göreli bir renk değişikliğidir; Bu değişiklik
değişkenin değerini belirler ve mevcut değerine göre bir düzenleme yapar. CEVAP
renk değişikliği to mutlak renk değişikliğidir;
tamamen yeni bir değer belirtir.
Tüm demolar bu Codepen koleksiyonunda bulunabilir.
Bir rengi aç
OKLCH, OKLAB, XYZ veya sRGB renk alanları, en fazla boyutu tahmin edilebilir sonuçlar elde edebilir.
Bir miktar aydınlatın
Aşağıdaki .lighten-by-25 örneği, blue rengini alır ve şuna dönüştürür:
OKLCH, ardından şunun ile çarparak l (açıklık) kanalını artırarak maviyi aydınlatır:
1.25 tarafından güncel değer. Bu işlem, mavi ışığı beyaza doğru %25 iter.
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
Belirli bir değeri aydınlatın
Aşağıdaki örnek .lighten-to-75, l kanalını şu amaçlarla kullanmaz:
blue rengini açarsa tamamen 75% ile değiştirir.
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
Rengi koyulaştırma
Rengi aydınlatmada etkili olan aynı renk alanları, Koyu renk.
Bir miktar koyulaştır
Aşağıdaki .darken-by-25 örneği mavi rengi alır ve şuna dönüştürür:
OKLCH, daha sonra l (aydınlık) kanalını% 25 oranında azaltarak maviyi koyulaştırır.
değer .75 ile çarpılır. Bu işlem, mavi rengi %25 oranında siyaha iter.
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
Belirtilen bir değere koyulaştır
Aşağıdaki örnek .darken-to-25, karartmak için l kanalını kullanmaz
blue ise değeri tamamen 25% ile değiştirir.
.darken-to-25 {
background: oklch(from blue 25% c h);
}
Renk doygunluğu
Bir miktara göre doygunlaştır
Aşağıdaki örnekte .saturate-by-50, değeri artırmak için hsl() değerindeki s değerini kullanmaktadır
orchid adlı kullanıcının bir göreli 50% tarafından titreşimi.
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
Belirli bir miktara doyma
Aşağıdaki .saturate-to-100 örneği, şuna ait s kanalını kullanmaz:
hsl() ise bunun yerine istenen bir doygunluk değerini belirtir. Bu örnekte
doygunluk 100% değerine yükseltildi.
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
Bir renk doygunluğunu azaltır
Doygunluğu bir miktar azalt
Aşağıdaki .desaturate-by-half örneği, azaltmak için hsl() değerinden s değerini kullanmaktadır
indigo doygunluğunu yarıya indirdi.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Belirli bir değere solgunlaştır
Doygunluğunuzu belirli bir miktara indirmek yerine, istediğiniz belirli bir miktara düşürebilirsiniz.
değer. Aşağıdaki örnek .desaturate-to-25, şununla yeni bir renk oluşturur:
indigo ancak doygunluğu %25'e ayarlıyor.
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
Renk artırma
Bu efekt, bir renge doygunluğa benzer ancak birkaç renk
yolları. İlk olarak, saturation değil, chroma değişikliğidir ve
çünkü yüksek dinamik aralığa dönüşebilecek renk alanları
doygunluğunu artırır. chroma özelliğini içeren renk alanları yüksek dinamik aralıktır
özelliği sayesinde, yazarların renk canlılığını doygunluktan daha fazla
yapabiliriz.
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
Bir rengin opaklığını ayarlayın
Bir rengin yarı şeffaf varyantını oluşturmak en yaygın renklerden biridir. düzenlemelerden ibaret değildir. Bu girişteki örneğe bakın kaçırdıysanız sorun alanını iyi bir şekilde ana hatlarıyla açıklamaktadır.
Opaklığı bir miktar ayarla
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
Opaklığı belirli bir değere ayarla
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
Bir rengi ters çevirme
Rengi ters çevirme, renk kitaplıklarında bulunan yaygın bir renk düzenleme işlevidir. Bunu yapmanın bir yolu, rengi RGB'ye dönüştürdükten sonra 1'den bir değere ayarlayacağız.
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
Bir rengi tamamlayın
Hedefiniz bir rengi ters çevirmek değil o rengi tamamlamaksa,
büyük olasılıkla aradığınız şey budur. Hedeflerinize en uygun olan
renk tonunu açı olarak ayarlayın, ardından tonu istediğiniz kadar döndürmek için calc() kullanın.
Bu durumda, yarım tur dönerek rengin tamamlayıcısını bulabilirsiniz.
sonuca ulaşmak için 180 tarihine kadar h kanalını ekleyebilir veya kanaldan çıkarabilirsiniz.
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
Bir rengi kontrast oluşturma
Erişilebilir renk kontrastı oranlarına ulaşmak için L* (Lstar) tuşlarına basın.
Bu yöntemde, 3D ışıklandırmaya kadar elde edilen (yaklaşık)
LCH ve OKLCH arasında calc(). Hedeflemenizin düşük mü, orta mı yoksa yüksek mi olduğuna bağlı olarak
kontrast, L* delta yaklaşık 40, ~50 veya ~60'tır.
Bu teknik, LCH veya OKLCH'teki tüm tonlarda iyi sonuç verir.
Daha koyu bir rengi kontrast oluşturun
.well-contrasting-darker-color sınıfı, L* değerini 60 deltayla gösterir.
Kaynak renk koyu renk (düşük değerli açıklık) olduğu için %60 (0,6) eklenir.
birkaç önerimiz var. Bu teknik, kontrast oluşturmak için kullanılır.
açık renk arka planda aynı tonda, koyu metin renginde.
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
Daha açık bir renkle kontrast oluşturun
.well-contrasting-lighter-color sınıfı, %60 delta ile L* gösterir.
dikkat edin. Kaynak renk açık renk (yüksek değerli açıklık) olduğu için 0,60
parlaklık kanalından çıkarılır.
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
Renk paletleri
Göreli renk söz dizimi, renk paletleri oluşturmada çok başarılıdır. Özellikle de hem kullanışlı hem de güçlü. Aşağıdakiler Açıklık kanalı güvenilir olduğundan ve renk tonu bakımından doğru renk olduğu için, kanal, yan etkiler olmadan döndürülebilir. Son örnekte, renk tonu ve renk tonu döndürme ayarlamalarının kombinasyonu sonuç!
Bunlar için örnek kaynak kodunu açın ve --base-color değerini
ne kadar dinamik olduğunu görebiliyorum. Çok eğlenceli.
Videolardan hoşlanırsanız YouTube'da OKLCH ile CSS'de renk paletleri oluşturma hakkında ayrıntılı bilgi verebilirim.
Tek renkli paletler
Tek renkli bir palet oluşturmak için, tamamı aynı tondan fakat farklı renkler gösterebilir. Ortadaki renk kaynak renktir Bu palet için, iki açık ve iki koyu varyantın yanı sıra.
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
Göreli renk söz dizimi ve OKLCH ile oluşturulmuş bir dizi paleti deneyin
Ücretsiz CSS değişkenleri ve teklifler kitaplığı olan Open Props renk paletlerini ve özel renk paletlerini kullanarak kolayca içe aktarın. Hepsi özelleştirilebilir renklerden oluşuyor. bir renk paletini dağıtıyor.
Benzer paletler
OKLCH ve HSL ile ton rotasyonu çok kolay olduğundan, bir analog renk paleti. Tonu, sonuçlarından istediğiniz miktarda döndürün ve temel rengi değiştirin, tarayıcı tarafından oluşturulan yeni paletleri izleyebilirsiniz.
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
Triadik paletler
Tamamlayıcı renklere benzer şekilde, üçlü renk paletleri
renk tonları verilen birbirine karşıt ancak uyumlu ton dönüşleridir. Burada
birbirini tamamlayan renk, düz bir çizgi gibi, bir rengin karşı tarafındadır
ortasından çizilerek çizilen üçlü paletler tıpkı bir renk çemberi gibidir
temel renkten eşit olarak döndürülmüş 2 renk olduğunu bulan çizgi üçgeni.
120deg tonunu döndürerek bunu başarabilirsiniz.
Bu, renk teorisini basit bir şekilde özetlemiştir, ancak ilginizi çekerseniz daha karmaşık üçlü paletlerden başlayabilirsiniz.
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
Tetradik paletler
Tetradik paletler, renk çemberinin etrafına eşit olarak bölünmüş dört renktir. belirgin bir baskın değeri olmayan bir palet Bunu da örneğin iki karakter gibi bir araya getirir. Akıllıca kullanıldığında son derece anlamlı olabilir.
Bu, renk teorisini basit bir şekilde özetlemiştir, ancak ilginizi çekerse daha karmaşık tetradik paletleri kullanmaya başlayabilirsiniz.
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
Hafif ton dönüşü olan tek renkli
Birçok renk uzmanı bu oyunu gizliyor. Sorun, bir tek renkli renk skalası oldukça sıkıcı olabilir. Çözüm, parlaklık değiştikçe her yeni renge küçük veya büyük ton rotasyonu uygulayın.
Aşağıdaki örnekte, ışık her paletin ışığında% 10 azaltılıyor ve renge döner. 10 derece yükseltiyoruz. Sonuçta, çivit mavisi bir paletin rengi bir renk geçişine benzetebiliriz.
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
OKLCH ve ton rotasyonu ile oluşturulan bu skor tablosunu deneyin
Aşağıdaki leaderboard arayüzünde bu ton döndürme stratejisi kullanılmaktadır. Her bir liste
öğesi, dokümandaki dizinini --i adlı bir değişken olarak izler. Bu dizin
sonra renk, açıklık ve tonu ayarlamak için kullanılır. Yalnızca% 5 veya
5deg, deeppink ile yukarıdaki örnekten çok daha inceliklidir ve bu yüzden
büyük afişlerin bu kadar farklı bir tonuna sahip olmasının nedenini
zarafet.
Leaderboard'un altındaki kaydırma çubuğunda tonu değiştirdiğinizden emin olun ve göreceli renk söz dizimi, güzel renk anları oluşturur.
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}