Fungsi oklch() dalam CSS

Definisi dan penggunaan

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

oklch() Fungsi yang sangat intuitif: Anda perlu memikirkan jumlah kecerahan/kecerahan (L) yang digunakan, kekuatan warna abu-abu (C), serta warna itu sendiri (H). Selain itu, Anda juga dapat memilih untuk menambahkan nilai lapisan kecerahan (A), yang menyatakan kegelapan warna.

Contoh

Definisi yang berbeza oklch() Warna:

/* warna hijau berbeza pencahayaan */
#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 warna kuning dengan kecerahan yang berbeda /
#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 warna merah dengan kecerahan yang berbeda */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Cuba sendiri

Sintaks CSS

Sintaks nilai absolut

oklch(L C H / A)
Nilai Penerangan
L

Wajib. Tentukan kecerahan warna yang dirasai, boleh adalah nombor di antara 0 hingga 1 atau peratusan di antara 0% hingga 100%.

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

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

Wajib. Tentukan kecerahan warna (jumlah warna), boleh adalah nombor atau peratusan.

Mesti nombor di antara -0.4 hingga 0.4 atau peratusan di antara -100% hingga 100%.

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

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

Wajib. Tentukan warna sendiri, boleh adalah nombor atau sudut (0 hingga 360).

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

Pilihan. Menunjukkan nilai kanaal kecerahan warna (0% atau 0 menunjukkan kecerahan penuh, 100% atau 100 menunjukkan kecerahan penuh).

Juga boleh digunakan none (menunjukkan kanaal kecerahan yang tiada).

Nilai lalai adalah 100%.

Sintaks nilai relatif

oklch(from warna L C H / A)
Nilai Penerangan
from warna

Bermula dengan kata kunci from, diikuti nilai warna yang mewakili warna asal.

Ini adalah warna asal yang berdasarkan warna yang relatif.
L

Wajib. Tentukan kecerahan warna yang dirasai, boleh adalah nombor di antara 0 hingga 1 atau peratusan di antara 0% hingga 100%.

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

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

Wajib. Tentukan kecerahan warna (jumlah warna), boleh adalah nombor atau peratusan.

Mesti nombor di antara -0.4 hingga 0.4 atau peratusan di antara -100% hingga 100%.

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

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

Wajib. Tentukan warna sendiri, boleh adalah nombor atau sudut (0 hingga 360).

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

Pilihan. Menunjukkan nilai kanaal kecerahan warna (0% atau 0 menunjukkan kecerahan penuh, 100% atau 100 menunjukkan kecerahan penuh).

Juga boleh digunakan none (menunjukkan kanaal kecerahan yang tiada). Nilai lalai adalah 100%.

Butir teknikal

Versi: CSS Color Module Level 4

Pendukung pereka

Nombor dalam tabel menunjukkan versi pereka palingawal yang menyokong fungsi ini.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Gabungkan nombor dan peratusan dalam parameter
116 116 113 16.2 102

Laman yang berkenaan

Rujukan：Warna CSS

Rujukan：Fungsi hsl() CSS

Rujukan：Fungsi hwb() CSS

Rujukan：Fungsi lab() CSS

Rujukan：Fungsi lch() CSS

Rujukan：Fungsi oklab() CSS