Renk şeması oluşturma

Dinamik ve yapılandırılabilir bir renk şeması oluşturmaya dair temel bilgiler

Adam Argyle

Bu yayında, CSS'de birden çok renk şemasını yönetmenin yollarıyla ilgili düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.

Tanıtım

Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:

Genel bakış

Kullanıcı tercihlerine uyum sağlayan ve yazma deneyimini en aza indiren bir web sayfası yapmak için özel özellikler ve calc() ile erişilebilir bir renk sistemi oluşturacağız. Temel marka rengiyle başlıyor ve bundan varyanlar sistemi oluşturuyoruz: 2 metin rengi, 4 yüzey rengi ve eşleşen bir gölge.

Bu kılavuz, her bir renk şeması için tüm renklerin önceden tanımlanmasıyla başlar. Sonuna kadar sayfayı değiştirmek için kullanılmazlar.

Marka

Genellikle, belirli bir marka rengi onaltılık veya rgb olarak yayınlanır. Bu GUI Meydan Okuması'nın temel marka rengi #0af. İlk olarak, bu renk sistemi için onaltılık değerin hsl'ye dönüştürülmesi gerekir.

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

Marka renginin daha koyu veya daha açık hale getirilmesi gibi bir kavramın gerçekleştirilmesi için, hsl renk değerinin 3 kanalının aşağıdaki gibi kendi özel özelliklerine çıkarılması gerekir:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

CSS, bu renk özelliklerinde matematik işlemleri yapabilir. Örneğin, açıklık değerini %20 azaltmak için calc(var(--brand-lightness) - 20%). CSS, SSL doygunluğu ve açıklık miktarlarını ayarlayarak tüm renkleri aynı ton ailesinde tutabildiğinden, bu yöntem bir renk şeması oluşturmanın temelini oluşturur.

Açık tema

Her bir renk varyantı, eşleşme düzeniyle işaretlenir. Bu örnekte, her bir renk varyantının sonuna -light eklenir.

açık tema nihai sonuçlarının önizlemesi

Marka

Marka renginden başlayarak, herhangi bir hesaplama yapılmadan hsl () işlev parantezi içine --brand-hue, --brand-saturation ve --brand-lightness özel özellik sarmalanarak yeniden oluşturulur:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

Metin renkleri

Şimdi de bir renk şemasının olmazsa olmazları metin renklerine ihtiyaç duyar. Açık temada metin çok koyu renkte olmalıdır. Aşağıdaki renklerin açıklığının düşük, %50'nin çok altında olduğuna dikkat edin.

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light, %10 ışıkta çok koyu olduğu için yoğun %100 doygunluğu korur. Böylece marka rengi, koyu ve koyu lacivert renk arasında görünmeye devam edebilir.

--text2-light, birinci renk kadar koyu değil. Bu, ikincil bir renk olduğu kadar iyi ve çok daha az doymuş.

Yüzey renkleri

Yüzey renkleri, metnin üzerinde veya içinde yer aldığı arka planlar, kenarlıklar ve diğer dekoratif yüzeylerdir. Açık temada bu renkler, koyu renk olan metin renklerinin aksine açık renklerdir. Hsl ile açık renkler oluşturmak için üçüncü açıklık değerinde daha yüksek yüzde değerleri kullanırız. Açık grilerin çok tonlu görünmemesi için doygunluğu da azaltacağız.

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

Dekoratif renkler, :focus ya da :hover gibi etkileşimli anlar için veya kağıt katmanları görünümü oluşturmak amacıyla daha fazla varyanta ihtiyaç duyduğundan, 4 yüzey rengi oluşturuldu. Bu senaryolarda, fareyle --surface2-light fareyle --surface3-light öğesinin üzerine gelindiğinde geçiş yapmak güzeldir. Dolayısıyla fareyle üzerine gelindiğinde kontrast artışı (%99 açıklık ile% 92 arasında açıklık; renk daha koyu hale gelir) sonuçlanır.

Gölgeler

Bir renk şemasındaki gölgeler çok daha üst düzeylerdedir ancak efekte gerçekçi bir doğa katar ve gerçekçi olmayan siyahi gölgeler arasından sıyrılmasına yardımcı olur. Bunu yapmak için gölgenin rengi, ton özel özelliğini kullanır. Bu özellik, tonla biraz doygun olup yine de çok koyu olur. Temelde çok koyu ve hafif mavi bir gölge oluşturur.

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light, bir hsl işlevi içine sarmalanmamış. Bunun nedeni, --shadow-strength değerinin bir miktar opaklık oluşturmak için birleştirilmesi ve CSS'nin hesaplamaları yapmak için parçalara ihtiyacı olmasıdır. Daha fazla bilgi edinmek için rad gölgesi bölümüne geçin.

Açık renkler bir arada

Tüm açık renklerden nasıl yapıldığını öğrenmek için çok uğraşmanıza gerek yok. Hepsi CSS'de tek bir yerde.

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}
açık renklerin hepsinin ekran görüntüsü
CodePen'de korumalı alan

Koyu tema

Çoğu marka koyu bir temayla başlamaz. Bu tema birincil, genellikle daha açık temanın bir varyasyonudur. Öte yandan kullanıcılar, geceleri gibi farklı bağlamlar için genellikle koyu bir tema seçer. Bu faktörler beni koyu temalarla iki hususu göz önünde bulundurmaya yöneltti:

  1. Kullanıcılar bu temayı kullanırken genellikle karanlıkta kalırlar. Bu nedenle, testi karanlıkta test edin.
  2. Renkler, aşırı yoğun olduğu için ekranda titremeyecek şekilde soluklaşmalıdır.

koyu temanın nihai sonucunun önizlemesi

Marka

Açık tema, 3 marka HDS renk kanalı değerini değiştirmeden kullandı, ancak koyu tema kullanmıyordu. Doygunluk yarıya iner ve ışık göreceli olarak %50 azalır.

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

Metin renkleri

Koyu bir temada metin renkleri açık olmalıdır. Aşağıdaki renkler, açıklık için yüksek değerlere sahiptir ve bu değerleri beyaza daha yakın hale getirir.

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

Yüzey renkleri

Koyu bir temada yüzey renkleri koyu olmalıdır. Aşağıdaki renkler düşük açıklığa ve doygunluğa sahiptir. 1. yüzey en koyu %10 ile en koyu renktir.

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

Gölgeler

Koyu bir temada gölgeleri görmek çok zor olabilir. Zaten oldukça karanlık olan bir şeyi koyulaştırmak zor olduğu için bu mantıklı. --shadow-strength-dark, bir değişkeni değiştirerek gölgeleri koyulaştırmamızı sağladığı için bu noktada çok kullanışlıdır.

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

Ayrıca, söz konusu gölgenin doygunluğuna bakın. Arayüze bakarken rengi fark edebiliyor musunuz? Geliştirici araçlarından doygunluğu kaldırmayı deneyin. Hangisini tercih edersiniz?

Koyu renklerin hepsi

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}
koyu renklerin hepsinin ekran görüntüsü
CodePen'de korumalı alan

Temayı karart

Bu renk şeması tamamen açıklık ve doygunluğu ayarlamaya yöneliktir. Bir tonun görünür olması için yeterli doygunluk mevcut olmalıdır ancak yine de loş ve düşük kontrasta sahip olması amaçlandığı için kontrast puanlarını neredeyse geçemez.

karart temadan nihai sonuçların önizlemesi

Marka

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

Metin renkleri

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

Yüzey renkleri

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

Gölgeler

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

Renkleri bir arada soluklaştır

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}
soluk renklerin hep birlikte gösterildiği ekran görüntüsü
CodePen'de korumalı alan

Erişilebilir renkler

Koyu metin rengi grubundaki en düşük ışığın% 65 ve en yüksek ışığın %25 olduğuna dikkat edin. Bu, aralarında% 40'lık bir nefes payı bırakır. Açık temada, açık temada% 55 oranında nefes alan olur. Metin ve yüzey renkleri arasındaki ışık farklarını yaklaşık% 40-50 düzeyinde tutmak, renk kontrastı oranlarını yüksek tutmaya ve skorların düşük olduğu durumlarda da ince ayar yapmaya yardımcı olabilir.

Buna "geçene kadar çarpma" adını veriyorum. Bu, bir araç geçtiğimi gösterene kadar açıklık değerini çarpma etkileşimi.

Geçiş yapana kadar ışığı azaltmak ve kontrastı artırmak için üst karakter + aşağı ok tuşlarına basılır

Bu yarışmada oluşturulan temaların her biri, kontrast puanlarını geçer. Soluk renk şeması, en düşük kontrasta sahiptir ancak yine de minimum gereksinimleri karşılar. Ekipteki diğer kişilerin zıt renklerle iyi zıt renkler kullanmalarına yardımcı olmak için bir yüzey rengini erişilebilir bir metin rengiyle eşleştiren bir sınıf adı oluşturmak iyi bir fikirdir.

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}
Loş yüzey ve metin eşlemelerinin ekran görüntüsü
VisBug ile loş yüzey ve metin eşleştirmelerinin ekran görüntüsü

Rad Gölgesi

Temalar, .rad-shadow adlı bir yardımcı sınıf kullanıyor. Bu gölge, Smooth Shadow aracında oluşturulmuş bu gölge için çok memnunum. Oluşturulan snippet'i alıp kendi renklerim ve opaklık hesaplamalarımla özelleştirdim. Bunun nedeni, her renk şemasında ayarlayabileceğim bir gölge oluşturmaktı.

gölgelerin her biri birbirlerinin yanında

Bunu başarabilmek amacıyla, ayarlanacak her bir renk şeması için bir gölge rengi ve bir gölge gücü olmak üzere 2 değişken oluşturdum. Renk, doygunluk ve koyuluk ayarları içindir; güç ise koyu bir renk şemasında gölge yoğunluğunu artırmanın kolay bir yoludur. Sonuç böyle bir şeydi.

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

Renk şemamda gölgelerle ilerlemek istersem, ışığın yönü tasarımın tüm gölgeleri arasında aynı olması gerektiğinden gölge açılarını da tasarım jetonu sabit yapardım.

Renk şemalarını kullanma

Renklerin önceden tanımlanmasını tamamladıktan sonra sıra bunları şemadan bağımsız özelliklere dönüştürmeye geliyor. Demek istediğim, bu renk şeması projesindeki bir CSS yazarı olarak, belirli bir renk şemasının değerine nadiren erişmeniz gerekir. Temanın dışına çıkmamayı kolaylaştırmak istiyorum.

Bunu başarmak için renk şemasının kullanımı, özel olarak, birazdan tanımlayacağımız genel özel özellikler üzerinden yapılmalıdır. Bu sayede, tasarım değişkenlerini kullanan kişilerin o anda hangi renk şemasının ayarlandığı konusunda endişelenmelerine gerek kalmaz; sadece yüzey ve metin renklerini kullanmaları gerekir. color: var(--text1-light) yerine color: var(--text1) kullanın. Renklerin tüm uyarlanması ve özetlenmesi CSS'de çok daha yüksek bir düzeyde yapılır.

Açık temanın bağlantı stilleri aşağıdaki kod bloğunda anlatılacak. Genel bir özel özelliği, açık temaya özgü renkle ilişkilendirin. Artık tüm var(--brand) kullanımlarında açık marka rengi kullanılacaktır.

Açık tema (otomatik)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

Sitede artık açık tema kullanılıyor. Çok eğlenceli ve başarılı bir andı. Önceden tanımlı renklerimizi diğer renk şeması bağlamlarında kullanırken bu anlardan birkaçını daha inceleyelim.

Koyu tema (otomatik)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

Açık tema

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

Koyu tema

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

Temayı karart

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

Bu noktada, yazarlar, sağlanan renk şeması genellerini gerektiğinde kullanabilir ve bir daha temalar için endişelenmelerine gerek kalmaz.

Sonuç

Nasıl yaptığımı artık bildiğine göre sen ne yaparsın? 🙂

Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Codepen oluşturun veya kendi demonuzu yayınlayın, bana tweet gönderin. Bu kodu aşağıdaki Topluluk remiksleri bölümüne ekleyeceğim.

Kaynak

Topluluk remiksleri - @chris-kruining; no-preference, more ve less için ton kaydırma çubuğu, durum renkleri ve kontrast modları ekledi: demo.