Ruang warna dan fungsi CSS baru di semua mesin utama

Semua mesin utama kini mendukung fungsi dan ruang warna CSS yang baru. Cari tahu bagaimana mereka bisa membawa semangat pada desain Anda.

Rachel Andrew

Perayaan: Fitur web ini kini tersedia di ketiga mesin browser utama!

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

Mengakses ruang warna dari CSS

Kita telah memiliki sejumlah fungsi yang memungkinkan kita mengakses warna dalam gamut sRGB—rgb(), hsl(), dan hwb(). Kini didukung di browser adalah fungsi color(), cara yang dinormalkan untuk mengakses warna dalam ruang warna RGB apa pun. Hal ini termasuk sRGB, Tampilan P3, dan Rec2020. Anda dapat melihat beberapa contoh di 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

• 111
• 111
• 113
• 15 tahun

Sumber

Selain itu, beberapa fungsi yang memungkinkan akses ke ruang warna selain sRGB menggunakan lch(), lab(), oklch(), dan oklab().

Dukungan Browser

• 111
• 111
• 113
• 15 tahun

Sumber

Anda dapat mempelajari semua ruang warna yang berbeda di Panduan warna CSS definisi 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. Di CSS berikut, 25% warna biru dicampur ke putih, di ruang warna sRGB.

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

Dukungan Browser

• 111
• 111
• 113
• 16,2

Sumber

Pelajari lebih lanjut color-mix()

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