CSS Renk 4, web'e daha fazla renk, değişiklik işlevi ve daha iyi renk geçişleri gibi geniş renk gamı araçları ve özellikleri sunar.
25 yıldan uzun süredir
sRGB
(standart kırmızı yeşil mavi), CSS gradyanları ve renkleri için
rgb(), hsl() ve onaltılık gibi renk alanı
seçenekleri bulunan tek renk gamı olmuştur. Ekranlar arasında en yaygın olan renk gamı özelliğidir ve ortak bir paydadır. İçindeki renkleri belirtmeye alıştık.
Ekranlar çok çeşitli renkler gösterebilmeye uygun hale geldikçe, CSS'nin renkleri bu geniş aralıklar içindeki renkleri belirtmek için bir yola ihtiyacı olur. Mevcut renk biçimlerinde, geniş renk aralıkları için dil yoktur.
CSS hiç güncellenmezse sonsuza kadar 90'ların renk aralıklarında kalır, hiçbir zaman resimlerde ve videolarda bulunan geniş yelpaze teklifleriyle eşleşmeye zorlanmazdı. Tutulmuştur, insan gözünün görebildiği renklerin yalnızca% 30'u gösterilir. Başta Lea Verou ve Chris Liley tarafından yazılan 4. Renk Düzeyi CSS'ye kaçmamıza yardımcı olduğu için teşekkür ederiz.
Chrome, CSS Renk 4 gamlarını ve renk alanlarını destekler. CSS artık HD (yüksek tanımlı) ekranları destekleyebilir, HD gamlarındaki renkleri belirtir ve uzmanlıkları olan renk alanları sunar.
Kendiniz deneyin
Bu kılavuz üç bölümden oluşur. Daha önce renk kattığı yerleri hatırlamak için okumaya devam edin. Ardından, renge nereye gittiğini ve HD renge taşıyarak gelecekte rengi nasıl yöneteceğinizi öğrenin.
Genel bakış
Desteklenen tarayıcılarda% 50 daha fazla renk seçeneği bulunur. 16 milyon rengin kulağa çok hoş geldiğini düşünüyorsanız bu yeni alanlardan bazılarının kaç renk gösterebileceğini görene kadar bekleyin. Ayrıca, yeterli bit derinliği olmadığı için bantlı tüm bu gradyanları düşünün, bu da çözülmüştür.
Daha fazla renge (muhtemelen ekranın yapabileceği en canlı renklere) ek olarak, yeni renk alanları, renk sistemlerini yönetmek ve oluşturmak için benzersiz araçlar ve yöntemler sağlar. Örneğin, bundan önce web geliştiricilerin en iyisi olan HSL ve "lightness" kanalımız vardı. Şimdi CSS'de, LCH'nin "algılanan hafifliği"ni kullanabiliyoruz.
Dahası, renk geçişleri ve karıştırma bazı iyileştirmeler yapar: renk alanı desteği, ton interpolasyonu seçenekleri ve daha az şerit oluşturma.
Aşağıdaki resimde, bazı yükseltmeler gösterilmektedir.
https://codepen.io/web-dot-dev/pen/poZgXQb
Renk ve web ile ilgili sorun, CSS'nin yüksek çözünürlüklü resimler olmamasıdır. Çoğu kişinin cebinde, üst tarafında veya duvara monte ettiği ekranlar, geniş yelpazede ve yüksek çözünürlüklü renklere sahiptir. Ekranların renk özelliği CSS'ye göre daha hızlı büyüdü. Şimdi CSS buna yetişecek.
"Daha fazla renk"ten çok daha fazlası var. Bu belgelerin sonunda, daha fazla renk belirleyebilecek, gradyanları iyileştirebilecek ve her görev için en iyi renk alanlarını ve renk gamlarını seçebileceksiniz.
Renk gamı nedir?
Gamut, bir şeyin boyutunu temsil eder. "Milyonlarca renk" ifadesi, bir ekranın gamı veya aralarından seçim yapılması gereken renk aralığıyla ilgili bir yorumdur. Aşağıdaki resimde, üç gam karşılaştırılmıştır ve boyut ne kadar büyükse o kadar çok renk sunmaktadır.
Renk gamının da adı olabilir. Örneğin, basketbol topu, beyzbol topu, havalandırma ızgarası ve büyük kahve fincanı gibi. Beden adı, insanların iletişim kurmasına yardımcı olabilir. Bu renk gamı adlarını öğrenmek, iletişim kurmanıza ve bir renk aralığını hızlı bir şekilde anlamanıza yardımcı olur.
Bu makalede, önceki renk gamları incelenmiştir. Daha fazla renge ve yeni alanlara erişin bölümünde yedi yeni ürün grubu hakkında bilgi edinebilirsiniz.
İnsan görsel gamı
Renk gamları genellikle insan görsel gamıyla, yani insan gözünün görebildiğine inandığımız renk gamı ile karşılaştırılır. HVS genellikle aşağıdaki gibi bir kromatiklik diyagramıyla gösterilir:
En dıştaki şekil insan olarak görebildiğimiz şekildir. İç üçgen ise rgb() fonksiyonları aralığı, yani sRGB renk alanıdır.
Yukarıda üçgenleri gördüğünüz gibi, gam boyutlarını karşılaştırdığımızda, aşağıda üçgenleri de görebilirsiniz. Sektörde renk gamları hakkında iletişim kurma ve bunları karşılaştırma yöntemi budur.
Renk alanı nedir?
Renk alanları, şekil oluşturan ve renklere erişme yöntemi oluşturan bir gamın düzenlemeleridir. Bunların çoğu küp veya silindir gibi basit 3D şekillerdir. Bu renk düzenlemesi, hangi renklerin yan yana olduğunu ve renklere erişip bunları interpolasyon uygulama yöntemiyle belirler.
RGB, renklere 3 eksende koordinatlar belirlenerek erişildiği dikdörtgen renk alanı gibidir. HSL, renklere ton açısı ve 2 eksende koordinatlarla erişilen silindir şeklindeki renk alanıdır
4. düzey spesifikasyonu, renkleri aramak için 12 yeni renk alanı sunar. Bunlar, önceden kullanılabilen 4 renk alanına ek olarak sunulmaktadır:
Renk gamı ve renk alanı özeti
Renk alanı, renk gamının bir renk aralığı olduğu durumlarda renklerin eşlenmesidir. Renk gamını, parçacıkların toplamı ve bu tanecik aralığını barındırmak için yapılmış bir şişe olarak renk alanı olarak düşünün.
Aşağıda Alexey Ardov'un renk alanlarının gösterildiği etkileşimli bir görsel yer almaktadır. Bu demoda kamerayı yakınlaştırın, sürükleyin ve yakınlaştırın. Diğer alanların görselleştirmesini görmek için renk alanını değiştirin.
- Düşük aralık veya dar gam ile yüksek aralık veya geniş gam gibi çeşitli renkler hakkında konuşmak için renk gamlarını kullanın.
- Renk düzenlemeleri hakkında konuşmak için renk alanlarını ve bir rengi belirtmek, rengi değiştirmek ve renklerin arabuluculuğu yapmak için kullanılan söz dizimini kullanın.
Klasik renk alanları {#classic-color-spaces}
CSS Color 4, CSS ve renk için bir dizi yeni özellik ve aracı özetler. İlk olarak, bu yeni özelliklerden önceki rengi özetleyelim.
2000'lerden beri, bir rengi değer olarak kabul eden tüm CSS özellikleri için şunları kullanabiliyorsunuz: onaltılık (onaltılık sayı), rgb(), rgba(), hotpink gibi ada göre veya currentColor gibi anahtar kelimelerle.
2010 yılı civarında tarayıcınıza bağlı olarak CSS hsl() renkleri kullanabilir. Daha sonra 2017'de alfa ile onaltılık kullanıma sunuldu. Son olarak, çok kısa bir süre önce hwb() tarayıcılarda destek almaya başladı.
Bu klasik renk alanlarının tümü aynı gamdaki sRGB rengi referans alır.
ONALTILIK
Onaltılık renk alanı, R, G, B ve A'yı onaltılık sayılarla belirtir. Aşağıdaki kod örneklerinde, bu söz diziminin kırmızı, yeşil ve mavi artı opaklığı belirtebileceği tüm yollar gösterilmektedir.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
RGB renk alanı, kırmızı, yeşil ve mavi kanallara doğrudan erişim sağlar. 0 ile 255 arasında bir tutarın veya 0 ile 100 arasında bir yüzde değeri olarak belirtilmesine olanak tanır. Bu söz dizimi, teknik özelliklerde bazı söz dizimi normalleştirmelerinden önce kullanılıyordu. Bu yüzden, genel olarak virgül ve virgül yok söz dizimini göreceksiniz. Artık virgül kullanılması gerekmiyor.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
İnsan dili ve iletişim becerisine odaklanan ilk renk alanlarından biri olan HSL (ton doygunluğu ve açıklık), sRGB gamındaki tüm renkleri sunarken beyninizin kırmızı, yeşil ve mavinin nasıl etkileşimde bulunduğunu bilmesini gerektirmez. RGB gibi, başlangıçta söz diziminde de virgül kullanılıyordu, ancak ileride virgül kullanılması gerekmiyor.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
İnsanların rengi tanımlamasına odaklanan bir başka sRGB renk gamı renk alanı da HWB'dir (ton, beyazlık, siyahlık). Yazarlar bir ton seçip beyaz veya siyahı karıştırarak istedikleri rengi bulabilirler.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
Sonraki adımlar
Yeni renk alanları, söz dizimleri ve araçlar hakkında bilgi edinin, ardından HD renge nasıl geçiş yapacağınızı öğrenin.
Web'deki sRGB olmayan renk alanları daha çok kullanılmaya başlandı, ancak zaman içinde tasarımcıların ve geliştiricilerin kullanımında bir artış göreceksiniz. Örneğin, bir tasarım sisteminin hangi renk alanında kurulacağını bilmek, içerik oluşturucunun araç kemerinde yer alırken güçlü bir araçtır. Her renk alanı, benzersiz özellikler ve CSS spesifikasyonuna eklenmesi için bir neden sunar. Bunlarla küçük adımlarla başlayıp gerektiğinde ekleme yapmak sorun yaratmaz.
Kaynaklar
Renk düzeyi 5 makalelerimizin diğer bölümlerini okuyun.
Ayrıca, web'de bununla ilgili ek kaynaklar bulabilirsiniz:
- W3C'den CSS Renk Modülü Düzey 4
W3C'den CSS Renk Modülü Düzey 5
Araçlar: