Farben und fortgeschrittene Funktionen: oklch, color-mix, min/max

Nutze perzeptuelle Farbräume, die relative Farbsyntax und typisierte Mathematik-Funktionen, um Designsysteme zu bauen, die der Browser für dich berechnet.

10 Min. · 3 Fragen

Der strukturelle Fehler von hsl(): Seine Helligkeit ist nicht perzeptuell. hsl(60 100% 50%) (Gelb) wirkt grell, während hsl(240 100% 50%) (Blau) dunkel wirkt, bei identischem L. oklch behebt das: Seine Komponente L (0 bis 1) misst die wahrgenommene Helligkeit, C ist das Chroma (absolute Sättigung, 0 bis rund 0,37) und H der Farbtonwinkel. H bei konstantem L zu ändern erhält die wahrgenommene Helligkeit: Deine Palettenvariationen werden endlich vorhersehbar. Kombiniert mit der relativen Farbsyntax (from) leitet der Browser deine Hover-, gedämpften oder dunklen Varianten von selbst ab.

:root {
  --brand: oklch(0.65 0.19 255);
  --dark: oklch(from var(--brand) calc(l - 0.15) c h);
  --muted: oklch(from var(--brand) l calc(c / 2) h);
  --accent: oklch(from var(--brand) l c calc(h + 180));
}

oklch kann Farben außerhalb des sRGB-Gamuts beschreiben oder sogar außerhalb von Display-P3. Was macht der Browser, wenn der Bildschirm sie nicht darstellen kann? Kein brutales Abschneiden Kanal für Kanal: Die Spezifikation schreibt ein Gamut-Mapping vor, das das Chroma schrittweise reduziert und dabei Helligkeit und Farbton erhält, bis die Farbe in den Ziel-Gamut passt. Bildschirme mit weitem Gamut kannst du explizit mit @media (color-gamut: p3) ansteuern. Ein weiteres Mischwerkzeug: color-mix(), dessen erstes Argument - der Interpolationsraum - das Ergebnis wirklich verändert: Eine Mischung in srgb von Blau und Gelb wird grau, während in oklch durch lebendige Farbtöne wandert.

.badge {
  background: color-mix(in oklch, crimson 70%, white);
  border-color: color-mix(
    in oklch,
    var(--brand),
    transparent 60%
  );
}

min(), max() und clamp() sind typisierte Mathematik-Funktionen: Sie erlauben das Mischen von Einheiten, die zur Parse-Zeit unvereinbar sind (rem + vw), weil die Auflösung zur Used-Value-Zeit erfolgt, sobald der Viewport bekannt ist. clamp(MIN, VAL, MAX) ist streng gleichwertig zu max(MIN, min(VAL, MAX)) - eine Folge der Spezifikation: Wenn MIN größer als MAX ist, gewinnt MIN. Für fluide Typografie füge dem mittleren Wert stets eine rem-Komponente hinzu: Ein font-size: clamp(1rem, 2.5vw, 3rem) ohne rem würde den Textzoom des Nutzers ignorieren, ein echtes Barrierefreiheitsproblem.

h1 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 3rem);
}
.sidebar {
  width: min(30%, 20rem);
  padding-left: max(1rem, env(safe-area-inset-left));
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welchen entscheidenden Vorteil bietet oklch gegenüber hsl?
   • Eine kürzer zu schreibende Syntax
   • Eine Helligkeit L, die von einem Farbton zum anderen perzeptuell einheitlich ist
   • Eine Garantie, innerhalb des sRGB-Gamuts zu bleiben
   • Der einzige Farbraum, der einen Alphakanal unterstützt
2. Was macht der Browser, wenn eine oklch-Farbe den Gamut des Bildschirms überschreitet?
   • Er ignoriert die Deklaration und behält die vorherige Farbe
   • Er wendet ein Gamut-Mapping an, das hauptsächlich das Chroma reduziert
   • Er schneidet jeden RGB-Kanal unabhängig ab, ohne weitere Verarbeitung
3. Was passiert in clamp(MIN, VAL, MAX), wenn der berechnete MIN-Wert MAX überschreitet?
   • Die Deklaration wird ungültig und wird ignoriert
   • MAX gewinnt und deckelt das Ergebnis
   • MIN gewinnt, weil clamp zu max(MIN, min(VAL, MAX)) expandiert