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 destekliyor. Bu öğelerin tasarımlarınıza nasıl canlılık katabileceğini öğrenin.

Rachel Andrew

CSS artık sRGB gamının dışındaki renklere erişmemize olanak tanıyan renk alanlarını destekliyor. Bu, HD (yüksek çözünürlüklü) ekranları HD gamutlardaki renkleri kullanarak destekleyebileceğiniz anlamına gelir. Bu destek, web'de renkleri daha iyi kullanabileceğiniz yeni işlevlerle birlikte sunulur.

CSS'den renk alanlarına erişme

sRGB gamutundaki renklere (rgb(), hsl() ve hwb()) erişmemize olanak tanıyan çeşitli işlevlerimiz zaten mevcut. color() işlevi artık tarayıcılarda desteklenmektedir. Bu işlev, herhangi bir RGB renk alanındaki renklere erişmenin normalleştirilmiş bir yoludur. sRGB, Display P3 ve Rec2020 bu kapsamdadır. Aşağıdaki CSS'de bazı örnekleri 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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Kaynak

Ayrıca lch(), lab(), oklch() ve oklab() kullanılarak sRGB dışındaki renk alanlarına erişime olanak tanıyan çeşitli işlevler de desteklenir.

Tarayıcı desteği

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Kaynak

Bu farklı renk alanlarının tümünü Yüksek çözünürlüklü CSS renk kılavuzunda bulabilirsiniz.

color-mix() işlevi

Tüm motorlar artık bu yeni renk alanlarının yanı sıra color-mix() işlevini de destekliyor. Bu işlev, renk alanlarından herhangi birinde bir rengin başka bir renkle karıştırılmasını sağlar. Aşağıdaki CSS'de, mavi rengin% 25'i srgb renk uzayında beyaza karıştırılır.

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

Tarayıcı desteği

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Kaynak

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

Bu yeni işlevler ve renk alanları, web'e canlı HD renkleri getirmeyi vaat ediyor. İlham almak için gradient.style adresindeki HD renk geçişi oluşturucuyu kullanarak güzel renk geçişleri oluşturmaya başlayın.