CSS-Farben

Der untenstehende Farbsyntax-Konverter zeigt die Werte der aktuell ausgewählten Farbe in den CSS-Farbformaten rot-grün-blau (RGB), hexadezimal (HEX), Farbton, Sättigung und Helligkeit (HSL) und Farbton, Weiße und Schwärze (HWB) an. Alle RGB-, HEX-, HSL- und HWB-Farbwerte hier repräsentieren, obwohl unterschiedlich geschrieben, denselben Farbwert.

Das Auswählen einer Farbe über den Farbwähler und einer Transparenz über den Schieberegler aktualisiert die RGB-, HEX-, HSL- und HWB-Werte. Wenn Sie einen neuen Farb- oder Transparenzwert wählen, aktualisiert sich die Farbe des Hintergrunds und des Schiebereglers über die CSS-Eigenschaften background-color und accent-color.

Um den Code dieses Farbsyntax-Konverters zu sehen, sehen Sie den Quellcode auf GitHub.

• color
• opacity

Das CSS-Farbmodul führt auch die @color-profile At-Rule ein, zusammen mit ihren components, rendering-intent und src Beschreibungen. Derzeit unterstützen keine Browser diese Funktionen.

• Farb-Funktionen:
  • rgb()
  • hsl()
  • hwb()
  • lab()
  • lch()
  • oklab()
  • oklch()
  • color()
• color-mix()
• contrast-color()
• light-dark()

Das CSS-Farbmodul führt auch die device-cmyk() und contrast-color() Funktionen ein. Derzeit unterstützen keine Browser diese Funktionen.

• <color>
• <color-function>
• <hex-color>
• <named-color>
• <alpha-value>
• <hue>
• <system-color>
• <colorspace-params>

• Farbraum
• currentColor
• Interpolation
• RGB
• transparent

Das CSS-Farbmodul führt auch die CSSColorProfileRule Schnittstelle ein. Derzeit unterstützen keine Browser diese Funktion.

Anwenden von Farben auf HTML-Elemente mittels CSS

Ein Leitfaden zur Verwendung von CSS, um Farbe auf verschiedene Arten von Inhalten anzuwenden, einschließlich aller CSS-Eigenschaften, die <color> als Wert akzeptieren.

CSS-Farbwerte

Ein Überblick über Farbräume und die verschiedenen <color> Funktionsnotationen, die in CSS verfügbar sind.

Farben klug verwenden

Farbtheorie und Ressourcen, einschließlich der Suche nach den richtigen Farben, um eine zugängliche Farbpalette, Kontrast und Druck in Farbe zu erstellen.

Verwendung relativer Farben

Dieser Artikel erklärt die relative CSS-Farbsyntax, zeigt, welche verschiedenen Optionen es gibt, und beleuchtet einige anschauliche Beispiele.

Farbwähler-Tool

Ein Tool, das Ihnen ermöglicht, eine Farbe im sRGB-Farbraum auszuwählen und sie zwischen verschiedenen CSS-Farbformaten zu konvertieren, damit Sie die Syntax der verschiedenen Farbnationen verstehen.

Farbe und Leuchtdichte verstehen

Farbverständnis und Verwendung von Farben für farbunempfindliche Nutzer (farbblind), Benutzer mit eingeschränktem Sehvermögen und Benutzer mit vestibulären Störungen oder anderen neurologischen Störungen.

WCAG 1.4.1: Farbkontrast

Erklärung der Kontrastanforderungen zwischen Hintergrund- und Vordergrund-Inhalten, um die Lesbarkeit zu gewährleisten.

• CSS-Eigenschaften, die Teil anderer Spezifikationen sind:
  • accent-color
  • background-color
  • background-image
  • border-color
  • box-shadow
  • caret-color
  • color
  • color-scheme
  • column-rule-color
  • outline-color
  • scrollbar-color
  • text-decoration-color
  • text-emphasis-color
  • text-shadow
  • -webkit-tap-highlight-color
• SVG-Farbeigenschaften, die Teil anderer Spezifikationen sind:
  • fill
  • flood-color
  • lighting-color
  • stop-color
  • stroke
• SVG color-Attribut
• Farbkreis Glossarbegriff
• Interpolation Glossarbegriff
• Das @font-palette-values At-Rule override-colors Deskriptor
• Das @color-profile At-Rule
• Die color-gamut @media Funktion
• Die forced-colors @media Funktion

• CSS Farbkorrektur Modul und die print-color-adjust Eigenschaft.
• CSS-Bilder Modul, in dem CSS <gradient>-Bilder definiert sind.
• Die VideoColorSpace Schnittstelle
• Das SVG <feColorMatrix> Element
• Canvas-API: Stile und Farben anwenden