Başka bir rengin kanallarını ve değerlerini temel alarak yeni renkler oluşturun.
Chrome 119, CSS Renk Düzeyi 5'in çok güçlü bir renk özelliğidir. Göreli renk söz dizimi, CSS içinde renk manipülasyonu için yumuşak bir yol oluşturarak yazarlara ve tasarımcılara şunları yapma yolları sunar:
- Aydınlat
- Koyulaştır
- Doygunluk
- Doygunluğu azalt
- Renk artırma
- Saydamlığı ayarlama
- Tersine çevir
- Tamamlama
- Dönüştür
- Kontrast
- Renk paletleri
Göreli renk söz diziminden önce bir rengin opaklığını değiştirmek amacıyla bir rengin kanalları (genellikle HSL) için özel özellikler oluşturmanız ve bunları nihai renk ile son varyant renginde birleştirmeniz gerekir. Bu da kısa sürede zahmetli hale gelebilecek çok sayıda renkli parçayı yönetmeniz anlamına geliyor.
: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 ihtiyacınız olan herhangi bir renk alanı veya söz dizimi ile bir marka rengi ve çok daha az kodla yarı opaklık varyantı oluşturabilirsiniz. Ayrıca, stillerin ve sistemin amacını okumak da çok daha kolay.
: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.
Videoyu tercih ediyorsanız aşağıdaki makalenin neredeyse tamamı bu GUI Yarışması kapsamında ele alınmıştır.
Söz dizimine genel bakış
Göreli renk söz diziminin amacı, başka bir renkten renk elde edilmesine olanak sağlamaktır. Temel renge kaynak renk denir. Bu, yeni from anahtar kelimesinden sonra gelen renktir. Tarayıcı, bu kaynak rengi dönüştürür, ayırır ve yeni renk tanımında kullanılmak üzere parçaları değişken olarak sunar.
Yukarıdaki şemada green kaynak rengi, yeni rengin renk alanına dönüştürülerek r, g, b ve alpha değişkenleriyle temsil edilen ayrı sayılara dönüştürülür. Bunlar daha sonra doğrudan yeni bir rgb() rengin değerleri olarak kullanılır.
Bu resimde döküm, işlem ve değişkenler gösterilmektedir ancak renk de değişmemiştir. Değişkenler değişmeden renge geri döndürülür, böylece hâlâ yeşil bir renk elde edilir.
from anahtar kelimesi
Öğrenilecek söz diziminin ilk kısmı, bir rengi belirtmeye ek olarak from <color> öğesidir. Bu, değerleri belirtmeden hemen önce gerçekleşir. Aşağıda, rgb() için değerlerin belirtilmeden hemen önce eklenen tüm öğelerin from green olduğu bir kod örneği verilmiştir.
.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öreceli bir renge dönüştürür. from anahtar kelimesinden sonra CSS bir renk (sonraki renge ilham verecek bir renk) bekler.
Renk dönüştürme
Daha basit bir ifadeyle, yeşili yeni bir renkte kullanmak üzere r g ve b kanallarına dönüştürür.
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 özelliklerdeki renkler
rgb from green metni çok açık ve kolay anlaşılıyor. from renginin gizemini çözebileceğiniz için özel özellikler ve göreli renk söz dizimi mükemmel bir eşleşme sağlar. Ayrıca, seçeceğiniz bir biçimde yeni bir renk oluşturduğunuz için özel özellik renginin renk biçimini öğrenmeniz de gerekmez.
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
İstediğiniz işlevsel renk gösterimiyle 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üştürme adımı vardır. from sonrasındaki renk, göreli rengin başında belirtildiği gibi renk alanına dönüştürülür. Giriş ve çıkışın eşleşmesi gerekmez. Bu, oldukça özgürdür.
Renk alanı seçme özelliği güç veren bir etkendir. Çünkü renk alanı seçimi genellikle tercihe kıyasla renk değişiminin türüne daha fazla odaklanır. Tercih, sonuçlardadır, renk biçimi veya kanal türlerinde değildir. Farklı renk alanları farklı görevlerde üstün performans gösterdiğinden, kullanım alanlarının gösterildiği bölümlerde bu durum çok daha net olacaktır.
Değişkenleri birlikte kullanın, eşleştirin, çıkarın ve tekrarlayın
Bu söz dizimiyle ilgili tuhaf ama heyecan verici bir diğer nokta da, değişkenlerin tekrar tekrar sıralanmasına gerek olmaması ve tekrarlanabilmesi.
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, şeffaflığı da alpha adlı bir değişken olarak sağlar. Bu kısım isteğe bağlıdır ve işlevsel renk gösteriminde / karakterinden 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 kullanın
Şimdiye kadar yeşil rengi defalarca oluşturuyoruz. Söz dizimini öğrenmek, dönüştürme ve oluşturma adımlarına alışmak. Şimdi değişkenleri değiştirme ve çıktıyı, girişle aynı olmayacak şekilde değiştirme zamanı.
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
Şimdi lacivert! Renk iki katına çıkarılarak 120 seçilerek 240 dönüştürüldü ve renk tamamen değiştirildi. Böylece renk çemberi boyunca döndürüldü. HSL, HWB, LCH ve OKLCH gibi silindir şeklindeki renk alanlarıyla son derece basit bir hale geldi.
Kanalların değerlerini görsel olarak görmek ve böylece tahminde bulunmadan veya spesifikasyonları ezberlemeden doğru hesaplama yapabilmek için bu göreceli renk söz dizimi kanal değerleri aracını deneyin. Belirlediğiniz söz dizimine bağlı olarak her bir kanalın değerini ortaya çıkararak, kullanabileceğiniz değerleri 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 örnekleri ve sunumlar
Aşağıdaki örneklerde ve kullanım alanlarında, benzer veya aynı sonuçları elde etmek için birçok alternatif söz dizimi vardır. Varyasyonlar, renk alanlarından ve sundukları kanallardan gelir.
Ayrıca, birçok örnekte by ve to kelimelerinin kullanıldığı renk ayarlamaları gösterilmektedir. Renk değişikliği (by), göreli bir renk değişikliğidir. Bu değişiklik, değişkenin değerini kullanır ve geçerli değerine göre düzenleme yapar. Rengi değiştirilen to, mutlak renk değişikliğidir. Değişkenin değerini kullanmayan ve tamamen yeni bir değer belirten değişikliklerdir.
Tüm demoları bu Codepen koleksiyonunda bulabilirsiniz.
Bir rengin rengini aç
OKLCH, OKLAB, XYZ veya sRGB renk alanları, renkleri açarken en iyi tahmin edilebilir sonuçları sağlar.
Belirli bir miktar aydınlat
Aşağıdaki .lighten-by-25 örneği, blue rengini alır ve OKLCH'ye dönüştürür, ardından geçerli değeri 1.25 ile çarparak l (açıklık) kanalını artırarak mavi rengi açar. Bu, mavi ışığı %25 beyaza doğru iter.
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
Belirli bir değere aç
Aşağıdaki .lighten-to-75 örneği, blue değerini aydınlatmak için l kanalını kullanmaz; bunun yerine değeri tamamen 75% ile değiştirir.
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
Rengi koyulaştırma
Bir rengin aydınlatılmasında etkili olan renk alanları, rengin koyulaşması için de idealdir.
Bir miktar koyulaştır
Aşağıdaki örnekte .darken-by-25 mavi rengi alır ve OKLCH biçimine dönüştürür, ardından değeri .75 ile çarparak l (açıklık) kanalını% 25 azaltarak maviyi koyulaştırır. Bu işlem, mavi rengi siyaha %25 iter.
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
Belirtilen değere koyulaştır
Aşağıdaki .darken-to-25 örneğinde, blue koyulaştırmak için l kanalı kullanılmaz, bunun yerine değer tamamen 25% ile değiştirilir.
.darken-to-25 {
background: oklch(from blue 25% c h);
}
Bir rengi doygun hale getirme
Belirli bir doygunluk
Aşağıdaki .saturate-by-50 örneği, orchid öğesinin titreşimini göreli bir 50% artırmak için hsl() ile ilgili s özelliğini kullanır.
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
Belirli bir miktarda doygunluk
Aşağıdaki .saturate-to-100 örneği, hsl() kapsamındaki s kanalını kullanmamaktadır; bunun yerine istenen doygunluk değerini belirtir. Bu örnekte doygunluk 100% değerine yükseltildi.
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
Rengin doygunluğunu azaltma
Doygunluğu belli bir miktarda azalt
Aşağıdaki .desaturate-by-half örneği, indigo doygunluğunu yarı yarıya azaltmak için hsl() değerinden s değerini kullanır.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Belirli bir değere doygunluğu azalt
Renk solgunluğunu belirli bir miktar kadar azaltmak yerine, solgunlaştırarak istenen belirli bir değer elde edebilirsiniz. Aşağıdaki örnek, .desaturate-to-25 indigo temel alınarak yeni bir renk oluşturur ancak doygunluğu %25'e ayarlar.
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
Renk artırma
Bu efekt, bir rengi doygunlaştırmaya benzer ancak birkaç şekilde farklıdır. İlk olarak, bu bir saturation değişikliği değil chroma değişikliğidir. Bunun nedeni, yüksek dinamik aralığa artırılabilen renk alanlarının doygunluğu kullanmamasıdır. chroma özelliğini içeren renk alanları, yüksek dinamik aralık özelliğine sahiptir ve yazarların renk doygunluğunu doygunluğun bile yapabileceğinden daha fazla artırmalarına olanak tanır.
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
Bir rengin opaklığını ayarlama
Bir rengin yarı şeffaf varyantını yapmak, tasarım sistemlerinde yapılan en yaygın renk düzenlemelerinden biridir. Bu makalenin giriş bölümündeki örneği kaçırdıysanız sorun alanını gerçekten iyi bir şekilde özetlemektedir.
Opaklığı bir miktara göre ayarlama
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
Opaklığı belirli bir değere ayarlama
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
Rengi ters çevirme
Rengi ters çevirme, renk kitaplıklarında bulunan yaygın bir renk ayarlama işlevidir. Bunu başarmanın bir yolu, bir rengi RGB'ye dönüştürüp her bir kanalın değerini 1'den çıkarmaktır.
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
Renkle tamamlansın
Amacınız bir rengi ters çevirmek yerine onu tamamlamaksa aradığınız şey ton döndürme olabilir. Tonu açı olarak sunan bir renk alanı seçin, ardından tonu istediğiniz kadar döndürmek için calc() işlevini kullanın.
Bir rengin tamamlayıcısını bulmak için yarım tur döndürün. Bu durumda, sonucu elde etmek için h kanalına 180 kadar ekleme veya çıkarma yapabilirsiniz.
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
Renklerin kontrastını belirleme
Erişilebilir renk kontrastı oranlarına ulaşma yöntemi olarak L* (Lstar) seçeneğini kullanabilirsiniz.
Bu, bir calc() içinde LCH ve OKLCH'den gelen (yaklaşık olarak) tek tip ışık (L) kanalını kullanır. Düşük, orta veya yüksek kontrastı hedefliyorsanız L&idast; delta yaklaşık ~40, ~50 veya ~60 civarındadır.
Bu teknik, LCH veya OKLCH renklerindeki tüm tonlarda iyi sonuç verir.
Daha koyu bir renkle kontrast oluşturun
.well-contrasting-darker-color sınıfı, L* işaretini 60 delta ile gösteriyor.
Kaynak renk koyu bir renk (düşük değere sahip açıklık) olduğundan, açıklık kanalına %60 (0,6) eklenir. Bu teknik, açık arka plan üzerinde zıt, aynı tonda ve koyu bir metin rengi bulmak için kullanılır.
.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'lık delta ile L* özelliğini de göstermektedir. Kaynak renk açık bir renk (yüksek değerli açıklık) olduğundan 0,60 değeri açıklı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 iyidir. Çok sayıda renk alanı nedeniyle özellikle kullanışlı ve güçlüdür. Işık kanalı güvenilir olduğu ve ton kanalı yan etki olmadan döndürülebildiği için aşağıdaki örneklerin tümünde OKLCH kullanılmaktadır. Son örnek, daha ilginç bir sonuç için açıklık ve ton döndürme ayarlarının bir kombinasyonunu göstermektedir.
Bu paletlerin ne kadar dinamik olduklarını görmek için bunlara ilişkin örnek kaynak kodunu açın ve --base-color değerini değiştirmeyi deneyin. Çok eğlenceli!
Videolardan hoşlanıyorsanız YouTube'da OKLCH ile CSS'de renk paletleri oluşturma hakkında ayrıntılı bilgiler bulabilirsiniz.
Tek renkli paletler
Tek renkli bir palet oluşturmak için, tamamen aynı tonda fakat açıklık ve koyuluk farklı şekillerde bir palet oluşturmak gerekir. Ortadaki renk, palet için kaynak renktir. Burada iki daha açık ve iki koyu varyant her iki tarafa da yerleştirilir.
: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ş pek çok paleti deneyin
Ücretsiz CSS değişkenlerinden oluşan Open Props, bu stratejiyle oluşturulan renk paletlerini sunar ve içe aktarma işlemiyle kolayca kullanılabilmesini sağlar. Ayrıca hepsi özelleştirebileceğiniz bir renkten oluşuyor. Tek renk verip bir palet ortaya çıkarıyor.
Analog paletler
OKLCH ve HSL ile ton rotasyonu çok kolay olduğundan analog bir renk paleti oluşturmak çok önemlidir. Tonu, sonuçlarından istediğiniz kadar döndürün ve temel rengi değiştirin, ardından tarayıcı tarafından oluşturulan yeni paletleri izleyin.
: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));
}
Üçlü paletler
Tamamlayıcı renklere benzer şekilde, üçlü renk paletleri de bir temel renk verildiğinde zıt ancak uyumlu ton dönüşleridir. Renk çemberinin ortasından çizilmiş düz bir çizgi gibi, tamamlayıcı bir rengin karşı tarafında yer alan üçlü paletler, bir temel renkten eşit olarak döndürülmüş 2 renk elde eden bir çizgiler üçgeni gibidir.
Bu işlemi, 120deg tonunu döndürerek gerçekleştirin.
Burada, renk teorisini biraz basitleştireceğiz. Ancak isterseniz daha karmaşık olan üçlü paletleri kullanmaya başlamanız için yeterli olacaktır.
: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 çemberi etrafında eşit şekilde bölünmüş dört renktir ve net bir baskın değeri olmayan bir palet ortaya çıkar. Birbirini tamamlayan iki renk gibi düşünebilirsiniz. Akıllı kullanıldığında son derece anlamlı olabiliyor.
Bu, renk teorisini biraz basitleştirmenin bir yoludur, ancak ilgilendiğiniz daha karmaşık tetradik paletleri öğrenmeniz için yeterli olacaktır.
: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 tonu döndürülmüş tek renkli
Birçok renk uzmanı bu numarayı gizli tutar. Sorun şu ki, tek renkli renk skalası oldukça sıkıcı olabilir. Çözüm, açıklık değiştikçe her yeni renge bir küçük veya büyük ton rotasyonu eklemektir.
Aşağıdaki örnekte, ışığı her kartela% 10 azaltılmış ve ayrıca renk tonu 10 derece döndürülmektedir. Sonuçta, bir gradyan gibi sorunsuz bir şekilde harmanlanmış görünen hotpink ile çivit renkli palet.
: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 döndürme özelliğiyle oluşturulmuş bu leaderboard'u deneyin
Aşağıdaki büyük şerit arayüzü, bu ton döndürme stratejisini kullanmaktadır. Her liste öğesi, belgedeki dizinini --i adlı bir değişken olarak izler. Bu indeks daha sonra rengi, açıklığı ve tonu ayarlamak için kullanılır. Ayarlama değeri yalnızca% 5 veya 5 derecedir. Bu, deeppink içeren yukarıdaki örnekten çok daha incedir. Bu nedenle, bu skor tablosunun neden bu kadar zarafetle herhangi bir tonda olabileceğine dikkat etmek gerekir.
Leaderboard'un altındaki kaydırma çubuğunda tonu değiştirdiğinizden emin olun ve göreceli renk söz dizimine bakın ve hoş renk anları oluşturun.
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))
);
}