Daha fazla renge ve yeni alanlara erişin

Bu doküman, yüksek tanımlı CSS renk kılavuzunun bir parçasıdır.

CSS Color 4, CSS ve renk için bir dizi yeni özellik ve aracı özetler. Aşağıdaki Codepen'de tüm yeni ve eski renk söz dizimleri bir arada gösterilmektedir:

Klasik renk alanlarının özetini okuyun.

4. seviye spesifikasyonu, renkleri aramak için daha önce paylaşılan 7 yeni renk gamından 12 yeni renk alanı kullanıma sundu:

• sRGB Doğrusal
• LH
• okLCH
• Laboratuvar
• okLAB
• Görüntülü reklam p3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• D50 XYZ
• D65 XYZ

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 {#linear-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

LCH, RGB gamının dışındaki renklere erişmek için söz dizimi sunar. Aynı zamanda, bir ekran için alışılmışın dışında bir renk oluşturmayı son derece kolay hale getiren ilk örnektir. Bunun nedeni, CIE alanı renklerinin (lch, oklch, lab, oklab) insanların görebildiği renk spektrumunun tamamını 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. Bu, özel bir "algılanan doğrusal," insan odaklı ışık. 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 {#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.

Anahtar/Terim: Beyaz nokta, bir renk alanı özelliğidir. Boşlukta gerçek beyazın bulunduğu yerdir. Elektronik ekranlarda D65 en yaygın beyaz noktadır ve 6500 kelvin'in kısaltmasıdır. Renk dönüştürmesinde beyaz noktaların eşleşmesi önemlidir. Böylece renk sıcaklığı (sıcaklık veya soğukluk) etkilenmez.

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);
}

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%));
}

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. .gradient için tarayıcılar ayırt edici 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 kullanmaz. Bu nedenle ikinci bir karşılaştırma renk geçişi .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 et

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

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);

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):

Ton interpolasyon mesafeleri örneğinde, farkı göstermek için kısa yol ve uzun yol simüle edilmiştir. Mümkün olan en az mesafe kat edildiği için kısa mesafe arasında daha az renk tonu vardır.

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üzeni nedeniyle her renk alanı, farklı bir gradyanla sonuçlanır. Aşağıdaki örneklerde, her bir renk alanının özellikle maviden beyaza kadar bunu nasıl farklı şekilde ele aldığına bakın. Ortada kaç tane mor olduğuna dikkat edin; buna interpolasyon sırasında ton kayması denir.

Bu alanlardaki bazı gradyanlar diğerlerinden daha canlı veya ölü bölgelerde daha az hareket eder. 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%));
}

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!

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:

1. 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)
2. Color Formats - Josh W. Comeau
3. OK, OKLCH - Chris Coyier

Sonraki adımlar

Yeni renk alanlarına ve araçlara aşina olduğunuza göre artık HD renge geçebilirsiniz.

Daha fazla titreşim, tutarlı manipülasyonlar ve interpolasyonlar genel olarak kullanıcılarınıza daha renkli bir deneyim sunar.

Rehberden daha fazla renk kaynağı okuyun.