Προτεινόμενη ενότητα:

Συνάρτηση oklch() στο CSS

Ορισμός και χρήση στο CSS oklch() Η συνάρτηση χρησιμοποιείται για να καθορίζει το χρώμα στο χώρο χρώματος OKLCH.

oklch() Η συνάρτηση είναι πολύ εύκολη στη χρήση: πρέπει να λάβετε υπόψη την ποσότητα της φωτεινότητας/χρώματος (L), την ένταση του τόνου (C), καθώς και το χρώμα του ίδιου του χρώματος (H). Επιπλέον, μπορείτε να επιλέξετε να προσθέσετε έναν κανάλι διαφάνειας (A), το οποίο αντιπροσωπεύει την αδιαφάνεια του χρώματος.

παραδείγματα

Ορίζει διαφορετικές oklch() Χρώμα:

/* Διαφορετικές φωτεινότητες του πράσινου */
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Yellow at different brightnesses /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Red at different brightnesses */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Try it yourself

CSS syntax

Absolute value syntax

oklch(L C H / A)
Value Description
L

Required. Defines the perceived brightness of the color, which can be a number between 0 and 1 or a percentage between 0% and 100%.

0 (or 0%) represents black, 1 (or 100%) represents white.

You can also use none (equivalent to 0%).
C

Required. Defines the chroma (quantity of the color), which can be a number or a percentage.

It must be a number between -0.4 and 0.4 or a percentage between -100% and 100%.

At the minimum value (0% or -0.4), the color is closer to gray.

You can also use none (equivalent to 0%).
H

Required. Defines the color itself, which can be a number or an angle (0 to 360).

You can also use none (equivalent to 0deg).
/ A

Optional. Represents the transparency channel value of the color (0% or 0 represents completely transparent, 100% or 100 represents completely opaque).

You can also use none (representing no transparency channel).

The default value is 100%.

Relative value syntax

oklch(from color L C H / A)
Value Description
from color

Starts with the keyword from, followed by the color value representing the original color.

This is the original color on which the relative color is based.
L

Required. Defines the perceived brightness of the color, which can be a number between 0 and 1 or a percentage between 0% and 100%.

0 (or 0%) represents black, 1 (or 100%) represents white.

You can also use none (equivalent to 0%).
C

Required. Defines the chroma (quantity of the color), which can be a number or a percentage.

It must be a number between -0.4 and 0.4 or a percentage between -100% and 100%.

At the minimum value (0% or -0.4), the color is closer to gray.

You can also use none (equivalent to 0%).
H

Required. Defines the color itself, which can be a number or an angle (0 to 360).

You can also use none (equivalent to 0deg).
/ A

Optional. Represents the transparency channel value of the color (0% or 0 represents completely transparent, 100% or 100 represents completely opaque).

You can also use none (representing no transparency channel). The default value is 100%.

Technical details

Version: CSS Color Module Level 4

Browser support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Mixing numbers and percentages in parameters
116 116 113 16.2 102

Related pages

Αναφορά:Χρώματα CSS

Αναφορά:CSS hsl() function

Αναφορά:Λειτουργία hwb() στο CSS

Αναφορά:Λειτουργία lab() στο CSS

Αναφορά:Λειτουργία lch() στο CSS

Αναφορά:Λειτουργία oklab() στο CSS