Fungsi oklch() di CSS

Definisi dan penggunaan

Definisi dan penggunaan di CSS: oklch() Fungsi digunakan untuk menentukan warna di ruang warna OKLCH.

oklch() Fungsi sangat alami: Anda harus mempertimbangkan jumlah kecerahan/mutu (L) yang digunakan, kekuatan warna (C) (abu-abu), serta warna sendiri (H). Selain itu, Anda juga dapat memilih menambahkan nilai transparansi (A), yang menunjukkan kepadatan warna.

contoh

Definisi berbeda oklch() Warna:

/*warna berbeda kecerahan hijau */
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Berbagai tingkat kecerahan kuning /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Berbagai tingkat kecerahan merah */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Coba sendiri

Syntaks CSS

Syntaks nilai absolut

oklch(L C H / A)
Nilai Deskripsi
L

Wajib. Menentukan kecerahan warna yang dirasakan, dapat berupa angka diantara 0 sampai 1 atau persen diantara 0 sampai 100.

0 (atau 0%) menunjukkan hitam, 1 (atau 100%) menunjukkan putih.

Juga dapat digunakan none (sama dengan 0%).
C

Wajib. Menentukan dekatan warna (jumlah warna), dapat berupa angka atau persen.

Harus angka diantara -0.4 sampai 0.4 atau persen diantara -100% sampai 100%.

Nilai minimum (0% atau -0.4) saat warna mendekati abu-abu.

Juga dapat digunakan none (sama dengan 0%).
H

Wajib. Menentukan warna sendiri, dapat berupa angka atau sudut (0 sampai 360).

Juga dapat digunakan none (sama dengan 0deg).
/ A

Pilihan. Menunjukkan nilai jalur transparensi warna (0% atau 0 menunjukkan transparan penuh, 100% atau 100 menunjukkan tak transparan).

Juga dapat digunakan none (menunjukkan jalur transparensi yang tidak ada).

Nilai default adalah 100%.

Syntaks nilai relatif

oklch(from color L C H / A)
Nilai Deskripsi
from color

Mulai dengan kata kunci from, diikuti nilai warna yang menunjukkan warna asli.

Ini adalah warna asli yang berdasarkan warna yang relatif.
L

Wajib. Menentukan kecerahan warna yang dirasakan, dapat berupa angka diantara 0 sampai 1 atau persen diantara 0 sampai 100.

0 (atau 0%) menunjukkan hitam, 1 (atau 100%) menunjukkan putih.

Juga dapat digunakan none (sama dengan 0%).
C

Wajib. Menentukan dekatan warna (jumlah warna), dapat berupa angka atau persen.

Harus angka diantara -0.4 sampai 0.4 atau persen diantara -100% sampai 100%.

Nilai minimum (0% atau -0.4) saat warna mendekati abu-abu.

Juga dapat digunakan none (sama dengan 0%).
H

Wajib. Menentukan warna sendiri, dapat berupa angka atau sudut (0 sampai 360).

Juga dapat digunakan none (sama dengan 0deg).
/ A

Pilihan. Menunjukkan nilai jalur transparensi warna (0% atau 0 menunjukkan transparan penuh, 100% atau 100 menunjukkan tak transparan).

Juga dapat digunakan none (menunjukkan jalur transparensi yang tidak ada). Nilai default adalah 100%.

Detil teknis

Versi: CSS Color Module Level 4

Dukungan browser

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

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Menggabungkan angka dan persen di parameter
116 116 113 16.2 102

Halaman yang berhubungan

Rujukan：Warna CSS

Rujukan：Fungsi hsl() CSS

Rujukan：Fungsi hwb() CSS

Rujukan：Fungsi lab() CSS

Rujukan：Fungsi lch() CSS

Rujukan：Fungsi oklab() CSS