Renk

CSS Podcast'i - 006: Birinci Renk Bölümü

Renk, her web sitesinin önemli bir parçasıdır ve 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ı saydam yaparsınız? Bu derste projeniz ve ekibiniz için doğru kararlar almanıza yardımcı olacak seçenekleri öğreneceksiniz.

CSS, dizeler ve sayılar gibi çeşitli veri türlerine sahiptir. 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 karşılaşmanız büyük olasılıkla sayısal renklerdir. Sayısal renk değerlerini birkaç farklı biçimde kullanabiliriz.

Onaltılık renkler

h1 {
  color: #b71540;
}

Onaltılı gösterim (genellikle onaltılık olarak kısaltılır), RGB için kullanılan bir kestirim söz dizimidir. Kırmızı yeşile ve maviye, üç ana renk olan kırmızı yeşil ve maviye sayısal bir değer atanır.

Onaltılık aralıklar 0-9 ve A-F'dir. Altı haneli bir dizide kullanıldıklarında bunlar, sırasıyla kırmızı, yeşil ve mavi renk kanallarına karşılık gelen 0-255 arasındaki RGB sayısal aralıklarına çevrilir.

Herhangi bir sayısal renkte alfa değeri de tanımlayabilirsiniz. Alfa değeri, şeffaflığın yüzdesidir. Onaltılık kodda, altı haneli diziye bir iki basamak daha ekleyerek sekiz haneli bir dizi oluşturursunuz. Örneğin, onaltılık kodda siyahı ayarlamak için #000000 yazın. %50 şeffaflık eklemek için bunu #00000080 olarak değiştirin.

Onaltılık ölçek 0-9 ve A-F olduğundan, şeffaflık değerleri muhtemelen tam olarak beklediğiniz gibi değildir. Siyah onaltılık koda eklenen bazı ortak değerleri (#000000) burada bulabilirsiniz:

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

İki basamak onaltılık bir sayıyı ondalık basamağa dönüştürmek için ilk basamağı 16 ile çarpın (onaltılık taban 16 tabanı olduğu için), ardından ikinci basamağı ekleyin. %75 alfa için örnek olarak BF kullanılır:

  1. B 11'e eşittir ve bunu 16 ile çarpıldığında 176'ya eşit olur
  2. F, 15'e eşittir
  3. 176 + 15 = 191
  4. Alfa değeri 255'in %191 ila %75'idir.

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

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

RGB renkleri, rgb() renk işleviyle tanımlanır ve parametre olarak sayılar veya yüzdeler kullanılır. Sayıların 0-255 aralığında ve yüzdelerin % 0 ile%100 arasında olması gerekir. RGB, 0-255 ölçeğinde çalışır. Dolayısıyla 255, %100'e ve 0 ila 0'a eşittir.

RGB'de siyahı ayarlamak için bunu sıfır kırmızı, sıfır yeşil ve sıfır mavi olmak üzere rgb(0 0 0) olarak tanımlayın. Siyah renk de rgb(0%, 0%, 0%) olarak tanımlanabilir. Beyaz renk, bunun tam tersidir: rgb(255, 255, 255) veya rgb(100%, 100%, 100%).

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

HSL (Ton, Doygunluk, Açıklık)

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

HSL; ton, doygunluk ve açıklık anlamına gelir. Ton, renk çemberindeki 0 ile 360 derece arasındaki değeri kırmızıyla (0 ve 360) başlar. Ton, 180 veya% 50 olarak mavi aralıkta yer alır. Gördüğümüz rengin kaynağıdır.

Her açı değerinin neyi temsil ettiğini görsellere yardımcı olan 60 derecelik artışlarla derece değerleri etiketleri içeren bir renk çemberi

Doygunluk, seçilen tonun ne kadar canlı olduğunu gösterir. Tamamen solmuş bir renk (doygunluk 0% ile) gri tonlamalı görünür. Son olarak, açıklık, eklenen ışığın beyazdan siyaha ölçeğini tanımlayan parametredir. 100% açıklığı size her zaman beyaz renk verir.

hsl() renk işlevini kullanarak hsl(0 0% 0%) ve hatta hsl(0deg 0% 0%) yazarak gerçek siyahı tanımlarsınız. Bunun nedeni, hue parametresinin renk çemberindeki dereceyi tanımlamasıdır (sayı türünü kullanırsanız bu değer 0-360 olmalıdır). (0deg) veya (0turn) olan açı türünü 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 çemberini kullanır. Doygunluk, camgöbeği ile karışan gri rengi gösteriyor. Işık siyah beyaz renkte görünür.

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

Renkli Anahtar Kelimeler

CSS'de 148 adlandırılmış renk vardır. Bunlar mor, domates ve altınbaşak gibi sade İngilizce adlardır. Web Almanağı'na göre en popüler adlardan bazıları siyah, beyaz, kırmızı, mavi ve gridir. Favorilerimiz altınbaşak, aliceblue ve hotpink.

Standart renklerin yanı sıra, kullanılabilecek özel anahtar kelimeler de vardır:

  • transparent tamamen şeffaf bir renktir. Bu, aynı zamanda background-color değerinin başlangıç değeridir.
  • currentColor, color özelliğinin içeriğe dayalı olarak hesaplanan dinamik değeridir. Metin renginiz red ise ve ardından border-color değerini currentColor olarak ayarlarsanız bu renk de kırmızı olur. currentColor tanımladığınız öğe tanımlanmış color değerine sahip değilse currentColor basamak yerine basamakla hesaplanır

CSS kurallarında renk kullanımı

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

Arka planlar için background veya background-color değeri olarak bir renk ayarlayabilirsiniz. Renkler, linear-gradient gibi gradyanlarda da kullanılabilir. Renk geçişleri, CSS'de programlı olarak tanımlanabilen bir resim türüdür. Gradyanlar, 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, kutularınızdaki kenarlıkların ve dış çizgilerin rengini ayarlayın. box-shadow özelliği, değerlerden biri olarak rengi de kabul eder.

Öğrendiklerinizi sınayın

Renk bilginizi test edin

Aşağıdakilerden hangileri geçerli renklerdir?

rbga(400 0 1)
rbga, rgba'nın bir yazım hatasıdır ve 400 yine de kabul edeceğinden daha büyük olduğundan geçersizdir.
#0f08
🎉
#OOFZ2
Bu, onaltılık bir değer değildir, yalnızca 5 rakamdan oluşmaktadır ve Z içerdiği için geçersizdir.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Geçersiz hsl rengini tespit eder.

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)
🎉 Buldunuz, 2. ve 3. değerler yüzde 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