Renk

The CSS Podcast - 006: Color Part One

Renk, her web sitesinin önemli bir parçasıdır. CSS'de renkleri belirtmek ve değiştirmek 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.

Renk seçme

Adlandırılmış renkler

Renk seçmenin en kolay yolu, CSS'deki 148 adlandırılmış renk arasından birini seçmektir. Bunlar purple, tomato ve goldenrod gibi basit İngilizce adlardır. Web Almanağı'na göre en popüler isimlerden bazıları black, white, red, blue ve gray'dir. Favorilerimiz arasında goldenrod, aliceblue ve hotpink yer alıyor.

Sayısal renkler

Renk adları kullanışlı olsa da bu grupta bulunmayan belirli renkleri kullanmanız gerekebilir. Renkleri, sayısal değerlerle birkaç farklı biçimde belirtebilirsiniz.

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 söz dizimi, üç 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ığın yüzdesidir. On altılık kodda, altı haneli dizeye iki basamak 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 sayı ölçeği 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 ise 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.

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 tanımlar. Bu değer, 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.

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.

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.

Yüksek çözünürlüklü renkler

RGB ve HSL, sRGB gamutundaki renkleri tanımlar. Yeni monitörler, bu biçimlerle tanımlanabilecekten ve sRGB gamutunun dışından çok daha fazla rengi destekler. Bu renkleri çeşitli CSS işlevleriyle seçebilirsiniz.

color() işlevi

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

CSS color() işlevi, belirli bir renk alanında bir renk seçmenizi sağlar. İlk bağımsız değişken, kullanılacak renk alanıdır ve aşağıdaki kanallar için seçenekleri tanımlar. rgb() gibi, bir /'den sonra 0 ile 1 arasında bir sayı veya yüzde ayarlayarak alfa kanalını ayarlayabilirsiniz.

Örneğin, önceki kod snippet'inde rgb(183 21 64) olarak tanımlanan koyu kırmızı RGB rengi, yüzdelerle rgb(72% 8% 25%) olarak tanımlanabilir. color(srgb .72 .08 .25) ile aynı rengi belirtmek için color() işlevini srgb anahtar kelimesiyle kullanabilirsiniz.

srgb, renk alanını ayarlar ve sonraki üç bağımsız değişkenin kırmızı, yeşil ve mavi olduğunu belirtir. Değerler 0 ile 255 arasında değil, 0 ile 1 arasında değişiyor.

rgb()'e benzer şekilde, alfa değerini / ve yüzde veya 0 ile 1 arasında bir ondalık sayı ile ayarlayabiliriz.

color() işleviyle kullanabileceğiniz birçok renk alanı vardır. Bu alanların her biri farklı güçlü yönlere ve kullanım alanlarına sahiptir.

Görüntülü P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

Display P3 gamutu, sRGB'ye kıyasla% 50 daha fazla renk içerir. color() işlevini kullanarak Display P3 renk uzayında Display P3 gamutundaki tüm renkleri belirtebilirsiniz.

Display P3'te siyahı ayarlamak için color(display-p3 0 0 0) olarak tanımlayın. color() işlevi için display-p3 renk alanını belirttikten sonra üç kanalınız olur: color(srgb)'ye benzer şekilde kırmızı, yeşil ve mavi. Ancak kanal değerleri daha geniş bir renk alanındaki koordinatları temsil ettiğinden aynı kanal değerleri farklı anlamlara gelir.

color(srgb 1 .5 0), color(display-p3 0.93596 0.52724 0.1983) ile eşdeğer olan turuncu bir renktir. Turuncuyu sRGB alanından color(display-p3 1 .5 0) alanına genişleterek daha da canlı hale getirebiliriz.

Oklab

Oklab, oklab() işlevi, açıklık, a ve b kanallarıyla tanımlanır. Bu araç, ton ve açıklığı koruyarak pürüzsüz gradyanlar oluşturmak ve bir rengin doygunluğunu ayarlamak için kullanışlıdır.

h1 {
  color: oklab(75% 0.1 0.1)
}

Parlaklık kanalı 0 ile 1 veya 0% ile 100% arasındadır. Açıklık değeri 0 olan renkler her zaman siyah olur.

a kanalı -0.4 ile 0.4 veya 0% ile 100% arasındadır. Düşük değerler daha yeşil, yüksek değerler ise daha kırmızıdır.

b kanalı -0.4 ile 0.4 veya 0% ile 100% arasındadır. Düşük değerler daha mavi, yüksek değerler ise daha sarı görünür.

OkLCh

OkLCh, OKLab'in kutup veya silindirik biçimidir ve açıklık, renk yoğunluğu ve ton kanallarıyla tanımlanır. Renkleri algısal olarak tekdüze bir şekilde ayarlamak için kullanışlıdır. Bu, tonda yapılan değişikliklerin bir rengin ne kadar açık veya doygun görüneceğini etkilemeyeceği anlamına gelir.

h1 {
  color: oklch(80% 0.1 200)
}

HSL'de açıklık ve ton ile çalıştınız. Renk doygunluğu, renk yoğunluğuna benzer. Siyah için oklch(0 0 0), beyaz için oklch(1 0 0) tuşunu kullanabilirsiniz.

Parlaklık kanalı 0 ile 1 veya 0% ile 100% arasındadır. Açıklık değeri 0 olan renkler her zaman siyah olur.

Renk kanalında, rengin ne kadar canlı olacağı belirlenir. 0 veya% 0 değeri, rengin doygunluğunu azaltır. Daha yüksek değerler ise daha fazla renk içerir. 100% değeri .4 ile aynıdır ancak .4'a yakın değerlerle gamutun dışına çıkmak mümkündür.

Ton, hsl() gibi derece cinsinden belirtilir.

OkLCh, Display P3 gibi bir gam ile sınırlı değildir. Bu nedenle, görüntülenebilen renkler oluşturduğunuzdan emin olmanız gerekir. oklch(80% 50% 200), sayısal olarak makul bir renk gibi görünen ancak Display P3 gamutunun dışında olan parlak bir mavidir.

Diğer alanlar

CSS'de renkleri belirtmenin birçok yolu vardır ve bunların hepsini öğrenmeniz gerekmez. rgb() ve Hex biçimleri, tasarım araçlarında ve mevcut kodda yaygın olarak kullanılır ve bu biçimleri bilmek faydalıdır. Tahmin edilebilir şekilde değiştirilebilecek bir biçimi bilmeniz de faydalı olacaktır. hsl veya oklch değerlerini doğrudan değiştirebilir ve ortaya çıkacak rengin ne olacağını anlayabilirsiniz.

Daha fazla renge ve yeni alanlara erişme başlıklı makalede daha fazla bilgi edinebilirsiniz.

Sistem renkleri

Mor veya turkuaz gibi adlandırılmış renklere ek olarak özel anahtar kelimeler de kullanılabilir:

• transparent tamamen şeffaf bir renktir. Ayrıca background-color
• currentColor, color mülkünün bağlama göre hesaplanan dinamik değeridir. Metin renginiz red ise border-color'u currentColor olarak ayarlarsanız border-color da red olur. currentColor değerini tanımladığınız öğede renk için tanımlanmış bir değer yoksa currentColor, bunun yerine basamaklama tarafından hesaplanır.

Renkleri değiştirme

Sitenizde kullanabileceğiniz bir renk paletiniz olsa da fareyle üzerine gelme durumları, kenarlıklar ve diğer kullanıcı arayüzü öğeleri için bu renklerin varyantlarına ihtiyacınız olabilir. Her rengi belirtebilirsiniz ancak CSS, bu varyantları oluşturmak için renkleri dönüştürmenin yollarını da sağlar.

color-mix()

İki rengi karıştırmanın sonucunu kullanmak için color-mix() yöntemini kullanabilirsiniz. Bu özellik, bir rengi beyaz veya siyahla karıştırarak daha açık ya da daha koyu bir varyant oluşturmak için kullanışlıdır.

color-mix() işlevini kullanmak için iki rengi, bunların nasıl karıştırılmasını istediğinizi (interpolasyon yöntemi) ve her bir rengin ne kadarını istediğinizi tanımlamanız gerekir.

Tonu olan renk alanlarında, renk tekerleğinde hangi yönde ilerlemek istediğinize de karar verebilirsiniz. Varsayılan olarak shorter yolu kullanılır ancak longer veya increasing ve decreasing'ı da seçebilirsiniz.

Renk alanı ve yön birlikte, enterpolasyon yöntemini oluşturur.

Karıştırılacak her rengin miktarını da belirtebilirsiniz.

Göreli renk söz dizimi

Ayrıca, herhangi bir rengi alıp yeni bir renk oluşturmak için üzerinde hesaplama yapmanıza olanak tanıyan göreli renk söz dizimini kullanarak bir renkle daha doğrudan çalışabilirsiniz.

h1 {
  color: oklch(from red l c h);
}

oklch() işlevini kullandığınızda açıklık, renk doygunluğu ve ton kanallarıyla çalışırsınız. from anahtar kelimesinden sonra herhangi bir renk ve söz dizimi belirtebilirsiniz. Bu işlem, her kanal değerini harf olarak kullanmanıza olanak tanır. Bu işlem, herhangi bir ayarlama yapılmadan kırmızı renkte çözülür.

Kanal değerlerini değiştirmek için calc() işlevini kullanarak ayarlamalar yapabilir veya kanalı tamamen değiştirebilirsiniz. Burada aynı red rengini kullanıyoruz ancak oklch(62% 0.25 29) ile tanımlıyoruz.

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

Parlaklık kanalı 62% / 2 veya 31%. Renk kanalında değişiklik olmadığı için 0.25 değerini alır. Tonu kanal 180. Bu işlem sonucunda yeni bir koyu yeşil renk olan oklch(31% 0.25 180) oluşturulur.

Giriş rengi olarak genellikle özel bir mülk kullanırsınız. Bu sayede renk varyasyonlarını dinamik olarak oluşturabilirsiniz.

Bunu herhangi bir renk işleviyle yapabilirsiniz. Yapmak istediğiniz değişiklikleri açıklayan kanallara sahip renk işlevleriyle bunu yapmanız faydalıdır. Örneğin, bir rengin açıklığını ayarlamak istiyorsanız doğrudan açıklık kanalını değiştirebileceğiniz için oklch veya hsl'ü seçin.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

Göreli Renk Söz Dizimini (RCS) kullanarak sitenizde kullanabileceğiniz bir renk paleti oluşturabilirsiniz.

Gamut dışı renkler

İçeriğiniz, geniş renk gamını destekleyen veya desteklemeyen farklı ekranlarda gösterilir. Ekran tarafından desteklenmeyen bir renk belirtirseniz ekranda gösterilebilecek benzer bir renk bulmak için gamut eşleme adı verilen bir işlemden geçer. Bu durumlarda belirli renkleri tanımlamak istiyorsanız color-gamut medya sorgusunu kullanabilirsiniz.

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

Bir CSS mülkü değer olarak <color> veri türünü kabul ediyorsa daha önce açıklanan 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ızdaki kenarlıkların ve dış çizgilerin rengini ayarlayın. box-shadow mülkü, değerlerden biri olarak rengi de kabul eder.

Öğrendiklerinizi test etme

Renklerle ilgili bilginizi test edin

Kaynaklar

• HSL ile açıları nasıl kullanabileceğinizi gösteren kullanışlı bir demo
• Renklerle ilgili kapsamlı bir rehber
• Geniş renk gamına sahip renkler hakkında kapsamlı bir kılavuz
• [video] Onaltılık kodların nasıl okunacağıyla ilgili açıklama
• Onaltılık kodlar nasıl çalışır?