Ruang warna dan fungsi CSS baru di semua mesin utama

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

Rachel Andrew

CSS kini mendukung ruang warna yang memungkinkan kita mengakses warna di luar gamut sRGB. Ini berarti Anda dapat mendukung layar 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(). Sekarang didukung di browser adalah fungsi color(), cara yang dinormalkan untuk mengakses warna dalam ruang warna RGB apa pun. Ini termasuk sRGB, Display 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);
}

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

Anda dapat mempelajari semua ruang warna yang berbeda ini 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. Pada CSS berikut, 25% warna biru dicampur menjadi putih di ruang warna sRGB.

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

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.