Renk

The CSS Podcast - 006: Color Part One

Renk, her web sitesinin önemli bir parçasıdır. CSS'de renk türleri, işlevler ve işlemler için birçok seçenek vardır.

Hangi renk türünü kullanacağınıza nasıl karar verirsiniz? Renklerinizi nasıl yarı şeffaf hale getirebilirsiniz? Bu derste, projeniz ve ekibiniz için doğru kararları almanıza yardımcı olacak seçenekleri öğreneceksiniz.

CSS'de, dize ve sayı gibi çeşitli veri türleri vardır. Renk bu türlerden biridir ve kendi tanımları için sayılar gibi diğer türleri kullanır.

Sayısal renkler

CSS'de renklerle ilk tanışmanız büyük olasılıkla sayısal renkler aracılığıyla gerçekleşir. Sayısal renk değerleriyle birkaç farklı biçimde çalışabiliriz.

Onaltılık renkler

h1 {
  color: #b71540;
}

Onaltılık gösterim (genellikle onaltılık olarak kısaltılır), RGB için kısa bir söz dizimidir. Bu gösterim, üç birincil renk olan kırmızı, yeşil ve maviye sayısal bir değer atar.

Onaltılık aralıklar 0-9 ve A-F'dir. Altı haneli bir sırayla kullanıldığında, sırasıyla kırmızı, yeşil ve mavi renk kanallarına karşılık gelen 0-255 RGB sayısal aralıklarını temsil eden değerlere dönüştürülür.

Alfa değeri, herhangi bir sayısal renkle de tanımlanabilir. Alfa değeri, şeffaflık yüzdesidir. On altılık kodda, altı haneli dizeye iki haneli daha ekleyerek sekiz haneli bir dize oluşturursunuz. Örneğin, onaltılık kodda siyahı ayarlamak için #000000 yazın. %50 şeffaflık eklemek için #00000080 olarak değiştirin.

Onaltılık ölçek 0-9 ve A-F olduğundan, saydamlık değerleri muhtemelen beklediğiniz gibi değildir. Siyah onaltılık koda (#000000) eklenen bazı önemli ve yaygın değerler şunlardır:

  • Tamamen şeffaf olan% 0 alfa değeri 00'dır: #00000000
  • %50 alfa 80'dir: #00000080
  • %75 alfa BF'dir: #000000BF

İki haneli bir on altılık sayıyı ondalık sayıya dönüştürmek için ilk haneyi 16 ile çarpın (on altılık sayılar 16 tabanlı olduğundan) ve ardından ikinci haneyi ekleyin. %75 alfa için örnek olarak BF'yi kullanalım:

  1. B, 11'e eşittir ve 16 ile çarpıldığında 176 olur.
  2. F, 15'e eşittir
  3. 176 + 15 = 191
  4. Alfa değeri 191'dir (255'in% 75'i).

RGB (Kırmızı, Yeşil, Mavi)

h1 {
  color: rgb(183, 21, 64);
}

RGB renkler, parametre olarak sayılar veya yüzdeler kullanılarak rgb() renk işleviyle tanımlanır. Sayılar 0-255 aralığında, yüzdeler ise % 0 ile%100 arasında olmalıdır. RGB, 0-255 ölçeğinde çalışır. Bu nedenle 255, %100'e, 0 ise %0'a eşdeğerdir.

Siyahı RGB olarak ayarlamak için rgb(0 0 0) olarak tanımlayın. Bu değer, sıfır kırmızı, sıfır yeşil ve sıfır mavidir. Siyah, rgb(0%, 0%, 0%) olarak da tanımlanabilir. Beyaz, tam tersidir: rgb(255, 255, 255) veya rgb(100%, 100%, 100%).

Alfa, rgb() içinde iki yöntemden biriyle ayarlanır. Kırmızı, yeşil ve mavi parametrelerin ardından bir / ekleyin veya rgba() işlevini kullanın. Alfa, yüzde veya 0 ile 1 arasında bir ondalık değerle tanımlanabilir. Örneğin, modern tarayıcılarda% 50 alfa siyah ayarlamak için rgb(0 0 0 / 50%) veya rgb(0 0 0 / 0.5) yazın. Daha kapsamlı destek için rgba() işlevini kullanarak rgba(0, 0, 0, 50%) veya rgba(0, 0, 0, 0.5) yazın.

HSL (Ton, Doygunluk, Parlaklık)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL; ton, doygunluk ve açıklık anlamına gelir. Ton, renk çemberindeki değeri belirtir. Kırmızıdan başlayarak 0 ile 360 derece arasındadır (hem 0 hem de 360). 180 veya% 50 tonu mavi aralığındadır. Gördüğümüz rengin kaynağıdır.

Her açı değerinin neyi temsil ettiğini görselleştirmeye yardımcı olmak için 60 derecelik artışlarla derece değerlerinin etiketlerini içeren bir renk tekerleği

Doygunluk, seçilen tonun ne kadar canlı olduğunu belirtir. Doygunluğu tamamen azaltılmış bir renk (0% doygunluğu) gri tonlamalı olarak görünür. Son olarak açıklık, eklenen ışığın beyazdan siyaha kadar olan ölçeğini tanımlayan parametredir. 100% açıklık değeri her zaman beyaz verir.

hsl() renk işlevini kullanarak hsl(0 0% 0%) veya hatta hsl(0deg 0% 0%) yazarak gerçek siyahı tanımlarsınız. Bunun nedeni, ton parametresinin renk çemberindeki dereceyi tanımlamasıdır. Sayı türünü kullanırsanız bu derece 0-360 arasındadır. Açı türünü (0deg) veya (0turn) değerini de kullanabilirsiniz. Hem doygunluk hem de açıklık yüzdelerle tanımlanır.

Görsel olarak ayrılmış HSL renk işlevi. Ton, renk tekerleğini kullanır. Doygunluk, gri rengin turkuaz rengine karışmasını gösterir. Açıklık, siyahtan beyaza geçişi gösterir.

Alpha, hsl() içinde, ton, doygunluk ve açıklık parametrelerinden sonra bir / ekleyerek rgb() ile aynı şekilde veya hsla() işlevi kullanılarak tanımlanır. Alfa, yüzde veya 0 ile 1 arasında bir ondalık değerle tanımlanabilir. Örneğin, %50 alfa siyahı ayarlamak için: hsl(0 0% 0% / 50%) veya hsl(0 0% 0% / 0.5) kullanın. hsla() işlevini kullanarak hsla(0, 0%, 0%, 50%) veya hsla(0, 0%, 0%, 0.5) yazın.

Renk Anahtar Kelimeleri

CSS'de 148 adlandırılmış renk vardır. Bunlar; mor, domates ve altınbaşak gibi basit İngilizce adlardır. Web Almanağı'na göre en popüler adlardan bazıları siyah, beyaz, kırmızı, mavi ve gridir. Favorilerimiz arasında altın sarısı, alice mavisi ve pembe bulunur.

Standart renklerin yanı sıra özel anahtar kelimeler de kullanılabilir:

  • transparent tamamen şeffaf bir renktir. Aynı zamanda background-color değerinin ilk değeridir.
  • currentColor, color mülkünün bağlama göre hesaplanan dinamik değeridir. Metin renginiz red ise border-color'u currentColor olarak ayarladığınızda bu da kırmızı olur. currentColor değerini tanımladığınız öğede color için tanımlanmış bir değer yoksa currentColor, bunun yerine basamaklandırma tarafından hesaplanır

CSS kurallarında renklerin kullanıldığı yerler

Bir CSS mülkü, değer olarak <color> veri türünü kabul ediyorsa yukarıdaki renk ifade etme yöntemlerinden herhangi birini kabul eder. Metne stil uygulamak için color, text-shadow ve text-decoration-color özelliklerini kullanın. Bu özelliklerin tümü, renk değerini veya değerin bir parçası olarak rengi kabul eder.

Arka planlar için background veya background-color değerini renk olarak ayarlayabilirsiniz. Renkler, linear-gradient gibi degradelerde de kullanılabilir. Renk geçişleri, CSS'de programatik olarak tanımlanabilen bir resim türüdür. Renk geçişleri, onaltılık, rgb veya hsl gibi herhangi bir renk biçimi kombinasyonunda iki veya daha fazla rengi kabul eder.

Son olarak border-color ve outline-color ile kutularınızın kenarlıkları ve dış çizgilerinin rengini ayarlayın. box-shadow mülkü, değerlerden biri olarak rengi de kabul eder.

Öğrendiklerinizi test etme

Renklerle ilgili bilginizi test edin

Aşağıdakilerden hangisi geçerli renktir?

rbga(400 0 1)
rbga, rgba yazım hatası. 400, kabul edilenden daha büyük olduğu için geçersiz.
#0f08
🎉
#OOFZ2
Bu bir onaltılık değer değil, yalnızca 5 basamaklı bir sayı ve Z içerdiği için geçersiz.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Geçersiz hsl rengini tespit edin.

hsl(5, 0%, 90%)
Bu geçerli bir hsl değeridir.
hsl(.5turn 40% 60%)
Bu geçerli bir hsl değeridir.
hsl(0, 0, 0)
🎉 Doğru bildiniz. 2. ve 3. değerler yüzdelik değerler olmalıdır.
hsl(2rad 50% 50%)
Bu geçerli bir hsl değeridir.
hsl(0 0% 0% / 20%)
Bu geçerli bir hsl değeridir.

Kaynaklar