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 Renk 4, bir dizi yeni öğeyi yeni özellikleri ve araçları öğreneceğiz. Aşağıdaki Codepen, tüm yeni ve ve eski renk sözdizimlerini birlikte görürsünüz:

Klasik renk alanlarının özetini okuyun.

4. düzey spesifikasyonu, 12. düzey daha önce paylaşılan 7 yeni renk gamına kıyasla, renk aramak için yeni renk alanları:

• sRGB Doğrusal
• LCH
• okLCH
• LAB
• okLAB
• Ekran p3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

Yeni web renk alanlarıyla tanışın

Aşağıdaki renk alanları, sRGB'den daha geniş gamlara erişim sunar. İlgili içeriği oluşturmak için kullanılan display-p3 renk alanı, RGB'ye göre neredeyse iki kat daha fazla renk sunarken Rec2020'de "display-p3"ün neredeyse iki katı. Çok fazla renk var!

color() işlevi

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

Yeni color() fonksiyonu R, G ve B ile renkleri belirten herhangi bir renk alanı için kullanılabilir kanallar. color() önce bir renk alanı parametresi, ardından ve isteğe bağlı olarak bazı alfalar için kanal değerlerini görüntüler.

Yeni renk alanlarının birçoğunun bu işlevi kullandığını göreceksiniz. rgb, srgb, hsl, hwb vb. özel işlevler gittikçe büyüyordu ve uzun bir liste oluşturuyoruz. Renk alanının parametre olması daha kolay.

Artıları

• RGB kanallarını kullanan renk alanlarına erişmek için normalleştirilmiş bir alan.
• RGB tabanlı herhangi bir renk gamına kadar ölçeklenebilir.

Eksileri

• HSL, HWB, LCH, okLCH veya okLAB ile çalışmaz

ziyaret edin.

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

Not: Renkler sRGB Gamut, Display P3 Gamut veya Rec2020 Gamut içinde olabilir; Görünür spektrumun% 77,6'sına kadar.

color() üzerinden sRGB

Bu renk alanı, rgb() ile aynı özellikleri sunar. Ek olarak, basamaklar, tam olarak% 0 ile %100 gibi kullanılır.

Artıları

• Neredeyse tüm ekranlar bu renk alanı aralığını destekler.
• Tasarım aracı desteği.

Eksileri

• Algısal olarak doğrusal değildir (ör. lch())
• Geniş renk gamı yok.
• Renk geçişleri genellikle ölü bir 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() {#doğrusal-sdüke} üzerinden doğrusal sRGB

RGB'nin bu doğrusal alternatifi, tahmin edilebilir kanal yoğunluğu sunar.

Artıları

• RGB kanallarına doğrudan erişim, oyun motorları veya ışık gösterileri gibi şeyler için elverişlidir.

Eksileri

• Doğrusal olarak algılanmaz.
• Siyah ve beyaz renkli kenarlar.

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

Gradyanlar daha sonra ayrıntılı olarak ele alınacaktır. ancak kısa sürede bir srgb ve siyah-beyaz bir linear-srgb görmek anlamlıdır. bir gradyan kullanır:

LCH

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

LCH, RGB aralığı dışındaki renklere erişmek için söz dizimi sunuyor. Aynı zamanda çok kolay bir hale getiren ilk model, bir renk seçin. Bunun nedeni, tüm CIE alan renklerinin (lch, oklch, lab, oklab) etiketindeki renk spektrumunun tamamına yer veriyoruz.

Bu renk alanı, insan vizyonuna göre modellenir ve söz dizimini kullanabilirsiniz. LCH kanalları hafif, renk ve ton gibi. Renk, HSL ve HWB'de olduğu gibi bir açı olarak gösterilir. Açıklık bir değerdir arasında bir değerdir. Bu, özel bir "bilişsel doğrusal", insan odaklı parlaklık. Renk, doygunluğa benzer; 0 ile 230 arasında değişebilir ancak teknik olarak sınırsızdır.

Artıları

• Çoğunlukla doğrusal olarak algılanabilir olan tahmin edilebilir renk manipülasyonu (bkz. oklch).
• Tanıdık kanallar kullanır.
• Genellikle canlı gradyanlar kullanılır.

Eksileri

• Geniş yelpazenin dışına çıkmak çok kolay.
• Nadiren de olsa renk geçişinin ton kaymasını önlemek için orta noktasının ayarlanması gerekebilir.

ziyaret edin.

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

Dikkat: Renk, yazarların bir ekran gamını kolayca aşmasına olanak tanır. Dikkatli olun yüksek rengarenk C değerlerine sahip.

LAB

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

CIE gamına erişmek için oluşturulan başka bir renk alanı da doğrusal açıklık (L) boyutu. LAB'deki A ve B, ekibin benzersiz eksenlerini insan rengi görüşü: kırmızı-yeşil ve mavi-sarı. A'ya pozitif bir değer verildiğinde 0'ın altına düştüğünde kırmızı ekler, yeşil ekler. B'ye pozitif bir sayı verildiğinde sarı ekler, negatif değerler maviye doğru ilerler.

Artıları

• Algılanan tutarlı gradyanlar.
• Yüksek dinamik aralık.

Eksileri

• Ton kayması potansiyeli.
• Değerleri okurken elle yazmak veya renk tahmin etmek zordur.

.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

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15,4

Kaynak

Bu renk alanı şu sorunları düzeltici niteliktedir: LCH LCH gibi (L) de doğrusal olarak hafifliği temsil etmeye devam eder. renk için H'yi seçin.

Daha önce HSL veya LCH. H için renk çemberinden bir açı seçin, bir açıklık veya koyuluk miktarını görebilirsiniz. Ancak doygunluk yerine renk tonu gösteriliyor. Açıklık ve renk düzeltmelerinin genellikle çiftler halinde olabilir veya farklı renkler için biraz zor olacaktır.

Artıları

• Mavi ve mor tonlarla çalışırken sizi şaşırtmayın.
• Algısal olarak doğrusal hafiflik.
• Tanıdık kanallar kullanır.
• Yüksek dinamik aralık.
• Evil Martians'dan modern bir renk seçici var.

Eksileri

• Geniş yelpazenin dışına çıkmak çok kolay.
• Yeni ve nispeten keşfedilmemiş içerikler.
• 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 (OK LAB)

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15,4

Kaynak

Bu alan LAB'de düzeltme amaçlıdır. Resmin işleme kalitesi için optimize edilmiş bir alan olduğu da iddia ediliyor. bize, renk geçişleri ve renk işlevi manipülasyon kalitesi anlamına gelir.

Artıları

• Animasyonlar ve interpolasyonlar için varsayılan alan.
• Algısal olarak doğrusal hafiflik.
• LAB gibi ton geçişleri kullanılmaz.
• Algılanan tutarlı gradyanlar.

Eksileri

• Yeni ve nispeten keşfedilmemiş içerikler.
• 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

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

Not: Renkler Display P3 Gamut içindedir; görünür spektrumun% 45,5'ini oluşturuyor.

Apple'ın desteklediği P3 ekran gamı ve renk alanı, popülerlik kazandı. 2015'ten beri iMac'inde. Apple ayrıca 2016'dan beri CSS aracılığıyla web sayfalarında display-p3'ü destekledi. diğer tarayıcılardan çok daha ileride. sRGB'den geliyorsa bu harika bir renktir alanı daha yüksek dinamik bir aralığa taşıyın.

Artıları

• Muhteşem destek. HDR ekranlar için referans noktası olarak kabul edilir.
• sRGB'den% 50 daha fazla renk.
• Geliştirici Araçları mükemmel bir renk seçici sunar.

Eksileri

• Zamanla Rec2020 ve CIE alanlarını geride bırakacak.

.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

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

Not: Renkler Rec2020 Gamut içindedir; görünür spektrumun% 77,6'sı.

Rec2020, UHDTV (ultra yüksek çözünürlüklü televizyon) hareketinin bir parçasıdır. 4k ve 8k medyalarda kullanım için geniş bir renk yelpazesi sunuyor. Rec2020, başka bir RGB tabanlı bir gam, display-p3'ten daha büyük olsa da tüketicileri görüntülü reklam P3 olarak gösteriyor.

Artıları

• Ultra HD renkler.

Eksileri

• Tüketiciler arasında pek yaygın değildir (henüz).
• Avuç içi cihazlarda veya tabletlerde yaygın olarak 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}

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

Not: Renkler RGB 98 Gamut içindedir; görünür spektrumun% 52,1'ini oluşturuyor.

Adobe 1998 RGB'nin kısaltması olan A98 RGB, programın en önemli elde edebiliyor. sRGB'den daha fazla renk sunuyor. fark edebilirsiniz.

Artıları

• sRGB ve Display P3 renk alanlarından büyük.

Eksileri

• Dijital tasarımcılar tarafından ortak kullanılan bir alan değil.
• CMYK'dan palet kullanan kullanıcı sayısı azdır.

.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

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

Not: Renkler ProPhoto Gamut içindedir; %90 oranında görünürlüğe sahip.

Kodak tarafından oluşturulan bu geniş gam, ultra geniş yelpazede birincil sıcaklıkta benzersiz bir avantaj sunar. minimum düzeyde ton geçişleri içerir ve dikkat edin. Bu model aynı zamanda gerçek yüzey renkleri 1980'de Michael Pointer tarafından belgelendiği gibi.

Artıları

• Açıklık değiştirilirken minimum ton kayması.
• Canlı ana renkler.

Eksileri

• Sunulan renklerin yaklaşık% 13'ü imgesel, yani insan spektrumunda 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

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

Not: Renkler HVS Gamut içindedir; Görünür insan spektrumunun (HVS) %100'ü.

CIE XYZ renk alanı, şuna sahip bir kişi tarafından görülebilen tüm renkleri kapsar: ortalama görmedir. Bu nedenle diğer renkler için standart referans olarak kullanılır. alanlar'a dokunun. Y parlaklıktır, X ve Z belirli bir Y içindeki olası renklerdir parlaklık.

d50 ile d65 arasındaki fark beyaz noktadır; burada d50, d50 değerini kullanır beyaz noktaları ve d65'te d65 beyaz noktayı kullanır.

Anahtar Terim: Beyaz nokta, bir renk alanının özelliğidir. beyaz boşluk bulunur. Elektronik ekranlar için en ideali D65'tir. ortak beyaz bir nokta ve 6.500 kelvin'in kısaltmasıdır. Renk önemlidir beyaz noktaların renk sıcaklığıyla eşleştiği için dönüşüm (sıcaklık veya soğukluk) etkilenmez.

Artıları

• Doğrusal ışık erişiminin pratik kullanım alanları vardır.
• Fiziksel renkleri karıştırmak için idealdir.

Eksileri

• lch, oklch, lab ve oklab gibi kavramsal olarak doğrusal 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 da bir tarayıcıya özel renk alanı öğretme yolu. Bu, tarayıcıya bir güncellemenin nasıl yapılacağını gösteren bir ICC profili renklerini çözmek için kullanılır.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

Yüklemenin ardından color() işlevini kullanarak 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ş animasyonlarda, gradyanlarda renk karıştırma. Bu geçiş, genellikle bir başlangıç rengi ve bitiş rengine sahip olmalıdır. Burada, tarayıcının bunların arasında ara değer belirlemesi gerekir. Bu örnekte interpolasyon, ilk etapta iki rengin arasında bir seri oluşturmak oluşturmak yerine yumuşak bir geçiş oluşturabilirsiniz.

Gradyanda interpolasyon, bir şekil boyunca gelen renklerden oluşan bir seridir. Entegre animasyonda zaman içinde oluşan bir renk dizisidir.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

Gradyan kullanıldığında, aradaki renkler aynı anda gösterilir:

Renk interpolasyonundaki yenilikler

Yeni gamların ve renk alanlarının eklenmesiyle birlikte yeni renk paletleri interpolasyon seçenekleri sunar. in hsl rengi maviden beyaza geçiriliyor sRGB'den çok farklı bir sonuçla karşılaşırsınız.

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

Peki, bir boşluktaki bir renkten tamamen farklı bir alan:

.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 Renk 4 spesifikasyonlarında, bu çapraz girişlerin nasıl ele alınacağına ilişkin en iyi uygulamaları paylaşacağım. .gradient için tarayıcılar farklı ve varsayılan renk alanını (oklab) kullanın.

Tarayıcının renk alanı olarak lch'yi kullanacağını düşünebilirsiniz, çünkü ama renkle eşleşmiyor. Bu nedenle, ikinci bir karşılaştırma gradyanı .lch .lch gradyanı, lch renk alanından bir gradyandır.

16 bit renk sayesinde daha az şerit oluşumu

Bu renk çalışmasından önce, tüm renkler 32 bitlik tek bir tam sayı biçiminde dört kanalı da temsil etmelidir; Kırmızı, yeşil, mavi ve alfa. Bu, kanal ve 2^ 24 olası renk (alfa göz ardı edilir). 2 ^ 24 = 16.777.216, "milyonlarca renk".

Bu renk çalışmasından sonra, dört 16 bit kayan nokta değeri vardır. kendine ait bir kayması yer alır. Bu, 64 bitlik veri toplamıdır. milyonlarca renkle sonuçlanıyor.

Bu çalışma, HD rengini desteklemek için gereklidir. Bu şekilde, reklamın şekline Bu da son derece verimli bir yan etkiye sahiptir, renk tonları kullanır.

Gradyan şerit oluşturma, yumuşak bir gradyan oluşturmak için yeterli renk olmadığında ve "strips" görünür hale gelir. Bantlama, büyük ölçüde azaltılmış daha yüksek çözünürlüklü renge yükseltin.

Resim kaynağı

Kontrol interpolasyonu

İki nokta arasındaki en kısa mesafe her zaman düz bir çizgidir. Renkli interpolasyonda, tarayıcılar varsayılan olarak kısa yolu kullanır. Bir senaryo düşünün burada HSL renk silindirinde iki nokta vardır. Bir renk geçişi çizgi boyunca hareket ettirerek renk adımlarını takip edin.

linear-gradient(to right, #94e99c, #e06242)

.

(örnek gösterim)
Renk durakları arasında çizgi bulunan bir HSL silindirinin yukarıdan aşağı görünümü

Yukarıdaki gradyan çizgisi yeşilden kırmızıya doğru düz gider ortasından geçen bir çizgi gibidir. Yukarıdakiler faydalı olsa da yardımcı olması için, tam olarak ne olduğu değildir. Burada renk geçişi sunar ve ortası olduğu gibi beyaz değildir. gösterdi.

Ancak renk geçişinin orta alanı titreşimini kaybetti. Çünkü en canlı renkler renk alanı şeklinin kenarında, uzaklaştığı noktayı görebilirsiniz. Buna yaygın olarak şu ad verilir: "ölü bölge". Orada , bunu düzeltmenin veya geçici olarak çözmenin birkaç yoludur.

Ölü bölgeyi önlemek için daha fazla gradyan durağı belirtme

Günümüzde cansız bölgeden kaçınmak için bir teknik, arabaya daha fazla renk eklemektir. içinde kalmak için interpolasyonu bilinçli olarak yönlendiren gradyan canlı renk aralıkları var. Tam anlamıyla geçici bir çözüm olduğu için, ek duraklar, uygulamanın ölü bölgede çalışmasına yardımcı olur.

Ek renk hesaplayan bir Erik Kennedy tarafından oluşturulmuş bir gradyan aracı vardır bu, kullanımı kolay olan renk alanlarında bile ölü alandan kaçınmanıza yardımcı olmak için bu değişime odaklanıyor. Bunu kullanarak, ilk örnekteki aynı renkleri iletip Ancak renk interpolasyonu HSL olarak değiştirildiğinde şu sonuç elde edilir:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

.

(örnek gösterim)
9 farklı renk noktası bulunan eğimli bir çizgiye sahip HSL silindirinin yukarıdan aşağı görünümü

Yol gösterici durak noktalarıyla interpolasyon, artık düz bir çizgi değildir ölü bölgenin çevresinde kavisli, doygunluğun korunmasına yardımcı olur. Bu da sonuçta renklendirir.

Araç çok iyi iş çıkarıyor. Benzer veya daha iyi bir araç ya da nasıl kontrol edebilirdiniz?

Renk interpolasyonunu yönlendirme

Renk 4'te, ton interpolasyonu stratejisini kontrol etme özelliği eklendi ve ölü bölgeyi (:wink:) önlemenin yeni bir yolu. Bir renk tonu düşünün ve yalnızca açıyı değiştiren, renk tonunu değiştiren bir 2 noktalı gradyan kullanın 140deg - 240deg arasında değişebilir.

Kısa veya uzun ton interpolasyonu

Renk geçişi varsayılan olarak shorter rotasını izleyebiliyorsa bu görevin longer rota. Renk tonu interpolasyon seçenekleri açı döndürmeyi yönlendirir (örneğin, birine dönmesini söylemek gibi) sol yerine sola (heh, Zoolander):

Ton interpolasyonu mesafeleri örneğinde, kısa yol ve uzun yol simüle edilir. Kısa mesafe daha az mesafe katettiği için aralarındaki ton azaltılır. mümkün olan en hızlı şekilde ilerler.

Ton interpolasyonunu artırma veya azaltma

Renk 4'te iki ton interpolasyon stratejisi daha mevcuttur ancak bunlar silindir şekil için özeldir renk alanları. Önceki örneklerde verilen iki renkle devam edelim. Görsel olarak artık artan ve azalanın işleyiş şeklini göstermektedir.

Yukarıdaki Codepen ColorJS kullanılarak beklenen sonucu verir. JavaScript kitaplığı şö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 sonlandırmak için bu oyun parkında iki renk noktası arasındaki bir tonu belirler ve bir ton interpolasyon seçiminin renk alanlarının gradyan sonuçlarını nasıl değiştirdiği gibi. Efektler, different; bunu, renk araç kemerinizde uygulanmış dört yeni numara olarak düşünün.

Farklı renk alanlarındaki gradyanlar

Her renk alanı, kendine özgü şekli ve renk düzenine göre kullanabilirsiniz. Aşağıdaki örneklerde, her bir renk alanının ve özellikle maviden beyaza doğru ilerledikçe bunları farklı şekilde ele alıyor. Kaç adet olduğuna dikkat edin ortaya mor olur; Buna interpolasyon sırasında ton kayması denir.

Bu alanlardaki bazı gradyanlar diğerlerinden daha canlı veya daha az kullanılabilir ölü alanlar üzerinden iletebilirsiniz. lab gibi alanlar, renkleri doygunluk için optimize edilmiş bir şekilde bir araya getirirken Bunun aksine, insanlar hwb() gibi renk yazabilecek.

.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çlar belli belirsiz olsa da, daha tutarlı sonuçlar verir. interpolasyon yöntemidir. Ancak laboratuvarın söz dizimini okumak kolay değildir. rgb veya hsl'den gelen çok bilinmeyen negatif sayılar vardır. İyi bilinen bir söz dizimi için hwb kullanabiliriz ancak gradyanın bir renk alanı içinde tamamen interpolasyon yapılabilir.

.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 örnekte, hwb'de aynı renkler kullanılmıştır, ancak kullanarak hwb veya oklab şeklinde değiştirebilirsiniz. hwb, yüksek seviyeler için mükemmel bir renk alanıdır ölü bölgeleri veya parlak noktaları görebilirsiniz. örneğine bakın). oklab, kalıcı olmayan doğrusal gradyanlar için doygun. Bu özellik çok eğlenceli. Birkaç farklı rengi deneyebileceksiniz. kullanarak hangi renk geçişini en çok sevdiğinizi görebilirsiniz.

Renk geçişleri ve renk alanlarıyla deneyler yapan, renk geçişlerini karıştıran ve eşleştirme stratejilerini bir araya getirir. Siyahtan geçiş bile her renk alanında farklıdır.

Gamut sınırlaması

Bir rengin, gamın dışında bir şey isteyebileceği senaryolar vardır. Şu rengi göz önünde bulundurun:

rgb(300 255 255)

rgb renk alanında bir renk kanalı için maksimum sayı 255 olabilir, ancak burada Kırmızı için 300 değeri belirtildi. Süreç Gamut sınırlama.

Sabitleme, ekstra bilgilerin kaldırılmasıdır. 300, 255 olur dahili olarak kullanıyoruz. Renk artık kendi alanı içine sabitlenmiştir.

Renk alanı seçme

Birçok kişi, bu renk alanlarını ve etkilerini öğrendikten sonra Bunalmış ve hangisinin “asıl” olduğunu seçin. Çalışmalarımdan ve tüm görevlerim için tek bir renk alanı düşünmüyorum. Her biri anlarını ifade eder.

En iyi tek bir alan olsaydı bu kadar çok yeni alan olmazdı tanıtıldı.

Ancak lab, oklab, lch ve oklch gibi CIE alanlarını da kullanabilirim. daha fazla bilgi edineceksiniz. Sonuçların beklediğim gibi değilse diğer alanları test edin. Renkleri karıştırmak ve renk geçişleri oluşturmak için oklab varsayılan spesifikasyon seçimi. Renk sistemleri ve genel kullanıcı arayüzü renkleri için oklch

Şimdi de kullanıcıların yeni renklerini paylaştığı birkaç makale stratejilerine göz atacağız. Örneğin, Andrey Sitnik oklch tarihinde başlıyorsa belki sizi de aynı şeyi yapmaya ikna ederler:

1. CSS'de OKLCH: RGB ve HSL'den geçiş yapma nedenimiz Andrey Sitnik
2. Renk Biçimleri Oluşturan: Josh W. Comeau
3. OK, OKLCH, ölçütü: Chris Coyier

Sonraki adımlar

Artık yeni renk alanlarına ve araçlarına aşina olduğunuza göre HD renge taşıma başlıklı makaleye göz atın.

Daha fazla canlılık, tutarlı manipülasyonlar ve interpolasyonlar sayesinde genel olarak renkli bir deneyim sunabilir.

Diğer renk kaynaklarını okuyun bazı bilgiler vereceğim.