Ruang warna dan fungsi CSS baru di semua mesin utama

Semua mesin utama kini mendukung ruang warna dan fungsi CSS baru. Cari tahu cara membuat desain Anda lebih hidup.

Rachel Andrew

CSS kini mendukung ruang warna yang memungkinkan kita mengakses warna di luar gamut sRGB. Artinya, Anda dapat mendukung layar HD (definisi tinggi), menggunakan warna dari gamut HD. Dukungan ini dilengkapi dengan fungsi baru untuk menggunakan warna dengan lebih baik di web.

Mengakses ruang warna dari CSS

Kita sudah memiliki sejumlah fungsi yang memungkinkan kita mengakses warna dalam gamut sRGB—rgb(), hsl(), dan hwb(). Fungsi color() kini didukung di browser, yaitu cara yang dinormalisasi untuk mengakses warna dalam ruang warna RGB. Hal ini mencakup sRGB, Display P3, dan Rec2020. Anda dapat melihat beberapa contoh dalam CSS berikut:

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

Dukungan Browser

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

Sumber

Beberapa fungsi yang memungkinkan akses ke ruang warna selain sRGB menggunakan lch(), lab(), oklch(), dan oklab() juga didukung.

Dukungan Browser

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

Sumber

Anda dapat mempelajari semua ruang warna yang berbeda ini di Panduan warna CSS dengan resolusi tinggi.

Fungsi color-mix()

Selain ruang warna baru ini, semua mesin kini mendukung fungsi color-mix(). Fungsi ini memungkinkan pencampuran satu warna ke warna lain, di ruang warna mana pun. Dalam CSS berikut, 25% biru dicampur dengan putih, dalam ruang warna srgb.

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

Dukungan Browser

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

Sumber

Pelajari lebih lanjut color-mix()

Fungsi dan ruang warna baru ini menjanjikan warna HD yang cerah untuk web. Untuk inspirasi, mulailah dengan membuat beberapa gradien yang indah menggunakan generator gradien HD di gradient.style.