CSS Color 4, web'e geniş renk gamı ve özellikler getiriyor: daha fazla renkler, manipülasyon fonksiyonları ve daha iyi renk geçişleri gibi
25 yıldan uzun süre için sRGB
(standart kırmızı yeşil mavi) tek renktir
CSS gradyanları ve renkleri için renk alanı içeren gam
rgb()
, hsl()
ve onaltılık gibi teklifler. En yaygın renktir
ekran gamı kapasitesi; paydada
bulunmaktır. Büyüdük
içinde renk belirtmeye alışkın.
![Tekrar sayısına göre en popüler renk biçimleri.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/the-popular-color-format-b5aab67b4d3de.png?authuser=19&hl=tr)
Ekranlar çok çeşitli renkler gösterebildiğinden, CSS'nin renklerini bu daha geniş aralıklardan belirtmenin bir yolunu sunuyor. Mevcut renk biçimleri geniş renk aralıkları için dil kullanmıyor.
CSS hiç güncellenmezse 90'ların renk aralıklarında kalır ve kalıcı hale gelir. hiçbir zaman resim ve videolarda bulunan geniş ürün yelpazesiyle eşleşmemelidir. Takılmış, yalnızca gösteriliyor İnsan gözünün görebildiği renklerin% 30'u. Kodlama işlemini gerçekleştirmemize yardımcı olduğunuz için CSS Renk Düzeyi 4'e teşekkür ederiz. esas olarak Lea Verou ve Chris Liley tarafından yazılmıştır.
Chrome, CSS Renk 4 gamlarını destekler ve renk alanları. CSS artık HD (yüksek tanımlı) özelliğini destekleyebilir HD gamlardan renkler belirtirken aynı zamanda uzmanlık alanları.
. Kendiniz deneyin
Bu kılavuz üç bölümden oluşur. Rengin nerede olduğunu hatırlamak için okumaya devam edin. Ardından, renklerin nereye gittiğini okuyun ve HD renge taşıyarak rengi nasıl yönetebileceğinizi öğreneceksiniz.
Genel Bakış
Desteklenen tarayıcılarda% 50 daha fazla renk seçeneği vardır. Asana’da 16 yaşındaki kulağa çok hoş geliyordu. Şimdi birkaç renk tonlarını görünceye kadar bekleyin. bu yeni alanlar gösterilebilir. Aynı zamanda, ekranda duran tüm bu gradyanları yeterli olmadığı için bantlı bu da çözümlenir.
Daha fazla renge ek olarak, muhtemelen ekranın sahip olabileceği en canlı renkler, Yeni renk alanları, yaratıcılığınızı ortaya koymak ve renk sistemleridir. Örneğin, eskiden HSL ve "hafifliği" vardı. kanala, sahip olduğumu gösterdi. Artık CSS'de LCH'nin "algısal hafifliği"ne sahibiz.
![İki renk tablosu yan yana duruyor. İlk tabloda bir HSL gösteriliyor
10 veya daha fazla renkte gökkuşağı ve yanında gri tonlamalı renkler
daha açık hale getirebilirsiniz. İkinci tabloda LCH gökkuşağı gösteriliyor
ama yanındaki gri tonlamalı renkler tutarlı.
Bu, LCH'nin sağlıklı ve sabit bir hafiflik değerine sahipken HSL'nin bunu yapmadığını gösteriyor.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/two-tables-color-are-sid-d7829619631b7.png?authuser=19&hl=tr)
Ayrıca, gradyanlar ve karıştırma bazı yükseltmeler içeriyor: renk alanı desteği, ton ve daha az şerit oluşturma.
Aşağıdaki resimde, karıştırma yükseltmelerinden bazıları gösterilmektedir.
![](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/kleavbJG5AA2namwim8y.png?authuser=19&hl=tr)
. https://codepen.io/web-dot-dev/pen/poZgXQb
Renk ve web'deki sorun, CSS'nin yüksek çözünürlükte hazır olmamasıdır. çoğu kişinin cebinde, kolunda veya duvara monte ettiği ekranlar yüksek tanımlı renklere hazır. Ekranların renk özelliği CSS'den daha hızlı büyüdü ancak artık CSS'nin de amacı bu.
"Daha fazla renk"ten çok daha fazlası var. Bu belgelerin sonunda daha fazla renk belirtebilir, renk geçişlerini geliştirebilir ve en iyi renk alanlarını ve renk gamlarını öğrenmenize yardımcı olur.
Renk gamı nedir?
Renk gamı bir şeyin boyutunu temsil eder. "Milyonlarca renk" kelime öbeği bir ekran gamı veya seçmesi gereken renk aralığı hakkında yorum yapma var. Aşağıdaki resimde, üç gam karşılaştırılmıştır ve boyut ne kadar büyükse daha fazla renk sunuyor.
Renk gamının adı da olabilir. Basketbol topu veya beyzbol topu ya da vente kahve fincanı ile Grande gibi; beden adı, insanların bahsedeceğim. Bu renk gamı adlarını öğrenmek, iletişim kurmanızı ve hızlı bir şekilde renk aralığını anlayabilirsiniz.
Bu makalede, önceki renk gamları incelenmektedir. Web sitemiz g.co/newsinitiative/labs üzerinden Daha fazla renk ve alana erişin bölümünde yedi yeni renk gamı.
İnsanların görsel gamı
Renk gamları genellikle insan görsel gamıyla karşılaştırılır; tamamını insan gözünün görebileceğine inandığımız renktir. HVS genellikle bir renk diyagramını inceleyin:
![Ortasında boş bir üçgen ve canlı bir renk geçişi bulunan at ayakkabısı şekli.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-horse-shoe-shape-is-fil-c574400e794bc.png?authuser=19&hl=tr)
İnsan olarak görebildiğimiz en dıştaki şekil, içteki üçgen ise
rgb()
işlev aralığı, yani sRGB renk alanı.
Yukarıda gördüğünüz üçgenler gibi, renk gamı boyutlarını karşılaştırdığınız için üçgenleri bölümüne göz atın. Bu, sektörün renk gamı ve rengi arasındaki karşılaştırabilirsiniz.
Renk alanı nedir?
Renk alanları, bir gamın düzenlemeleri olup bir şekil ve bir yöntem oluşturma bazı ipuçları vereceğim. Çoğu, küp veya silindir gibi basit 3D şekillerdir. Bu renk düzenleme hangi renklerin yan yana olduğunu ve bu renklere ve renklerin ara değerlenmesi işe yarar.
RGB, dikdörtgen bir renk alanına benzer. Burada renklere belirli bir koordinatlarını verir. HSL, silindir şekilli bir renk alanıdır. Renklere bir ton açısıyla ve 2 eksen üzerinde koordinatlarla erişildiği
![Renklerin her bir alanda bir şekilde nasıl paketlendiğini göstermek için yarım kesim açık bir RGB küpü ve HSL silindirine dilimler yan yana gösterilmiştir.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-half-cut-open-rgb-cube-53a16bc324d2a.png?authuser=19&hl=tr)
Düzey 4 spesifikasyonu 12, yeni renk alanları oluşturabilirsiniz. Bunlar 4 renge ek olarak Daha önce kullanılabilir alan:
Renk gamı ve renk alanı özeti
Renk alanı, renk gamının bir renk aralığı olduğu renklerin eşlenmesidir. Renk gamını toplam tanecik, renk alanını da şişe olarak düşünün parçacıkları tutacak şekilde tasarlanıyor.
Burada Alexey Ardov'un hazırladığı etkileşimli görselde renk alanları. Bu demoda üzerine doğrultun, sürükleyin ve yakınlaştırın. Renk alanını değiştirme görebilirsiniz.
- Düşük aralık veya dar gibi çeşitli renkler hakkında konuşmak için renk gamları kullanın yüksek veya geniş bir yelpazede
- Renk düzenlemeleri ve bir rengi belirtmek için kullanılan söz dizimi hakkında konuşmak için renk boşlukları renkleri işleme ve renk aracılığıyla ara değerleme.
![Birçok renkli noktayla dolu bir küp.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-cube-filled-many-multi-2ecb2e34ca6.png?authuser=19&hl=tr)
Klasik renk alanlarına dair {#classic-color-spaces}
CSS Renk 4, bir dizi yeni öğeyi yeni özellikleri ve araçları öğreneceğiz. İlk olarak, rengin biraz önce bu özellikleri anlatacağım.
2000'lerden beri tüm CSS mülkleri için aşağıdakileri kullanabiliyorsunuz
değer olarak bir rengi kabul edenler: onaltılık (onaltılık sayılar), rgb()
, rgba()
,
hotpink
gibi bir ad veya
currentColor
.
2010 yılı civarında, tarayıcınıza bağlı olarak CSS
hsl()
renkler. Ardından 2017'de,
alfa işaretli onaltılık görüntülenmiştir. Sonuncu, yalnızca
hwb()
kısa süre önce
destekler.
Bu klasik renk alanlarının tümü, aynı gamdaki sRGB'deki renge referans verir.
HEX
Onaltılık renk alanı, R, G, B ve A'yı onaltılı sayılardır. Aşağıdakiler kod örnekleri, bu söz diziminin kırmızı, yeşil ve mavi artı değerlerini belirtebileceği tüm yöntemleri gösterir. opaklık.
.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 veya 0 ile 100 arasında bir yüzde olarak belirtilmesine olanak tanır. Bu söz dizimi, oradaki söz dizimi normalleştirmelerinden önce Bu nedenle, aralarda virgül ve virgül içermeyen söz dizimleri göreceksiniz. Hareket halinde artık virgüle gerek yoktur.
.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 diline ve ona odaklanan ilk renk alanlarından biri HSL (ton doygunluğu ve açıklık) , metindeki tüm renkleri sRGB gamı ancak beyninizin kırmızı, yeşil ve mavinin renklerini bilmesini gerektirmez. etkileşimde bulunur. RGB gibi, söz diziminde de virgül vardı, ancak artık virgüle gerek yoktur.
.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 nasıl tanımladığını ele alan bir başka sRGB gamı renk alanı HWB'dir (ton, beyazlık, siyahlık). Yazarlar bir ton seçebilir ve beyaz veya siyah tonlar kullanabilir istedikleri rengi bulmaları gerekir.
.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'desRGB olmayan renk alanları ilk zamanlarda kullanıma sunuldu ancak zamanla tasarımcıların ve geliştiricilerin kullanımında artış. Hangisinin geliştirebileceğiniz güçlü bir araçtır. Örneğin, içerik kemeri. Her renk alanı benzersiz özellikler sunar ve eklenmiş olduğunu varsayalım. Bunlarla küçük bir başlangıç yapıp gerekir.
Kaynaklar
Renk düzeyi 5 makalelerimizin devamını okuyun.
Ayrıca web'de daha fazla bilgiye ulaşabilirsiniz:
- W3C'den CSS Renk Modülü Düzeyi 4
W3C'den CSS Renk Modülü Düzeyi 5
Ve araçlar: