Renk şeması oluşturma

Dinamik ve yapılandırılabilir bir renk şemasının nasıl oluşturulacağına ilişkin temel bir genel bakış

Bu gönderide, birden çok renk şemasını yönetmenin yolları üzerine düşündüğüm bir şeyi paylaşmak istiyorum kullanabilirsiniz. Demoyu deneyin.

Demo

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

Genel Bakış

Özel özellikler ve calc() ile erişilebilir bir renk sistemi oluşturacağız. kullanıcı tercihlerine uygun bir web sayfası oluşturmak ve bunu yaparken deneyimlemenizi sağlar. Temel bir marka rengiyle başlar ve bu renkten 2 metin rengi, 4 yüzey rengi ve eşleşen bir gölge içeren bir varyant sistemi oluştururuz.

Bu kılavuzda, her renk şemasının tüm renkleri önceden tanımlanır. Sayfanın en sonunda değişiklik yapmak için kullanılmazlar.

Marka

Çoğu zaman, bir marka rengi önceden oluşturulur ve hex veya rgb. Bu GUI Yarışması #0af bir temel marka rengine sahip. Öncelikle, bu renk sistemi için onaltılık değerin hsl olarak dönüştürülmesi gerekir.

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

Marka rengini koyulaştırma veya renklendirme gibi bir kavram oluşturmak için %20 oranında, hsl renk değerinin 3 kanalının kendi özel özelliklerini girin:

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

CSS, bu renk özelliklerini matematikle işlem yapabilir. Örneğin, calc(var(--brand-lightness) - 20%) ile açıklık değerini %20 oranında azaltabilir. CSS, hsl doygunluk ve açıklık miktarlarını ayarlayarak tüm renkleri aynı ton ailesinde tutabileceğinden bu, renk şeması oluşturmanın temelini oluşturur.

Açık tema

Her bir renk varyantı, eşleşme şemasıyla işaretlenir (bu örnekte, her bir renk varyantı) sonuna -light eklendi.

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

Marka

Marka renginden başlayarak --brand-hue, --brand-saturation sarmalanarak yeniden oluşturulur ve hsl () işlev parantezi içinde --brand-lightness özel özellik, hesaplama yapmadan devam edin:

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

Metin renkleri

Ardından, renk şeması için gerekli temel öğeler metin renklerine ihtiyaç duyar. Açık temalarda metin çok koyu olmalıdır. Aşağıdaki renklerin açıklığının düşük olduğuna dikkat edin. %50'nin altında.

* {
  --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ğundan yoğun %100'ü renk doygunluğunu vurgulamanızı öneririz.

--text2-light, 1. renk kadar koyu değil. İkincil bir renk olduğu için bu iyi bir şeydir ve doygunluğu da çok daha düşüktür.

Yüzey renkleri

Yüzey renkleri, arka plan, kenarlık ve diğer dekoratif yüzeylerin bir metin girin. Açık temada, koyu olan metin renklerinin aksine açık renkler kullanılır. HDS ile açık renkler oluşturmak için üçüncü hafiflik değerinde daha yüksek yüzde değerleri kullanırız. Ayrıca, açık grilerin çok renkli görünmemesi için doygunluğu da düşürürü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 renklerin :focus veya :hover gibi etkileşimli anlar için ya da kağıt katmanlarının görünümünü oluşturmak için daha fazla varyant gerektirmesi nedeniyle 4 yüzey rengi oluşturuldu. Bu senaryolarda, fareyle üzerine gelindiğinde --surface2-light yerine --surface3-light'ün gösterilmesi iyi bir fikirdir. Böylece, fareyle üzerine gelindiğinde kontrast artar (%99 açıklıktan %92 açıklığa geçerek daha koyu hale gelir).

Gölgeler

Renk şemasında tonlar, sınırların ötesindedir ancak bu görsele gerçekçi bir doğa katar. gölgelerin gerçekçi olmayan siyah gölgelerinin arasından ayrılmasına yardımcı olur. Yapılacaklar gölgenin rengi için ton özel özelliği kullanılır, tona doymuş ama yine de çok koyu. Aslında çok karanlık ve hafif mavi bir gölge oluşturuyoruz.

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

--surface-shadow-light, bir hsl işlevi içinde sarmalanmamış. Bunun nedeni, --shadow-strength değeri, şeffaflık oluşturmak ve CSS gereksinimleri oluşturmak için birleştirilecek parçalara ayırmak isteyebilirsiniz. Daha fazla bilgi edinmek için radyal gölge bölümüne atlayın.

Açık renkler bir arada

Işık renklerinin nasıl oluşturulduğunu bulmak için etrafta uğraşmanıza gerek yok, tek bir yerden kontrol edebilirsiniz.

* {
  --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;
}
ışık renklerinin hepsinin ekran görüntüsü
CodePen'de Korumalı Alan

Koyu tema

Çoğu marka koyu temayla başlamaz. Koyu tema, birincil, daha açık renklidir. Öte yandan kullanıcılar ekranlarında genellikle gibi farklı bağlamları vardır. Bu faktörler, koyu temalar söz konusu olduğunda iki noktayı göz önünde bulundurmama neden oldu:

  1. Kullanıcılar bu temayı kullanırken genellikle karanlık bir ortamda olur. Bu nedenle, testi karanlık bir ortamda yapın.
  2. Renkler, ekranın titremesini engelleyebileceğinden arttırır.

koyu temanın nihai sonucunun önizlemesi

Marka

Açık tema, 3 marka hsl renk kanalı değerini değişiklik yapmadan kullanırken koyu tema bunu yapmaz. Doygunluk yarıya düşürüldü, hafiflik azaldı %50 olduğunu varsayalım.

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

Metin renkleri

Koyu temalarda metin renkleri açık olmalıdır. Aşağıdaki renklerin açıklık değerleri yüksek olduğundan bu renkler beyaza daha yakındır.

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

Yüzey renkleri

Koyu temada yüzey renkleri koyu olmalıdır. Aşağıdaki renklerde düşük ışık ve doygunluk. 1. yüzey en koyu %10 ile.

* {
  --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ölgelerin görülmesi çok zor olabilir. Yapması zor olduğu için zaten karanlık olan bir şeyi koyulaştırır. Bu noktada --shadow-strength-dark, tek bir değişkeni değiştirerek gölgeleri koyulaştırmamıza olanak tanıdığı için çok kullanışlıdır.

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

Ayrıca, gölgedeki doygunluk miktarına da bakın. Arayüze baktığınızda rengi fark edebiliyor musunuz? Doygunluğu devtools'den kaldırmayı deneyin. Hangisini tercih edersiniz?

Koyu renklerin tümü

* {
  --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 tümünün ekran görüntüsü
CodePen'de Korumalı Alan

Tema parlaklığını azaltma

Bu renk şeması, açıklığı ve doygunluğu düzenlemekle ilgilidir. Tonu görünür kılacak kadar doygunluk olmalı ancak yine de loş ve düşük kontrastlı olması gerektiği için kontrast puanlarını zar zor geçmelidir.

loş temadaki 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 karartma

* {
  --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;
}
karartılan renklerin ekran görüntüsü
CodePen'de Korumalı Alan

Erişilebilir renkler

Koyu metin renk grubundaki en düşük açıklığın %65, koyu yüzeylerdeki en yüksek açıklığın ise %25 olduğunu unutmayın. Bu, aralarındaki boşluğun %40'ı kadardır. Açık temada, nefes darlığının% 55'i kadar açık tema. Metin ve yüzey renkleri arasındaki açıklık farklarını koruma yaklaşık% 40-50 kullanmak renk kontrastı oranlarını yüksek tutmaya yardımcı olur. düşük olduğunda düzeltilmesi gereken küçük bir araçtır.

Buna "geçene kadar artır" adını veriyorum. Bu, bir araç geçmemi gösterene kadar açıklık değerini artırma işlemidir.

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

Bu yarışmada oluşturulan temaların her biri kontrast puanlarını geçer. Loş renk şeması, bunların arasında en düşük kontrasta sahiptir ancak minimum gereksinimleri karşılar. Ekipteki diğer kişilerin iyi zıt renkler kullanması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 karartılmış yüzey ve metin eşlemelerinin ekran görüntüsü

Rad Shadow

Temalarda .rad-shadow adlı bir yardımcı program sınıfı kullanılır. Bu gölge, çok faydalı bulduğum Smooth Shadow aracında oluşturuldu. Oluşturulan snippet'i kendi renklerimle özelleştirdim ve opaklık hesaplamalarını kullanabilirsiniz. Bunun nedeni, her renk şemasında ayarlayabileceğim bir gölge oluşturmaktı.

yan yana her gölge

Bunu başarabilmek amacıyla, düzenlenecek her bir renk şeması için 2 değişken oluşturdum. gölge rengi ve gölge gücü. Renk, doygunluk ve koyuluk ayarlamaları içindir. Güç ise koyu renk şeması olduğunda gölge yoğunluğunu kolayca artırmanın bir yoludur. Sonuç şu şekilde oldu.

: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 şemasında gölgelerle daha da ileri gitmek isteseydim gölge açılarını da sabit bir tasarım jetonu yapardım. Çünkü tasarımın tüm gölgelerinde ışık yönü aynı olmalıdır.

Renk şemalarını kullanma

Renklerin önceden tanımlanması tamamlandığına göre, artık bunları şemadan bağımsız özelliklerdir. Bir CSS olarak, bir yazara ihtiyacınız yoksa belirli bir renk şemasının değerini belirtin. Temanın içinde kalmayı kolaylaştırmak istiyorum.

Bunu başarmak için, renk şeması özel olarak genel özel özelliklerdir. Bunlar birazdan tanımlanacaktır. Bu şekilde ekip tasarım değişkenlerini kullanan kişilerin, hangi renk şemasının yalnızca yüzey ve metin renklerini kullanmaları gerekir. color: var(--text1-light) yerine color: var(--text1) kullanın. Renklerin tüm uyarlanması ve döndürülmesi CSS'de çok daha üst düzeyde yapılır.

Aşağıdaki kod bloğunda açık temanın bağlantı stilleri, genel bir özel mülkü açık temaya özel renkle bağlar. Şimdi tümü var(--brand) kullanımında açık marka rengi kullanılacak.

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 şu anda açık tema kullanılıyor. Bu çok eğlenceli ve başarılı bir an! Başka reklam öğelerinde önceden tanımlanmış renklerimizi kullandığımızda, göz önünde bulundurun.

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

Tema parlaklığını azaltma

[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ı genel öğelerini ve temalarla bir daha asla ilgilenmemesi gerekir.

Sonuç

Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? 🙂

Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim. Bir Codepen oluşturun ya da kendi demonuzu yayınlayın, bana tweet'le gönderin, bunu Topluluk remiksleri bölümünü aşağıda bulabilirsiniz.

Kaynak

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