CSS Renk 4, web'e daha fazla renk, değişiklik işlevleri 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. Bu renk gamı içindeki renkleri belirtmeye çok 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ı. Tutuldu, insan gözünün görebildiği renklerin yalnızca% 30'u gösteriliyor. Başta Lea Verou ve Chris Liley tarafından yazılan bu tuzaktan kaçmamıza yardımcı olduğu için CSS'ye Color Level 4 (Renk Düzeyi 4) teşekkür ederiz.
Chrome 111'de CSS Renk 4 gamları ve renk alanları desteklenirken, 2016'dan beri display-p3 desteği bulunan Safari'ye katıldınız. CSS artık HD (yüksek tanımlı) ekranları destekleyebilir ve HD gamlarındaki renkleri belirtir ve uzmanlıkları olan renk alanları sunar. Bu kılavuzda, bu yeni renk dünyasından yararlanmaya nasıl başlayabileceğiniz açıklanmaktadır.
Kendiniz deneyin
Desteklenen tarayıcılarda, aralarından seçim yapabileceğiniz% 50 daha fazla renk vardır! 16 milyon rengin kulağa çok hoş geldiğini düşündünü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.
Yeni renk alanları, daha fazla renge (muhtemelen ekranın sahip olduğu en canlı renklere) ek olarak, renk sistemlerini yönetmek ve oluşturmak için benzersiz araçlar ve yöntemler sunar. Ö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ı karma yükseltmeler gösterilmektedir. En iyi iki renk karışımı sRGB'dir. En alttaki iki renk kombinasyonu p3 ekranında gösteriliyor. p3 ekranındaki renkler daha canlı. Karışımlar sayesinde orta kısımda tamamen siyah beyaz ortaya çıkıyor. sRGB'nin biraz doygunluğu azalmış göründüğü, ortadaki karışımların ise tam siyah veya beyaz sonuçlar olmadığı bir durumda.
https://codepen.io/web-dot-dev/pen/poZgXQb
Bu kılavuzda, rengin ne zaman olduğu, nereye gittiği ve CSS'nin web geliştiricilerinin renkleri yönetme özelliğini nasıl etkinleştireceği ve bunu nasıl desteklediği ele alınmaktadır.
Genel bakış
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ı vardır. Bu makalenin sonunda, daha fazla renk belirleyebilecek, gradyanları iyileştirebilecek ve her bir 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, tümü sRGB'den daha geniş bir yelpazeye sahip olan yedi yeni gam tanıtılacak ve hangisini kullanacağınızı seçmenize yardımcı olmak için bunların farklı özellikleri açıklanacaktır:
İnsan görsel gamı
Renk gamları genellikle 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. seviye spesifikasyonu, daha önce paylaşılan 7 yeni gamdaki renkleri aramak için 12 yeni renk alanı sunar:
- sRGB Doğrusal
- LH
- okLCH
- Laboratuvar
- okLAB
- Görüntülü reklam p3
- Rec2020
- a98 RGB
- ProPhoto RGB
- XYZ
- D50 XYZ
- D65 XYZ
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.
Daha fazla renge, yeni alanlara ve hata ayıklama sonuçlarına erişme
CSS Color 4, CSS ve renk için bir dizi yeni özellik ve aracı özetler. İlk olarak, bu yeni özelliklerden önceki rengi özetleyelim. Ardından, yeni renk alanlarına, söz dizimlerine ve araçlara genel bakış.
Aşağıdaki Codepen, tüm yeni ve eski renk söz dizimini bir arada gösterir:
Klasik renk alanlarının incelenmesi
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ı sRGB aralığındaki renge referans verir.
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%);
}
Yeni web renk alanlarıyla tanışın
Aşağıdaki renk alanları, sRGB'den daha büyük gamlara erişim sunar. display-p3 renk alanı, RGB'den neredeyse iki kat daha fazla renk sunarken Rec2020, display-p3'ün neredeyse iki katı renk sunar. Bir sürü renk var.
color() işlevi
Yeni color() işlevi R, G ve B kanallarındaki renkleri belirten herhangi bir renk alanında kullanılabilir. color() önce renk alanı parametresini, ardından RGB için bir dizi kanal değerini ve isteğe bağlı olarak bir miktar alfa değerini alır.
rgb, srgb, hsl, hwb gibi özel işlevlere sahip olmak uzun bir listeye dönüştüğü ve renk alanının parametre olması daha kolay olduğu için yeni renk alanlarının çoğunun bu işlevi kullandığını görebilirsiniz.
Artıları
- RGB kanalları kullanan renk alanlarına erişmek için normalleştirilmiş bir alan.
- RGB tabanlı herhangi bir geniş gama göre ölçeklenebilir.
Eksileri
- HSL, HWB, LCH, okLCH veya okLAB ile çalışmaz
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
color() aracılığıyla sRGB
Bu renk alanı, rgb() ile aynı özellikleri sunar. Ayrıca, tam olarak% 0 ile %100 arasında kullanılan 0 ile 1 arasında ondalık sayılar da sunar.
Artıları
- Neredeyse tüm ekranlar bu renk aralığını destekler.
- Tasarım aracı desteği.
Eksileri
- Doğrusal olarak doğrusal değil (
lch()gibi) - Geniş renk gamı yok.
- Renk geçişleri genellikle ölü bölgeden geçer.
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
color() aracılığıyla doğrusal sRGB
RGB'nin bu doğrusal alternatifi tahmin edilebilir kanal yoğunluğu sunar.
Artıları
- Oyun motorları veya ışık gösterileri gibi özellikler için kullanışlı olan RGB kanallarına doğrudan erişim.
Eksileri
- Doğrusal olarak algılanmıyor.
- Kenarlarda siyah beyaz paketler.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Renk geçişleri daha sonra ayrıntılı olarak ele alınmaktadır, ancak farkları göstermek için srgb ve linear-srgb siyah-beyaz renk geçişini görmek hızlı bir şekilde anlamlı hale gelir:
LCH
Bu yayının ilk alanı, RGB gamı dışındaki renklere erişim için söz dizimini tanıtmaktır. Bu aynı zamanda, bir ekran için renk gamı dışında bir şekilde reklam oluşturmayı da son derece kolay hale getiren ilk örnektir. Bunun nedeni, tüm CIE alanı renklerinin (lch, oklch, lab, oklab) tüm insan görünür renk spektrumunu temsil edebilmesidir.
Bu renk alanı, insan görüşüne göre modellenmiştir ve bu renkleri ve daha fazlasını belirtmek için söz dizimi sunar. LCH kanalları açıklık, renk ve ton şeklindedir. Ton, HSL ve HWB'de olduğu gibi bir açıdır. Açıklık 0 ile 100 arasında bir değerdir, ancak HSL'nin hafifliği gibi değil, özel, "algısal olarak doğrusal", insan merkezli bir hafifliktir. Renk doygunluğuna benzerdir. 0 ile 230 arasında değişebilir ancak teknik olarak sınırsızdır.
Artıları
- Çoğunlukla doğrusal olarak algılandığı için tahmin edilebilir renk değişikliği (bkz. oklch).
- Tanıdık kanalları kullanmalıdır.
- Genellikle canlı renk geçişlerine sahiptir.
Eksileri
- Ürün yelpazesinin aşılması çok kolaydır.
- Nadir olarak, renk kaymasını önlemek için renk geçişinin ayar orta noktasının olması gerekebilir.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
Laboratuvar
CIE gamına erişmek için yine algılanan doğrusal bir açıklık (L) boyutuna sahip başka bir renk alanı kullanılmıştır. LAB'deki A ve B, insan rengi görmenin benzersiz eksenlerini temsil eder: kırmızı-yeşil ve mavi-sarı. A'ya pozitif bir değer verildiğinde değeri kırmızıya, 0'ın altına düştüğünde ise yeşile eklenir. B'ye pozitif bir sayı verildiğinde sarıyla toplanır, negatif değerler maviyi temsil eder.
Artıları
- Algısal olarak tutarlı renk geçişleri.
- Yüksek dinamik aralık.
Eksileri
- Ton kayması potansiyeli.
- Değerleri okurken metni yazmak veya bir renk tahmin etmek zor.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
OKLCH
Bu renk alanı, LCH için düzelticidir. LCH gibi, (L) de algılanan doğrusal açıklığı, renk için C ve ton için H'yi temsil etmeye devam etmektedir.
Daha önce daha önce HSL veya LCH ile çalıştıysanız burası tanıdık geliyor. Renk çemberinde H için bir açı seçin, L değerini ayarlayarak açıklık veya koyuluk değerini seçin. Ancak sonra doygunluk yerine renk kullanılır. Açıklık ve renk ayarlamaları genellikle çiftler halinde yapılması dışında oldukça benzerdirler veya hedef gamın dışına çıkan yüksek renk renklerini istemek kolay olabilir.
Artıları
- Mavi ve mor tonlarla çalışırken sizi şaşırtmaz.
- Doğrusal olarak algılanan açıklık.
- Tanıdık kanalları kullanmalıdır.
- Yüksek dinamik aralık.
- Modern bir renk seçici vardır: Evil Martians'tan.
Eksileri
- Ürün yelpazesinin aşılması çok kolaydır.
- Yeni ve nispeten az keşfedilmemiş.
- Az sayıda renk seçici.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
OKLAB
Bu alan, LAB için düzeltme amaçlıdır. Bu alanın, resim işleme kalitesi için optimize edilmiş bir alan olduğu da iddia ediliyor. CSS'de ise bu, gradyanlar ve renk işlevi değiştirme kalitesi anlamına gelir.
Artıları
- Animasyonlar ve interpolasyonlar için varsayılan alan.
- Doğrusal olarak algılanan açıklık.
- LAB gibi renk tonu kayması olmaz.
- Algısal olarak tutarlı renk geçişleri.
Eksileri
- Yeni ve nispeten az keşfedilmemiş.
- Az sayıda renk seçici.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Ekran P3
Ekran P3 gamı ve renk alanı, Apple'ın bu özellikleri 2015'ten beri iMac'te desteklemesinden bu yana popüler hale geldi. Apple ayrıca, CSS aracılığıyla web sayfalarında bulunan 2016'dan beri, diğer tüm tarayıcılardan beş yıl önce Display-p3'ü de destekliyordu. sRGB'den geliyorsanız bu, stilleri daha yüksek bir dinamik aralığa taşırken çalışmaya başlamak için mükemmel bir renk alanıdır.
Artıları
- HDR ekranların temel değeri olarak kabul edilen mükemmel destek.
- sRGB'den% 50 daha fazla renk.
- Geliştirici Araçları mükemmel bir renk seçici sunar.
Eksileri
- Bu alanın yerini Rec2020 ve CIE alanları gelecek.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020, 4K ve 8k medyalarda geniş bir renk yelpazesiyle UHDTV'ye (ultra yüksek çözünürlüklü televizyon) geçişin bir parçasıdır. Rec2020, display-p3'ten daha geniş, ancak tüketiciler arasında Display P3 kadar yaygın olmayan başka bir RGB tabanlı yelpazedir.
Artıları
- Ultra HD renkler.
Eksileri
- Tüketiciler arasında yaygın değil (henüz).
- Avuç içi veya tabletlerde yaygın şekilde bulunmaz.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB
Adobe 1998 RGB'nin kısaltması olan A98 RGB, CMYK yazıcılardan alınabilen renklerin çoğunu sunmak için Adobe tarafından oluşturulmuştur. Özellikle camgöbeği ve yeşil tonlarda sRGB'den daha fazla renk sunar.
Artıları
- sRGB ve Display P3 renk alanlarından daha büyük.
Eksileri
- Dijital tasarımcılar tarafından çalışılan ortak bir alan değil.
- CMYK'dan palet aktaran pek fazla kişi yoktur.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ProPhoto RGB
Kodak tarafından oluşturulan bu geniş ürün yelpazesi, benzersiz bir şekilde çok çeşitli birincil renkler sunar ve ışığı değiştirirken minimum ton kayması sunar. Ayrıca 1980'de Michael Pointer tarafından belgelendiği gibi gerçek dünyadaki yüzey renklerinin% 100'ünü kapladığını iddia etmektedir.
Artıları
- Açıklık değiştirilirken minimum ton kaymaları.
- Canlı birincil renkler.
Eksileri
- Sunulan renklerin yaklaşık% 13'ü hayali, yani insanlar tarafından görülebilen spektrumda değil.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
CIE XYZ renk alanı, ortalama görüşe sahip bir kişinin görebildiği tüm renkleri kapsar. Bu nedenle diğer renk alanları için standart bir referans olarak kullanılır. Y parlaklık, X ve Z ise belirtilen Y parlaklığı içindeki olası renklerdir.
d50 ile d65 arasındaki fark, beyaz noktadır. Burada d50, d50 beyaz noktalarını, d65 ise d65 beyaz noktasını kullanır.
Artıları
- Doğrusal ışık erişiminin bazı kullanışlı kullanım alanları vardır.
- Fiziksel renk karıştırma için idealdir.
Eksileri
- Lch, oklch, laboratuvar ve oklab gibi algılanan doğrusal bir hareket değildir.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Özel renk alanları
CSS Renk 5 spesifikasyonunda, tarayıcıya bir özel renk alanını öğretmek için bir yol da bulunur. Bu, tarayıcıya renkleri nasıl çözümleyeceğini bildiren bir ICC profilidir.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Yüklendikten sonra, color() işleviyle bu özel profildeki renklere erişin ve bunun için kanal değerlerini belirtin.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Renk interpolasyonu
Bir renkten diğerine geçişe animasyon, renk geçişleri ve renk karıştırma denir. Bu geçiş genellikle bir başlangıç rengi ve bitiş rengi olarak belirtilir. Bitiş renginde ise tarayıcının bunlar arasında ara değer oluşturması beklenir. Bu durumda interpolasyon, hazır geçiş yerine yumuşak bir geçiş oluşturmak için renkler arasında bir dizi oluşturmak anlamına gelir.
Gradyan kullanıldığında interpolasyon, bir şekil üzerindeki bir dizi renktir. Animasyonda ise zaman içindeki bir renk dizisi var.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
Gradyan ile, aradaki renkler aynı anda gösterilir:
Renk interpolasyonundaki yenilikler
Yeni gamlar ve renk alanlarının eklenmesiyle birlikte interpolasyon için yeni ek seçenekler ortaya çıktı. Bir renge in hsl maviden beyaza geçirildiğinde sRGB'den çok farklı bir sonuç elde edilir.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
Codepen demosunu göremiyor musunuz?
Bu durumda, bir boşluktaki renkten tamamen farklı bir alandaki bir renge geçiş yaparsanız ne olur?
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Codepen demosunu göremiyor musunuz?
Neyse ki Color 4 spesifikasyonu, tarayıcılara yönelik bu renk alanı interpolasyonlarının nasıl ele alınacağına dair talimatlar içermektedir. Yukarıdaki .gradient örneğinde, tarayıcılar ayırt edilen renk alanlarını fark eder ve varsayılan renk alanını oklab kullanır.
Tarayıcının renk alanı olarak lch'yi kullanacağını düşünebilirsiniz, çünkü bu ilk renktir, ancak bunu yapmaz. Bu nedenle, ikinci bir karşılaştırma gradyanı
.lch gösteriyorum. .lch renk geçişi, lch renk alanından gelen bir gradyandır.
16 bit renk sayesinde daha az şerit oluşumu
Bu renk çalışmadan önce tüm renkler, dört kanalı (kırmızı, yeşil, mavi ve alfa) temsil etmek üzere tek bir 32 bitlik tam sayı halinde kaydediliyordu. Bu, kanal başına 8 bit ve 2^ 24 olası renktir (alfayı göz ardı eder). 2 ^ 24 = 16.777.216, "milyonlarca renk."
Bu renk işleminden sonra, dört adet 16 bitlik kayan nokta değeri, her kanalın bir araya toplanmak yerine kendi kayan noktası olur. Bu, toplamda 64 bit veridir ve milyonlarca renkten çok daha fazlasını ortaya çıkarır.
Bu çalışma, HD rengi desteklemek için gereklidir. Bu, depolanabilecek renk bilgisi miktarını artırır. Bu da tarayıcının bir gradyanda daha fazla renk kullanabileceği anlamına gelir.
Gradyan şerit oluşturma, yumuşak bir gradyan oluşturmak için yeteri kadar renk olmadığında ve renk "çizgileri" görünür olduğunda ortaya çıkar. Daha yüksek çözünürlüklü renklere yükseltmeyle, şerit oluşturma büyük ölçüde azaltılır.
İnterpolasyonu kontrol etme
İki nokta arasındaki en kısa mesafe her zaman düz bir çizgidir. Renk interpolasyonu sayesinde tarayıcılar varsayılan olarak kısa rotayı kullanır. HSL renk silindirinde iki noktanın bulunduğu bir senaryo düşünün. Gradyan, iki nokta arasındaki çizgi boyunca gidilerek renk adımlarını edinir.
linear-gradient(to right, #94e99c, #e06242)
Renk duraklarının arasında bir çizgi bulunan HSL silindirinin yukarıdan aşağı görünümü
Yukarıdaki gradyan çizgisi, yeşilimsi renk ile kırmızımsı renk arasında, renk alanının merkezinden geçerek düz bir şekilde geçer. Yukarıda anlatılanlar, durumu anlamaya yardımcı olmak açısından çok yararlı olsa da, tam olarak böyle değildir. Aşağıda, aşağıdaki Codepen'deki gradyan yer almaktadır. Örnek örnekte gösterildiği gibi ortada beyaz renk olmadığı açıktır.
Bununla birlikte, renk geçişinin orta alanı canlılığını kaybetti. Bunun nedeni, en canlı renklerin interpolasyonun yaklaştığı merkezde değil, renk alanı şeklinin kenarında olmasıdır. Bu durum genellikle "ölü bölge" olarak adlandırılır. Bu sorunu düzeltmenin veya çözmenin birkaç yolu vardır.
Ölü bölgeden kaçınmak için daha fazla gradyan durağı belirtme
Günümüzde ölü bölgeden kaçınmak için bir teknik, gradyana daha fazla renk noktası eklemektir. Bu noktalar, interpolasyonu kasıtlı olarak bir renk alanının canlı aralıklarında kalacak şekilde yönlendirir. Ek duraklar ölü bölgede ilerlemesine yardımcı olduğundan, bu tam anlamıyla geçici bir çözüm.
Erik Kennedy tarafından oluşturulan ve ek renk duraklarını hesaplayan bir renk geçişi aracı vardır. Bu araç, söz konusu alana doğru çekilen renk alanlarında bile ölü bölgeden kaçınmanıza yardımcı olur. Bunu kullanarak ilk örnekteki aynı renkleri geçirerek ancak renk interpolasyonunu HSL olarak değiştirerek şu sonucu verir:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
9 farklı renk noktası içeren eğri bir çizginin olduğu HSL silindirinin yukarıdan aşağı görünümü
Rehberli durak noktaları sayesinde interpolasyon artık düz bir çizgi değil, ölü bölge çevresinde eğri görünüyor. Bu da doygunluğun korunmasına yardımcı olarak çok daha canlı bir gradyan sağlıyor.
Araç harika bir iş çıkarsa da doğrudan CSS'den benzer veya daha fazla kontrole sahip olabilseydiniz nasıl olurdu?
Renk interpolasyonunu yönlendirme
Renk 4'te, Ton interpolasyonu stratejisini kontrol etme özelliği eklendi ve ölü bölgede yeni bir yol (:wink:) sağladı. Bir ton açısı düşünün. Örneğin, renk tonu 140deg değerinden 240deg değerine değişerek yalnızca açıyı değiştiren 2 noktalı bir gradyan düşünün.
Daha kısa ve daha uzun ton interpolasyonu
Renk geçişi, longer rotasını almasını belirtmediğiniz sürece varsayılan olarak shorter rotasını alır. Ton interpolasyonu seçenekleri açı dönüşünü yönlendirir. Örneğin, birine sağa yerine sola dönmesini söyleyebilirsiniz (heh, Zoolander):
Yukarıdaki görsel ton interpolasyonu mesafeleri örneğinde, farkı göstermek için kısa yol ve uzun yol simüle edilmiştir. Kısa mesafenin aralarında daha az renk tonu vardır, çünkü mümkün olan en az mesafe katedilmiş, uzun mesafe ise daha fazla ton üzerinde kat edilmiş olur.
Ton interpolasyonunu artırma ve azaltma
Renk 4'te iki ton interpolasyonu stratejisi daha vardır, ancak bunlar silindir renk alanlarına özeldir. Önceki örneklerde verilen iki renkten yola çıkarak, görsel artık artış ve azalmanın nasıl işlediğini göstermektedir.
Yukarıdaki Codepen, beklenen sonucu göstermek için ColorJS kullanmıştır. Javascript kitaplığı olmadan aynı etkiyi elde etmek için yazacağınız CSS şöyle olur:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Ton interpolasyonunu kapatmak için burada, tonu 2 renk noktası arasında değiştirebileceğiniz, bir ton interpolasyonu seçiminin etkilerini ve renk alanlarının gradyan sonuçlarını nasıl değiştirdiğini görebileceğiniz eğlenceli bir oyun alanı bulunmaktadır. Efektler çok farklı olabilir. Bunu, renk araç kemerinize eklenen dört yeni ipucu olarak düşünün.
Farklı renk alanlarında renk geçişleri
Benzersiz şekli ve renk düzeniyle her renk alanı, farklı bir gradyanla sonuçlanır. Aşağıdaki örneklere, özellikle de "maviden beyaza" konusuna bakın. Her bir renk alanının bunu nasıl farklı şekilde ele aldığına bakın. Ortada kaç tane mor renge dönüştüğüne dikkat edin. Buna interpolasyon sırasında "renk kayması" denir.
Codepen demosunu göremiyor musunuz?
Gösterilen görsel, Codepen'deki birçok örnekten yalnızca bir tanesidir. Bunları kendiniz görmek için Canary veya Safari Teknik Önizleme'yi deneyebilirsiniz.
Bu alanlardaki bazı renk geçişleri, diğerlerinden daha canlı olur veya ölü bölgelerde daha az yol alır.
lab gibi alanlar, renkleri doygunluk için optimize edilmiş bir şekilde bir araya getirir. Bunun aksine, hwb() gibi alanlarda insanların renk yazması için optimize edilmiş alanlar kullanılır.
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
Yukarıdaki demo, sonuçlarda çok zor olmasa da laboratuvar ile daha tutarlı interpolasyon göstermektedir. Ancak lab'in söz dizimini okumak kolay değildir. rgb veya hsl'den gelirken hiç tanımadığınız negatif sayılar vardır. Size iyi bir haberimiz var. Bildiğimiz bir söz dizimi için hwb'yi kullanabiliriz ancak renk geçişinin oklab gibi başka bir renk alanında tamamen interpole edilmesini isteyebiliriz.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
Codepen demosunu göremiyor musunuz?
Bu örnek, hwb'de aynı renkleri kullanır ancak hwb veya oklab'e interpolasyon için renk alanını belirtir. hwb, yüksek titreşim için harika bir renk alanıdır ancak ölü alanlar veya parlak noktalar olması muhtemeldir (üst örnekteki camgöbeği sıcak noktaya bakın). oklab, doygun olduğu algılanan doğrusal renk geçişleri için idealdir. Bu özellik, hangi renk gradyanını en çok sevdiğinizi
görmek için birkaç farklı renk alanını deneyebileceğinizden çok eğlenceli.
Aşağıda, renk geçişlerini ve renk alanlarını deneyen, karıştırma ve eşleştirme stratejilerini deneyen bir Codepen'i görebilirsiniz. Siyahtan beyaza geçiş bile her renk alanında farklıdır!
Codepen demosunu göremiyor musunuz?
Gamut sınırlama
Bir rengin, gam dışında bir şey istediği senaryolar vardır. Aşağıdaki rengi düşünün:
rgb(300 255 255)
rgb renk alanında bir renk kanalı için maksimum değer 255 olsa da burada 300 değeri kırmızı için belirtilmiş. Süreç Gamut sınırlama.
Sabitleme, fazladan bilgilerin kaldırılmasıdır. 300, renk motorunun içinde 255 haline gelir. Renk artık kendi alanına sabitlenmiş.
Renk alanı seçme
Pek çok kişi bu renk alanlarını ve etkilerini öğrendikten sonra, bunaldığını hisseder ve hangisini seçeceğini bilmek ister. Çalışmalarıma ve deneyimlerime göre tüm görevlerim için tek bir renk alanı görmüyorum. Her birinin, istenen sonuca ulaştığı anlar vardır.
En iyi tek bir alan olsaydı, bu kadar çok yeni alan tanıtılmazdı.
Ancak, CIE alanları lab, oklab, lch ve oklch benim başlangıç noktalarım. Sonuçlar beklediğim bu değilse
başka alanları test edeceğim. Renkleri karıştırmak ve renk geçişleri oluşturmak için oklab olan varsayılan spesifikasyon seçimini kabul ediyorum. Renk sistemleri ve genel kullanıcı arayüzü renkleri için oklch kullanmayı tercih ediyorum.
Burada, kullanıcıların bu yeni renk alanları ve özellikleri göz önünde bulundurarak güncellenmiş renk
stratejilerini paylaştığı birkaç makaleyi bulabilirsiniz. Örneğin, Andrey Sitnik
oklch'i denedi, belki sizi de aynısını yapmaya ikna edebilir:
- Andrey Sitnik'ten CSS'de OKLCH: Why we görüntülenmiyor from RGB and HSL (CSS'de OKLCH: RGB ve HSL'den neden taşındık)
- Color Formats - Josh W. Comeau
- OK, OKLCH - Chris Coyier
HD CSS rengine geçiş yapma
Web projenizin rengini geniş aralıklı görüntüleri destekleyecek şekilde güncellemek için iki temel strateji vardır:
Zararlı renk düşüşü
Yeni renk alanlarını kullanın ve tarayıcı ile işletim sisteminin görüntüleme özelliklerine göre hangi rengin gösterileceğini belirlemesine izin verin.Progresif geliştirme
Kullanıcının tarayıcısının özelliklerini değerlendirmek için@supportsve@mediakullanın ve koşullar karşılanırsa geniş renk gamı sağlayın.
Tarayıcı display-p3 rengini anlamazsa:
color: red;
color: color(display-p3 1 0 0);
Tarayıcı display-p3 rengini anlarsa:
color: red;
color: color(display-p3 1 0 0);
Her birinin avantajları ve dezavantajları vardır. Artılarının ve eksilerinin kısa bir listesini burada bulabilirsiniz:
Kontrollü azalma
- Artıları
- En basit rota.
- Tarayıcı, geniş gamlı bir ekran değilse eşlemeyi değiştirir veya sRGB'ye sıkıştırılır. Dolayısıyla sorumluluk tarayıcıdadır.
- Eksileri
- Tarayıcı, sevmediğiniz bir renge kayabilir veya harita gamı genişleyebilir.
- Tarayıcı, renk isteğini anlamayabilir ve tamamen başarısız olabilir. Bununla birlikte, rengin iki kez belirtilmesi ve şelalenin anladığı önceki renge dönmesine izin vererek bu durumu hafifletebilirsiniz.
Progresif geliştirme
- Artıları
- Yönetilen renk doğruluğu ile daha fazla kontrol.
- Mevcut renkleri etkilemeyen bir ekleme stratejisi.
- Eksileri
- İki ayrı renk söz dizimini yönetmeniz gerekir.
- İki ayrı renk gamını yönetmeniz gerekir.
Renk gamı ve renk alanı desteği kontrol ediliyor
Tarayıcı, CSS ile JavaScript'ten gelen geniş yelpaze özellikleri ve renk söz dizimi desteğinin kontrol edilmesine olanak tanır. Kullanıcının verdiği renk gamı tam olarak sunulmuyor, genel bir cevap sağlanıyor ve kullanıcı gizliliğinin korunuyor. Yine de, kullanıcının donanımının (ör. gam) özelliklerine özel olmadığından tam renk alanı desteği de sunulmaktadır.
Renk gamı destek sorguları
Aşağıdaki kod örneklerinde, ziyaret eden kullanıcının ekranlarındaki renk aralığı kontrol edilir.
CSS'den kontrol ediliyor
En az spesifik destek sorgusu, dynamic-range medya sorgusudur:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
color-gamut medya sorgusundan yaklaşık olarak veya daha fazla destek için sorgu alınabilir:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Desteğin kontrol edilmesi için ek iki medya sorgusu daha bulunuyor:
JavaScript'ten kontrol ediliyor
JavaScript'te window.matchMedia() işlevi çağrılabilir ve değerlendirme için bir medya sorgusu iletilebilir.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Yukarıdaki kalıp, medya sorgularının geri kalanı için kopyalanabilir.
Renk alanı desteği sorguları
Aşağıdaki kod örneklerinde, ziyaret eden kullanıcının tarayıcısı ve çalışmak için kullanılacak renk alanı seçimi incelenmiştir.
CSS'den kontrol ediliyor
Bireysel renk alanı desteği, @supports sorgusu üzerinden sorgulanabilir:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
JavaScript'ten kontrol ediliyor
JavaScript'te CSS.supports() işlevi çağrılabilir ve tarayıcının bunu anlayıp anlamadığını görmek için bir özellik ve değer çifti iletilebilir.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Donanımı yerleştirme ve ayrıştırma kontrolleri bir araya getirilir
Her tarayıcının bu yeni renk özelliklerini uygulamasını beklerken, hem donanım hem de renk ayrıştırma özelliğini kontrol etmek iyi bir fikirdir. Renkleri kademeli olarak yüksek tanımlı hale getirirken genellikle bunu kullanıyorum:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Chrome Geliştirici Araçları ile renk hatası ayıklama
Güncellenen Chrome Geliştirici Araçları, geliştiricilerin HD rengi oluşturmasına, dönüştürmesine ve hatalarını ayıklamasına yardımcı olacak yeni araçlarla donatılmıştır.
Renk seçici güncellendi
Renk seçici artık tüm yeni renk alanlarını destekliyor. Yazarların, kanal değerleriyle tıpkı kendileri gibi etkileşim kurmasına olanak tanır.
Gamut sınırları
Srgb ve display-p3 gamutları arasına bir çizgi çizen gamı sınır çizgisi de eklendi. Seçilen rengin hangi gamda olduğunun net olarak anlaşılmasını sağlar.
Bu, yazarların HD renkleri ile HD olmayan renkleri görsel olarak ayırt etmesine yardımcı olur.
Bu özellik, hem HD olmayan hem de HD renkler üretebildiğinden color() işlevi ve yeni renk alanlarıyla çalışırken özellikle faydalıdır. Renginizin hangi renk gamında olduğunu kontrol etmek istiyorsanız renk seçiciyi açın ve bakın.
Renkler dönüştürülüyor
Geliştirici Araçları, yıllardır hsl, hwb, rgb ve hex gibi desteklenen biçimler arasında renkleri dönüştürebiliyor. shift + click bu dönüşümü gerçekleştirmek için Stiller bölmesinde
kare renk kartelasını üzerine yazın. Yeni renk araçları yalnızca dönüşümler arasında geçiş yapmaz, aynı zamanda yazarların istedikleri dönüşümü görüp seçebileceği bir pop-up oluşturur.
Dönüştürme işlemi sırasında, dönüşümün alana sığacak şekilde kırpılıp kırpılmadığını bilmek önemlidir. Geliştirici Araçları'nda artık, dönüştürülen renk için sizi bu kırpma işlemiyle ilgili uyaran bir uyarı simgesi bulunur.
Son duyurularında, Geliştirici Araçları'nda sunulan daha fazla CSS hata ayıklama özelliğini keşfedebilirsiniz.
Sonuç
Web'deki sRGB olmayan renk alanları daha çok kullanılmaya başlandı, ancak zamanla tasarımcıların ve geliştiricilerin kullanımında artış olacağına inanıyorum. Ö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.
Bu yeni renkli oyuncaklarla oynamanın keyfini çıkarın! Daha fazla canlılık, tutarlı manipülasyon ve interpolasyonlar ile genel olarak kullanıcılarınıza daha renkli bir deneyim sunulur.
Ek kaynaklar
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/