Yüksek tanımlı CSS renk rehberi

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

Adam Argyle

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.

https://almanac.httparchive.org/en/2022/css#colors

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ı.

Geniş ve dar renkler arasında geçiş yapan bir dizi resim gösteriliyor renk canlılığını ve etkilerini gösteren resim gamları.
. 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.

Kendiniz için önizleme Codepen'de

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.

En üstteki iki renk karışımı, sRGB renklerine sahip sRGB'dedir. Alttaki iki renk karması ekran p3'tedir. Görüntülü p3 daha fazlasını içeriyor canlı renkler ve karışımlar ortaya çıkan siyah beyaz, Burada sRGB biraz doygunluğunu yitirmiş görünür ve ortadaki karışımlar siyah beyaz sonuçlarla karşılaşmazsınız.
. 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:

Kaynak: Wikipedia

İ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

https://en.wikipedia.org/wiki/HSL_and_HSV

Düzey 4 spesifikasyonu 12, yeni renk alanları oluşturabilirsiniz. Bunlar 4 renge ek olarak Daha önce kullanılabilir alan:

• Onaltılık
• RGB
• HSL
• HWB

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.

ziyaret edin.

Yukarıda, RGB küp renk alanına uyan sRGB parçacık gamı Resim kaynağı

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 1

Kaynak

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 1

Kaynak

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 3.1

Kaynak

İ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

Tarayıcı Desteği

• . giriş
• . giriş
• . 96
• . 15

Kaynak

İ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.

• CSS göreli renk söz dizimi
• CSS renk karması

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

• CSS'de LCH renkleri: Ne, neden ve nasıl?

• Lab'den daha mı iyi? Gamut azaltma: CIE Lab ve OKLab

• Web'de daha zengin renklere doğru

• Okhsv ve Okhsl: Renk seçimi için iki yeni renk alanı

• Chromium'da daha zengin renklere (PDF)

• LCH en iyi renk alanıdır.

• Erişilebilir renk sistemleri tasarlama

• Renk Alanları, Hannah Weller

• Display-P3 ile CSS'de Geniş Gamut Rengi

• CIE 1931 renk alanı

• CSS'de Renk Biçimleri

• Renk Alanları - Bartosz Ciechanowski

Ve araçlar:

• afc163.github.io/color3d/
• Glam görselleştirme
• Canlı gradyan oluşturma aracı