Rekomendasi kursus:

Fungsi color() CSS

Definisi dan penggunaan CSS color() Fungsi ini mengijinkan menentukan warna di ruang warna khusus.

Contoh

Contoh 1

Tentukan warna latar belakang di ruang warna display-p3 (transparansi 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Coba sendiri

Contoh 2

Dengan sintaks nilai relatif:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

Coba sendiri

Syntaks CSS

Syntaks nilai absolut

color(colorspace c1 c2 c3 / A)
Nilai Deskripsi
colorspace

Wajib. Menentukan ruang warna yang didefiniskan sebelumnya:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Wajib. Menunjukkan nilai komponen ruang warna.

Setiap nilai dapat ditulis dalam angka (antara 0 hingga 1), persen (antara 0% hingga 100%), atau kata kunci none.
/ A

Pilihan. Menunjukkan nilai jalur keputihan warna (0 menunjukkan transparan sepenuhnya, 100 menunjukkan tak transparan sama sekali).

Juga dapat digunakan none (mengartikan jalur keputihan).

Nilai default adalah 100.

Syntaks nilai relatif

color(from color colorspace c1 c2 c3 / A)
Nilai Deskripsi
from color

Dengan kata kunci from diawal, diikuti nilai warna warna asli.

Ini adalah warna asli yang berdasarkan warna relatif.
colorspace

Wajib. Menentukan ruang warna yang didefiniskan sebelumnya:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Wajib. Menunjukkan nilai komponen ruang warna.

Setiap nilai dapat ditulis dalam angka (antara 0 hingga 1), persen (antara 0% hingga 100%), atau kata kunci none.
/ A

Pilihan. Menunjukkan nilai jalur keputihan warna (0 menunjukkan transparan sepenuhnya, 100 menunjukkan tak transparan sama sekali).

Juga dapat digunakan none (mengartikan jalur keputihan).

Nilai default adalah 100.

Detil teknis

Versi: Modul Warna CSS Level 5

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuhnya.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Halaman terkait

Referensi：Warna CSS