空腹喝可乐有什么危害

Nachfolgend sind die Beschreibungen der zul?ssigen Werte für sowohl absolute als auch relative Farben aufgelistet.

Absolute Wert-Syntax

oklch(L C H[ / A])

Die Parameter sind wie folgt:

L

Ein <number> zwischen 0 und 1, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (in diesem Fall gleichbedeutend mit 0%). In diesem Fall entspricht die Zahl 0 0% (schwarz) und die Zahl 1 100% (wei?). Dieser Wert gibt die wahrgenommene Helligkeit oder "Helligkeit" der Farbe an.

Hinweis: Das L in oklch() ist die wahrgenommene Helligkeit, die sich auf die "Helligkeit" bezieht, die wir mit unseren Augen wahrnehmen. Dies unterscheidet sich vom L in hsl(), wo es die Helligkeit im Vergleich zu anderen Farben darstellt.

C

Ein <number>, ein <percentage>, oder das Schlüsselwort none (gleich 0% in diesem Fall). Dieser Wert ist ein Ma? für die Chroma der Farbe (ungef?hr die "Menge der Farbe"). Sein minimaler nützlicher Wert ist 0, w?hrend der maximale theoretisch unbegrenzt ist (praktisch jedoch nicht 0.5 überschreitet). In diesem Fall ist 0% 0 und 100% ist die Zahl 0.4.

H

Ein <number>, ein <angle>, oder das Schlüsselwort none (gleich 0deg in diesem Fall), das den <hue>-Winkel der Farbe repr?sentiert.

Hinweis: Die Winkel, die bestimmten Farbt?nen entsprechen, unterscheiden sich zwischen dem sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()) Farbr?umen. Siehe das untenstehende Beispiel Farbt?ne in oklch() und die <hue> Referenzseite für weitere Details und Beispiele.

A Optional

Ein <alpha-value>, das den Alpha-Kanal-Wert der Farbe darstellt, wobei die Zahl 0 0% (vollst?ndig transparent) und 1 100% (vollst?ndig undurchsichtig) entspricht. Zus?tzlich kann das Schlüsselwort none verwendet werden, um ausdrücklich keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht ausdrücklich angegeben wird, betr?gt er standardm??ig 100%. Wenn enthalten, wird der Wert durch einen Schr?gstrich (/) eingeleitet.

Relative Wert-Syntax

oklch(from <color> L C H[ / A])

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from wird immer verwendet, wenn eine relative Farbe definiert wird, gefolgt von einem <color> Wert, der die Ursprungsfarbe darstellt: Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann jede gültige <color> Syntax sein, einschlie?lich einer anderen relativen Farbe.

L

Ein <number> zwischen 0 und 1, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (gleichbedeutend mit 0% in diesem Fall). Dies repr?sentiert den Helligkeitswert der Ausgabefarbe. Hier entspricht die Zahl 0 0% (schwarz) und die Zahl 1 100% (wei?).

C

Ein <number>, ein <percentage>, oder das Schlüsselwort none (gleichbedeutend mit 0% in diesem Fall). Dieser Wert repr?sentiert den Chromawert der Ausgabefarbe (ungef?hr die "Menge der Farbe"). Sein minimaler nützlicher Wert ist 0, w?hrend sein maximaler theoretisch unbegrenzt ist (praktisch jedoch nicht 0.5 überschreitet). In diesem Fall ist 0% 0 und 100% ist die Zahl 0.4.

H

Ein <number>, ein <angle>, oder das Schlüsselwort none (gleichbedeutend mit 0deg in diesem Fall), das den <hue>-Winkel der Ausgabefarbe repr?sentiert. Siehe ein Beispiel für verschiedene Farbt?ne im Abschnitt Beispiele unten.

A Optional

Ein <alpha-value>, das den Alpha-Kanal-Wert der Ausgabefarbe darstellt, wobei die Zahl 0 0% (vollst?ndig transparent) und 1 100% (vollst?ndig undurchsichtig) entspricht. Zus?tzlich kann das Schlüsselwort none verwendet werden, um ausdrücklich keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht ausdrücklich angegeben wird, entspricht er standardm??ig dem Alpha-Kanal-Wert der Ursprungsfarbe. Wenn enthalten, wird der Wert durch einen Schr?gstrich (/) eingeleitet.

Definieren von Kanal-Komponenten für den Ausgabefarbkanal

Beim Verwenden der relativen Farbsyntax innerhalb einer oklch() Funktion konvertiert der Browser die Ursprungsfarbe in eine gleichwertige Oklch-Farbe (wenn diese nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — sowie einen Alpha-Kanal-Wert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um beim Definieren der Ausgabefarbkanalwerte verwendet zu werden:

• Der l-Kanalwert wird zu einem <number> zwischen 0 und 1 aufgel?st, einschlie?lich.
• Der c-Kanalwert wird zu einem <number> zwischen 0 und 0.4 aufgel?st, einschlie?lich.
• Der h-Kanalwert wird zu einem <number> zwischen 0 und 360 aufgel?st, einschlie?lich.
• Der alpha-Kanal wird zu einem <number> zwischen 0 und 1 aufgel?st, einschlie?lich.

Beim Definieren einer relativen Farbe k?nnen die verschiedenen Kan?le der Ausgabefarbe auf verschiedene Weisen ausgedrückt werden. Nachfolgend untersuchen wir einige Beispiele, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Das erste gibt jedoch dieselbe Farbe wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Sie würden diese wahrscheinlich nie in einem echten Codebase verwenden und wahrscheinlich stattdessen nur einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt zum Erlernen der relativen oklch()-Syntax aufgenommen.

Lassen Sie uns mit einer Ursprungsfarbe von hsl(0 100% 50%) (entspricht rot) beginnen. Die folgende Funktion gibt dieselbe Farbe wie die Ursprungsfarbe aus — sie verwendet die l, c und h Kanalwerte (0.627966, 0.257704 und 29.2346) der Ursprungsfarbe als Ausgabekanalwerte:

oklch(from hsl(0 100% 50%) l c h)

Diese Funktion ergibt die Ausgabefarbe oklch(0.627966 0.257704 29.2346).

Die n?chste Funktion verwendet absolute Werte für die Ausgabefarbkanalwerte und gibt eine v?llig andere Farbe aus, die nicht auf der Ursprungsfarbe basiert:

oklch(from hsl(0 100% 50%) 42.1% 0.25 328.363)

In diesem Fall ist die Ausgabefarbe oklch(0.421 0.25 328.363).

Die folgende Funktion erstellt eine relative Farbe auf Basis der Ursprungsfarbe:

oklch(from hsl(0 100% 50%) 0.8 0.4 h)

Dieses Beispiel:

• Konvertiert die hsl() Ursprungsfarbe in eine gleichwertige oklch()-Farbe — oklch(0.627966 0.257704 29.2346).
• Setzt den H-Kanalwert für die Ausgabefarbe auf den H-Kanalwert der Ursprünglichkeit oklch()-?quivalente — 29.2346.
• Legt die L- und C-Kanalwerte der Ausgabefarbe auf neue Werte fest, die nicht auf der Ursprungsfarbe basieren: 0.8 und 0.4.

Die endgültige Ausgabefarbe ist oklch(0.8 0.4 29.2346).

In den bisherigen Beispielen in diesem Abschnitt wurden die Alpha-Kan?le weder für die Ursprungs- noch die Ausgabefarben ausdrücklich spezifiziert. Wenn der Alpha-Kanal der Ausgabefarbe nicht spezifiziert ist, entspricht er standardm??ig dem Wert des Alpha-Kanals der Ursprungsfarbe. Wenn der Alpha-Kanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), betr?gt er standardm??ig 1. Daher betr?gt der Alpha-Kanalwert der Ursprungs- und Ausgabefarben in den obigen Beispielen 1.

Lassen Sie uns einige Beispiele betrachten, die Ursprungs- und Ausgabefarbkanalwerte angeben. Das erste gibt den Alpha-Kanalwert der Ausgabefarbe an, der dem Alpha-Kanalwert der Ursprungsfarbe entspricht, w?hrend das zweite einen anderen Alpha-Kanalwert angibt, der nicht mit dem Alpha-Kanalwert der Ursprungsfarbe verwandt ist.

oklch(from hsl(0 100% 50% / 0.8) l c h / alpha)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.8) */

oklch(from hsl(0 100% 50% / 0.8) l c h / 0.5)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.5) */

Im folgenden Beispiel wird die hsl() Ursprungsfarbe erneut in das oklch()-?quivalent konvertiert — oklch(0.627966 0.257704 29.2346). Auf die L-, C-, H- und A-Werte werden calc()-Berechnungen angewendet, was zu einer Ausgabefarbe von oklch(0.827966 0.357704 9.23462 / 0.9) führt:

oklch(from hsl(0 100% 50%) calc(l + 0.2) calc(c + 0.1) calc(h - 20) / calc(alpha - 0.1))

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>  

Dieses Beispiel zeigt die Wirkung, die das Variieren des L (Helligkeit)-Werts der oklch() Funktionsnotation hat.

HTML

<div data-color="blue-dark"></div>
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red-dark"></div>
<div data-color="red"></div>
<div data-color="red-light"></div>

<div data-color="green-dark"></div>
<div data-color="green"></div>
<div data-color="green-light"></div>

CSS

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

[data-color="blue-dark"] {
  background-color: oklch(10% 0.4 240);
}
[data-color="blue"] {
  background-color: oklch(50% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red-dark"] {
  background-color: oklch(10% 0.4 20);
}
[data-color="red"] {
  background-color: oklch(50% 0.4 20);
}
[data-color="red-light"] {
  background-color: oklch(90% 0.4 20);
}

[data-color="green-dark"] {
  background-color: oklch(10% 0.4 130);
}
[data-color="green"] {
  background-color: oklch(50% 0.4 130);
}
[data-color="green-light"] {
  background-color: oklch(90% 0.4 130);
}

Ergebnis

Das folgende Beispiel zeigt die Wirkung, die das Variieren des C (Chroma)-Werts der oklch() Funktionsnotation hat, wobei die Farben in der Intensit?t abnehmen, je mehr der C-Wert von vollst?ndig ges?ttigt zu fast grau abnimmt.

HTML

<div data-color="blue"></div>
<div data-color="blue-chroma1"></div>
<div data-color="blue-chroma2"></div>
<div data-color="blue-chroma3"></div>

<div data-color="red"></div>
<div data-color="red-chroma1"></div>
<div data-color="red-chroma2"></div>
<div data-color="red-chroma3"></div>

<div data-color="green"></div>
<div data-color="green-chroma1"></div>
<div data-color="green-chroma2"></div>
<div data-color="green-chroma3"></div>

CSS

Mit den anf?nglichen Startfarben Blau, Rot und Grün deklarieren wir progressive kleinere Chroma-Werte für sie: beginnend bei voller Farbs?ttigung am hohen Wert von 0.4 (entspricht 100%) bis 0.01 (entspricht 2%), was für alle Farben fast grau ist.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

[data-color="blue"] {
  background-color: oklch(50% 0.4 240);
}
[data-color="blue-chroma1"] {
  background-color: oklch(50% 0.2 240);
}
[data-color="blue-chroma2"] {
  background-color: oklch(50% 0.1 240);
}
[data-color="blue-chroma3"] {
  background-color: oklch(50% 0.01 240);
}

[data-color="red"] {
  background-color: oklch(50% 100% 20deg);
}
[data-color="red-chroma1"] {
  background-color: oklch(50% 50% 20deg);
}
[data-color="red-chroma2"] {
  background-color: oklch(50% 25% 20deg);
}
[data-color="red-chroma3"] {
  background-color: oklch(50% 2% 20deg);
}

[data-color="green"] {
  background-color: oklch(50% 0.4 130);
}
[data-color="green-chroma1"] {
  background-color: oklch(50% 0.2 130);
}
[data-color="green-chroma2"] {
  background-color: oklch(50% 0.1 130);
}
[data-color="green-chroma3"] {
  background-color: oklch(50% 0.01 130);
}

Ergebnis

H?tten wir statt 0 0.01 und 2% verwendet, w?ren bei gleichen Helligkeitswerten alle Farben der gleiche Grauton gewesen. In diesem Beispiel sind sie fast grau.

Das folgende Beispiel zeigt Farbfelder mit unterschiedlichen H (Farbton) Werten der oklch() Funktionsnotation.

HTML

<div data-color="0">0deg</div>
<div data-color="20">20deg</div>
<div data-color="40">40deg</div>
<div data-color="60">60deg</div>

und so weiter.

<div data-color="80">80deg</div>
<div data-color="100">100deg</div>
<div data-color="120">120deg</div>
<div data-color="140">140deg</div>
<div data-color="160">160deg</div>
<div data-color="180">180deg</div>
<div data-color="200">200deg</div>
<div data-color="220">220deg</div>
<div data-color="240">240deg</div>
<div data-color="260">260deg</div>
<div data-color="280">280deg</div>
<div data-color="300">300deg</div>
<div data-color="320">320deg</div>
<div data-color="340">340deg</div>
<div data-color="360">360deg</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
div {
  flex: 0 0 4em;
  text-align: center;
  line-height: 4em;
  display: inline-block;
  border: 1px solid black;
  color: white;
  font-family: monospace;
}

[data-color="0"] {
  background-color: oklch(50% 0.4 0deg);
}
[data-color="20"] {
  background-color: oklch(50% 0.4 20deg);
}
[data-color="40"] {
  background-color: oklch(50% 0.4 40deg);
}
[data-color="60"] {
  background-color: oklch(50% 0.4 60deg);
}

und so weiter.

[data-color="80"] {
  background-color: oklch(50% 0.4 80deg);
}
[data-color="100"] {
  background-color: oklch(50% 0.4 100deg);
}
[data-color="120"] {
  background-color: oklch(50% 0.4 120deg);
}
[data-color="140"] {
  background-color: oklch(50% 0.4 140deg);
}
[data-color="160"] {
  background-color: oklch(50% 0.4 160deg);
}
[data-color="180"] {
  background-color: oklch(50% 0.4 180deg);
}
[data-color="200"] {
  background-color: oklch(50% 0.4 200deg);
}
[data-color="220"] {
  background-color: oklch(50% 0.4 220deg);
}
[data-color="240"] {
  background-color: oklch(50% 0.4 240deg);
}
[data-color="260"] {
  background-color: oklch(50% 0.4 260deg);
}
[data-color="280"] {
  background-color: oklch(50% 0.4 280deg);
}
[data-color="300"] {
  background-color: oklch(50% 0.4 300deg);
}
[data-color="320"] {
  background-color: oklch(50% 0.4 320deg);
}
[data-color="340"] {
  background-color: oklch(50% 0.4 340deg);
}
[data-color="360"] {
  background-color: oklch(50% 0.4 360deg);
}

Ergebnis

Die Farbwinkel in oklch() unterscheiden sich von denen in hsl(). Weitere Informationen siehe <hue>. In hsl() repr?sentiert die sRGB-Farbe 0deg rot. Im CIELab-Farbraum entspricht 0deg jedoch Magenta, w?hrend Rot ungef?hr 41deg ist.

Das folgende Beispiel zeigt die Wirkung, die das Variieren des A (Alpha)-Werts der oklch()-Farbe hat. Die red- und red-alpha-Elemente überlappen das #background-div-Element, um die Wirkung der Deckkraft zu demonstrieren. Ein A-Wert von 0.4 macht die Farbe zu 40% undurchsichtig.

HTML

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}

[data-color="red"] {
  background-color: oklch(50% 0.5 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 0.5 20 / 0.4);
}

Ergebnis

Dieses Beispiel gestaltet drei <div> Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere Element erh?lt die unver?nderte --base-color, w?hrend die linken und rechten Elemente aufgehellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine oklch() Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal über eine calc() Funktion so modifiziert, dass der gewünschte Effekt erzielt wird. Der aufgehellte Farbe wird 0.15 (15%) zum Helligkeitskanal hinzugefügt, und der abgedunkelten Farbe wird 0.15 (15%) vom Helligkeitskanal abgezogen.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
}

#one {
  background-color: oklch(from var(--base-color) calc(l + 0.15) c h);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: oklch(from var(--base-color) calc(l - 0.15) c h);
}

Ergebnis

Der Output ist wie folgt:

• Liste aller Farbnationen
• Verwendung relativer Farben
• CSS-Colormodul
• <hue> Datentyp
• lch() und oklab() Farb-Funktionen
• Interaktiver Beitrag zum OKLCH-Farbraum (2024)
• OKLCH in CSS: Warum wir von RGB und HSL gewechselt sind (2024)
• Ein perceptualer Farbraum für die Bildverarbeitung (2020)