Harmonogram kursu

Podręcznik referencyjny CSS

Atrybuty CSS

Elective courses

Course recommendation:

Skarbca CodeW3C.com

CSS oklch() function

Poprzednia strona Funkcja oklab() w CSS
Następna strona Funkcja opacity() w CSS
Wróć do poprzedniego poziomu Podręcznik referencyjny funkcji CSS

CSS

Definition and usage in oklch() The function is used to specify colors in the OKLCH color space.

oklch() The function is very intuitive: you need to consider the amount of brightness/lightness (L) you want to use, the intensity of the hue (gray), and the color itself (H). In addition, you can also choose to add a transparency channel value (A), representing the opacity of the color.

examples

Define different oklch() Color:

/* various brightness levels of green /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Różne odcienie żółci /
#p4 {background-color: oklch(30%% 0.4 100);}
#p5 {background-color: oklch(60%% 0.4 100);}
#p6 {background-color: oklch(100%% 0.4 100);}
/ Różne odcienie czerwieni */
#p7 {background-color: oklch(30%% 0.4 20);}
#p8 {background-color: oklch(60%% 0.4 20);}
#p9 {background-color: oklch(100%% 0.4 20);}

Spróbuj sam

Gramatyka CSS

Gramatyka wartości absolutnych

oklch(L C H / A)

Wartość	Opis
L	Wymagane. Definiuje odczuwalną jasność koloru, może to być liczba z zakresu 0 do 1 lub procent z zakresu 0%% do 100%%. 0 (lub 0%%) oznacza czarny, 1 (lub 100%%) oznacza biały. Można również użyć none (рівно 0%%).
C	Wymagane. Definiuje chromatochromię koloru (ilość koloru), może to być liczba lub procent. Musi być liczbą z zakresu -0.4 do 0.4 lub procentem z zakresu -100%% do 100%%. Wartość minimalna (0%% lub -0.4) sprawia, że kolor jest bliżej szarości. Można również użyć none (рівно 0%%).
H	Wymagane. Definiuje sam kolor, może to być liczba lub kąt (od 0 do 360). Można również użyć none (рівно 0stopień).
/ A	Opcjonalne. Wartość kanału przezroczystości koloru (0%% lub 0 oznacza całkowitą przezroczystość, 100%% lub 100 oznacza całkowitą nieprzezroczystość). Można również użyć none (oznaczającego brak kanału przezroczystości). Domyślna wartość to 100%%.

Gramatyka wartości względnych

oklch(from color L C H / A)

Wartość	Opis
from color	Zaczyna się od słowa kluczowego from, po którym następuje wartość koloru oryginalnego. To jest oryginalny kolor, na którym opiera się względny kolor.
L	Wymagane. Definiuje odczuwalną jasność koloru, może to być liczba z zakresu 0 do 1 lub procent z zakresu 0%% do 100%%. 0 (lub 0%%) oznacza czarny, 1 (lub 100%%) oznacza biały. Można również użyć none (рівно 0%%).
C	Wymagane. Definiuje chromatochromię koloru (ilość koloru), może to być liczba lub procent. Musi być liczbą z zakresu -0.4 do 0.4 lub procentem z zakresu -100%% do 100%%. Wartość minimalna (0%% lub -0.4) sprawia, że kolor jest bliżej szarości. Można również użyć none (рівно 0%%).
H	Wymagane. Definiuje sam kolor, może to być liczba lub kąt (od 0 do 360). Można również użyć none (рівно 0stopień).
/ A	Opcjonalne. Wartość kanału przezroczystości koloru (0%% lub 0 oznacza całkowitą przezroczystość, 100%% lub 100 oznacza całkowitą nieprzezroczystość). Można również użyć none (oznaczającego brak kanału przezroczystości). Domyślna wartość to 100%%.