Tüm önemli motorlarda yeni CSS renk alanları ve işlevleri

Tüm büyük motorlar artık yeni CSS renk alanlarını ve işlevlerini desteklemektedir. Tasarımlarınıza nasıl canlılık katabileceklerini öğrenin.

Rachel Andrew

Kutlama: Bu web özelliği artık üç büyük tarayıcı motorunun hepsinde de kullanılabilir!

CSS artık sRGB gamının dışındaki renklere erişmemize olanak tanıyan renk alanlarını destekliyor. Bu, HD gamlarındaki renkleri kullanarak HD (yüksek tanımlı) ekranları destekleyebileceğiniz anlamına gelir. Bu destek, web'de renkleri daha iyi şekilde kullanmanızı sağlayacak yeni işlevlerle birlikte geliyor.

CSS'den renk alanlarına erişme

sRGB gamındaki renklere erişmemizi sağlayan rgb(), hsl() ve hwb() işlevlerine zaten sahibiz. Artık tarayıcılarda color() işlevi desteklenmektedir. Bu işlev, herhangi bir RGB renk alanı içindeki renklere erişmenin normalleştirilmiş bir yoludur. Buna sRGB, Display P3 ve Rec2020 dahildir. Aşağıdaki CSS'de bazı örnekler görebilirsiniz:

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

Tarayıcı Desteği

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

Kaynak

Ayrıca lch(), lab(), oklch() ve oklab() kullanarak sRGB dışındaki renk alanlarına erişim sağlayan çeşitli işlevler de desteklenir.

Tarayıcı Desteği

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

Kaynak

Bu farklı renk alanlarının tümü hakkında bilgi edinmek için Yüksek Çözünürlüklü CSS renk rehberini inceleyebilirsiniz.

color-mix() işlevi

Bu yeni renk alanlarının yanı sıra tüm motorlar artık color-mix() işlevini desteklemektedir. Bu işlev, herhangi bir renk alanında bir rengin başka bir renkle karıştırılmasını sağlar. Aşağıdaki CSS'de, mavinin% 25'i sxls renk alanında beyaza karıştırıldı.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 16.2

Kaynak

color-mix() hakkında daha fazla bilgi edinin.

Bu yeni işlevler ve renk alanları, web'e canlı HD renkler getirmeyi vaat ediyor. İlham almak için gradient.style adresindeki HD gradyan oluşturma aracını kullanarak birbirinden güzel gradyanlar oluşturarak işe başlayın.