CSS göreli renk söz dizimi

Başka bir rengin kanallarına ve değerlerine göre yeni renkler oluşturun.

Adam Argyle

Chrome 119'da CSS Renk Seviyesi 5'ten çok güçlü bir renk özelliği bulunur. Göreli renk söz dizimi, CSS'de renklerle kolayca işlem yapmanızı sağlar. Yazarlar ve tasarımcılar bu sayede şunları yapabilir:

• Açık
• Koyulaştırma
• Doygunluğu ayarla
• Doygunluğu azalt
• Chroma Boost
• Opaklığı ayarlama
• Tersine çevir
• Tamamlayıcı
• Dönüştür
• Kontrast
• Renk paletleri
  • Tek renkli
  • Benzer
  • Üçlü
  • Tetradic
  • Ton rotasyonuyla tek renkli

Göreli renk söz diziminde önce, bir rengin opaklığını değiştirmek için rengin kanalları (genellikle HSL) için özel özellikler oluşturmanız ve bunları nihai bir renk ve nihai bir varyant rengi olarak birleştirmeniz gerekir. Bu da kısa sürede zahmetli olabilen pek çok renk parçasını yönetmek 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 dizimini kullandıktan sonra, ihtiyacınız olan herhangi bir renk alanı veya söz dizimi ile marka rengi oluşturabilir ve çok daha az kod kullanarak yarı opak bir varyant oluşturabilirsiniz. Ayrıca, stillerin ve sistemin amacını daha kolay anlayabilirsiniz.

:root {
  --brand-color: hsl(300deg 75% 50%);
  --brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}

Bu gönderi, 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 Challenge'da ele alınmıştır.

Söz dizimine genel bakış

Göreli renk söz diziminin amacı, başka bir renkten renk türetilmesini sağlamaktır. Temel renk, kaynak renk olarak adlandırılır. Bu renk, yeni from anahtar kelimesinden sonra gelen renktir. Tarayıcı, bu orijinal rengi dönüştürür ve parçalara ayırır. Ardından, parçaları yeni renk tanımında kullanılmak üzere değişken olarak sunar.

Önceki şemada, kaynak renk green'ün yeni rengin renk alanına dönüştürüldüğü, r, g, b ve alpha değişkenleri olarak temsil edilen ayrı sayılara dönüştürüldüğü ve daha sonra doğrudan yeni rgb() renginin değerleri olarak kullanıldığı gösterilmektedir.

Bu resimde döküm, süreç ve değişkenler gösterilirken renk de değiştirilmez. Değişkenler, renge değiştirilmeden geri yerleştirilir. Bu nedenle, renk yine yeşil olur.

Not: Renkleri belirtmeyle ilgili bir inceleme için web rengi hakkında ihtiyacınız olan tüm bilgileri içeren yüksek tanımlı renk kılavuzunu ziyaret edin. Bu makalede, işlevsel renk gösterimi, OKLCH gibi renk alanları ve renk gamları hakkında bilgi sahibi olduğunuz varsayılmaktadır.

from anahtar kelimesi

Öğrenilecek söz diziminin ilk bölümü, renk belirtmeye from <color>. bölüm eklemesidir. Değerleri belirtmeden hemen önce gelir. rgb() değerleri belirtilmeden hemen önce, yalnızca from green değerinin eklendiği bir kod örneği aşağıda 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) */
}

İşlevsel gösterimde ilk parametre olarak görülen bu from anahtar kelimesi, renk tanımını göreli bir renge dönüştürür. from anahtar kelimesinden sonra CSS bir renk bekler. Bu renk, sonraki renge ilham verir.

Renk dönüştürme

Daha basit bir ifadeyle, yeşili yeni bir renkte kullanmak için 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 özelliklerden elde edilen renkler

rgb from green okuması çok net ve kolay anlaşılır. Bu nedenle, özel özellikler ve göreli renk söz dizimi mükemmel bir uyum sağlar. from renginin gizemini çözebilirsiniz. Ayrıca, seçtiğiniz bir biçimde yeni bir renk oluşturduğunuz için genellikle özel mülk renginin renk biçimini bilmeniz gerekmez.

rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b)   /* clear */

Tercih ettiğiniz renk uzayında çalışma

İş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 dizimi bu dönüşüm adımına sahiptir; from'ten sonraki renk, göreli rengin başında belirtildiği şekilde renk alanına dönüştürülür. Giriş ve çıkışın eşleşmesi gerekmez. Bu da çok özgürleştirici bir durumdur.

Renk alanı seçmek, tercihten çok renk değişimi türüne odaklandığından renk alanı seçebilme özelliği de kullanışlıdır. Tercih, renk biçiminde veya kanal türlerinde değil, sonuçlarda yer alır. Farklı renk alanları farklı görevlerde başarılı olduğundan bu durum, kullanım alanlarını gösteren bölümlerde çok daha net bir şekilde anlaşılacaktır.

Değişkenleri karıştırma, eşleştirme, atlama ve tekrarlama

Bu söz dizimiyle ilgili tuhaf ama heyecan verici bir nokta var; değişkenlerin tekrar sıraya konulması gerekmez ve tekrarlanabilir.

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. İsteğe bağlıdır ve işlevsel renk gösterimindeki /'ten 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 tekrar tekrar oluşturduk. Söz dizimi hakkında bilgi edinme, dönüşüm ve yapı bozma adımlarına aşina olma. Şimdi değişkenleri değiştirmenin ve çıkışı girişle aynı olmayacak şekilde değiştirmenin zamanı geldi.

green                              /*  h=120 s=100% l=25%  */
hsl(from green calc(h * 2) s l)    /*  h=240 s=100% l=25%  */

Artık koyu mavi. Ton iki katına çıktı ve 120 tonu alınarak 240 haline getirildi. Bu sayede renk tamamen değiştirildi. Bu işlem, tonu renk tekerleği boyunca döndürür. HSL, HWB, LCH ve OKLCH gibi silindirik renk alanlarıyla çok basit bir şekilde yapılabilen güzel bir numaradır.

Tahmin etmeden veya spesifikasyonu ezberlemeden matematiksel işlemleri doğru şekilde yapabilmek için kanalların değerlerini görsel olarak görmek istiyorsanız bu göreceli renk söz dizimi kanal değerleri aracını deneyin. Belirttiğiniz söz dizimi temel alınarak her kanalın değerini gösterir. Böylece, kullanabileceğiniz değerleri tam olarak bilirsiniz.

Tarayıcı desteğini kontrol etme

@supports (color: rgb(from white r g b)) {
  /* safe to use relative color syntax */
}

Kullanım alanları ve gösterimler

Aşağıdaki örneklerde ve kullanım alanlarında, benzer veya aynı sonuçlara ulaşmak için birçok alternatif söz dizimi vardır. Varyasyonlar, renk alanlarından ve sundukları kanallardan kaynaklanır.

Ayrıca birçok örnekte, by ve to ifadeleriyle renk ayarlamaları gösterilir. Renk değişikliği by, göreli bir renk değişikliğidir. Değişkenin değerini kullanan ve mevcut değerine göre düzenleme yapan bir değişikliktir. Renk değişti to, mutlak bir renk değişikliğidir. Değişiklik, değişkenin değerini kullanmaz ve bunun yerine tamamen yeni bir değer belirtir.

Tüm demoları bu Codepen koleksiyonunda bulabilirsiniz.

Bir rengi açmak

OKLCH, OKLAB, XYZ veya sRGB renk alanları, renkleri açarken en tahmin edilebilir sonuçları sağlar.

Not: CSS podcast'inin bu bölümünde gradyanlar için tahmin edilebilir sonuçlar hakkında daha fazla bilgi edinin.

Belirli bir miktarda aydınlatma

Aşağıdaki örnekte .lighten-by-25, blue rengini OKLCH'ye dönüştürür ve mevcut değeri 1.25 ile çarparak l (parlaklık) kanalını artırarak maviyi açar. Bu işlem, mavi açıklığı %25 oranında beyaza doğru iter.

.lighten-by-25 {
  background: oklch(from blue calc(l * 1.25) c h);
}

göz atın.

Belirli bir değere kadar açma

Aşağıdaki örnekte .lighten-to-75, blue değerini açmak 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);
}

göz atın.

Bir rengi koyulaştırma

Aynı renk alanları, renkleri aydınlatmada etkilidir. Bu alanlar, rengi koyulaştırmak için de idealdir.

Belirli bir oranda karartma

Aşağıdaki örnekte .darken-by-25, mavi rengi OKLCH'ye dönüştürür ve ardından l (parlaklık) kanalını% 25 azaltarak (.75 ile çarparak) mavi rengi koyulaştırır. Bu işlem, mavi rengi %25 oranında siyaha doğru iter.

.darken-by-25 {
  background: oklch(from blue calc(l * .75) c h);
}

Belirli bir değere göre koyulaştırma

Aşağıdaki .darken-to-25 örneği, blue rengini karartmak için l kanalını kullanmamaktadır; bunun yerine, değeri 25% ile tamamen değiştirmektedir.

.darken-to-25 {
  background: oklch(from blue 25% c h);
}

kalemine göz atın.

Bir rengi doygunlaştırma

Bir tutara göre doygunluk

Aşağıdaki örnekte .saturate-by-50, orchid'ın canlılığını göreceli bir 50% değerine göre artırmak için hsl()'deki s değerini kullanır.

.saturate-by-50 {
  background: hsl(from orchid h calc(s * 1.5) l);
}

Belirli bir miktara doygunluk

Aşağıdaki .saturate-to-100 örneği, hsl() kaynağından s kanalını kullanmaz, bunun yerine istenen bir doygunluk değerini belirtir. Bu örnekte, doygunluk 100% değerine yükseltilmiştir.

.saturate-to-100 {
  background: hsl(from orchid h 100% l);
}

Bir renk doygunluğunu azaltır

Bir miktara göre doygunluğu azaltma

Aşağıdaki örnekte .desaturate-by-half, indigo'ın doygunluğunu yarıya indirmek için hsl()'deki s'ı kullanır.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Belirli bir değere göre doygunluğu azaltma

Renk doygunluğunu bir miktara göre azaltmak yerine, istediğiniz belirli bir değere göre azaltabilirsiniz. Aşağıdaki .desaturate-to-25 örneği, 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);
}

adlı kaleme göz atın.

Renk artırma

Bu efekt, bir rengi doygunlaştırmaya benzer ancak birkaç açıdan farklıdır. Öncelikle, bu bir saturation değişikliği değil, chroma değişikliğidir. Bunun nedeni, yüksek dinamik aralığa yükseltme yapabilen renk alanlarının doygunluk kullanmamasıdır. chroma özelliğini içeren renk alanları, yüksek dinamik aralık yeteneğine sahiptir. Böylece yazarlar, renk canlılığını doygunluğun bile mümkün olandan daha fazla artırabilir.

.increase-chroma {
  background: oklch(from orange l calc(c + .1) h);
}

göz atın.

Bir rengin opaklığını ayarlama

Bir rengin yarı saydam bir varyantını oluşturmak, tasarım sistemlerinde yapılan en yaygın renk ayarlamalarından biridir. Bu makalenin girişindeki örneği inceleyin. Problem alanını çok iyi özetler.

Opaklığı bir miktara göre ayarlama

.decrease-opacity-by-25 {
  background: rgb(from lime r g b / calc(alpha / 2));
}

kalemine bakın.

Opaklığı belirli bir değere ayarlama

.decrease-opacity-to-25 {
  background: rgb(from lime r g b / 25%);
}

kalemini inceleyin.

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ürüp her 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));
}

Bir rengi tamamlama

Amacınız bir rengi tersine çevirmek değil, tamamlamak ise muhtemelen ton rotasyonu tam size göre. Tonu açı olarak sunan bir renk alanı seçin, ardından calc() simgesini kullanarak tonu istediğiniz miktarda döndürün. Bir rengin tamamlayıcısı, yarım tur döndürülerek yapılır. Bu durumda, sonucu elde etmek için h kanala 180 ekleme veya çıkarma işlemi yapabilirsiniz.

.complementary-color {
  background: hsl(from blue calc(h + 180) s l);
}

.

Bir rengin kontrastını ayarlama

Erişilebilir renk kontrastı oranları elde etmek için L*'ı (Lstar) kullanmayı düşünün. Bu, calc() içinde LCH ve OKLCH'den alınan (yaklaşık olarak) algısal olarak tek tip hafiflik (L) kanalını kullanır. Düşük, orta veya yüksek kontrastı hedeflediğinize bağlı olarak L&M deltası yaklaşık 40, 50 veya 60 civarındadır.

kalemine göz atın.

Bu teknik, LCH veya OKLCH'teki tüm tonlarda iyi sonuç verir.

Daha koyu bir renkle kontrast oluşturma

.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 açıklık kanalına %60 (0,6) eklenir. Bu teknik, açık bir arka planda iyi kontrastlı, aynı tonlu ve koyu renkli metin rengini bulmak için kullanılır.

.well-contrasting-darker-color {
  background: darkred;
  color: oklch(from darkred calc(l + .60) c h);
}

kalemine bakın.

Daha açık bir renkle kontrast oluşturun

.well-contrasting-lighter-color sınıfı, %60'lık bir delta ile L* değerini de gösterir. Kaynak renk açık bir renk olduğundan (yüksek değerde açıklık) açıklık kanalından 0,60 çıkarılır.

.well-contrasting-lighter-color {
  background: lightpink;
  color: oklch(from lightpink calc(l - .60) c h);
}

kalemine bakın.

Renk paletleri

Göreli renk söz dizimi, renk paletleri oluşturmada çok başarılıdır. Özellikle, mevcut renk alanı sayısı nedeniyle kullanışlı ve güçlüdür. Açıklı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ü OKLCH kullanır. Son örnekte, daha ilginç bir sonuç elde etmek için açıklık ve ton rotasyonu ayarlarının bir kombinasyonu gösterilmektedir.

Bunlar için örnek kaynak kodunu açın ve --base-color değerini değiştirmeyi deneyerek bu paletlerin ne kadar dinamik olduğunu görün. Çok eğlenceli.

Videoları tercih ediyorsanız OKLCH ile CSS'de renk paletleri oluşturma hakkında ayrıntılı bilgi edinmek için YouTube'daki videomu izleyebilirsiniz.

Tek renkli paletler

Tek renkli palet oluşturmak, aynı tondan ancak açıklık ve koyuluk bakımından farklı tonlara sahip bir palet oluşturmaktır. Ortadaki renk, paletin kaynak rengidir. Bu rengin iki 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ş çeşitli paletleri deneyin

Ücretsiz CSS değişkenleri kitaplığı olan Open Props, bu stratejiyle oluşturulmuş renk paletleri sunar ve bunları bir içe aktarma işlemiyle kolayca kullanılabilir hale getirir. Ayrıca bunların tümü, özelleştirebileceğiniz bir renkten oluşur. Tek yapmanız gereken bir renk seçmek.

.

Benzer paletler

OKLCH ve HSL ile ton rotasyonu çok kolay olduğundan analog renk paleti oluşturmak çok kolaydır. Tonu, sonuçlarından istediğiniz miktarda döndürün ve temel rengi değiştirin, ve tarayıcı tarafından yeni paletlerin oluşturulmasını 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));
}

göz atın.

Üçlü paletler

Bir temel renk temel alınarak oluşturulan üçlü renk paletleri, birbirini tamamlayan renklere benzer şekilde karşıt ancak uyumlu ton rotasyonlarıdır. Komplemanter renk, renk tekerleğinin ortasından çizilen düz bir çizgi gibi bir rengin karşı tarafındayken üçlü paletler, bir taban renginden eşit şekilde döndürülmüş 2 renk bulan çizgi üçgeni gibidir. Bunu, tonu 120deg döndürerek yapabilirsiniz.

Bu, renk teorisinin biraz basitleştirilmiş bir halidir ancak ilgileniyorsanız sizi daha karmaşık üçlü paletlere yönlendirmeye yeter.

: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

Dörtlü paletler, renk tekerleğine eşit olarak bölünmüş dört renkten oluşur. Bu paletlerde net bir baskın değer yoktur. Bunu iki tamamlayıcı renk çifti gibi de düşünebilirsiniz. Akıllıca kullanıldığında çok anlamlı olabilir.

Burada renk teorisini biraz basitleştirmiştim. Ancak isterseniz 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));
}

adlı kaleme bakın.

Hafif ton dönüşü olan tek renkli

Birçok renk uzmanı bu oyunu gizliyor. Sorun şu ki tek renkli bir renk skalası oldukça sıkıcı olabilir. Çözüm, açıklık değiştikçe her yeni renge küçük veya büyük bir ton rotasyonu eklemektir.

Aşağıdaki örnekte, her bir renk paletinde açıklık% 10 azaltılmış ve ton 10 derece döndürülmüştür. Sonuçta, renk tonu gibi kusursuz şekilde harmanlanmış bir hotpink-çivit paleti elde ediyoruz.

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

kalemini inceleyin.

OKLCH ve ton rotasyonu ile oluşturulan bu skor tablosunu deneyin

Aşağıdaki liderlik tablosu arayüzünde bu ton rotasyonu stratejisi kullanılmaktadır. Her liste öğesi, belgedeki dizin numarasını --i adlı bir değişken olarak izler. Bu dizin daha sonra renk doygunluğunu, açıklığı ve tonu ayarlamak için kullanılır. Ayarlama yalnızca% 5 veya 5 derecedir ve koyu pembenin kullanıldığı yukarıdaki örnekten çok daha incedir. Bu nedenle, bu liderlik tablosunun bu kadar zarif bir şekilde herhangi bir renkte olmasının nedenini fark etmek için keskin bir göz gerekir.

Leaderboard'un altındaki kaydırma çubuğunda yer alan tonu değiştirdiğinizden emin olun ve güzel renk anları oluşturan göreli renk söz dizimine bakın.

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

adlı kaleme bakın.