Color filters

Farbfilter ändern oder extrahieren Eigenschaften von CSS-Farbstrings. Diese Filter werden in der Regel in Verbindung mit Farbdesign-Einstellungen verwendet.

Inhalt

• color_to_rgb
• color_to_hsl
• color_to_hex
• color_extract
• color_brightness
• color_modify
• color_lighten
• color_darken
• color_saturate
• color_desaturate
• color_mix
• color_contrast
• color_difference
• brightness_difference

color_to_rgb

Konvertiert einen CSS-Farbstring in das CSS-Format rgb().

{{ '#7ab55c' | color_to_rgb }}

rgb(122, 181, 92)

Wenn die Eingabefarbe eine Alphakomponente hat, wird die Ausgabe im CSS-Format rgba() erfolgen.

{{ 'hsla(100, 38%, 54%, 0.5)' | color_to_rgb }}

rgba(122, 181, 92, 0.5)

color_to_hsl

Konvertiert einen CSS-Farbstring in das CSS-Format hsl().

{{ '#7ab55c' | color_to_hsl }}

hsl(100, 38%, 54%)

Wenn die Eingabefarbe eine Alphakomponente hat, wird die Ausgabe im CSS-Format hsla() erfolgen.

{{ 'rgba(122, 181, 92, 0.5)' | color_to_hsl }}

hsla(100, 38%, 54%, 0.5)

color_to_hex

Konvertiert einen CSS-Farbstring in das hex6-Format.

{{ 'rgb(122, 181, 92)' | color_to_hex }}

#7ab55c

Die Hex-Ausgabe erfolgt immer im Hex6-Format. Wenn die Eingabefarbe einen Alphakanal enthält, wird dieser in der Ausgabe nicht angezeigt.

{{ 'rgba(122, 181, 92, 0.5)' | color_to_hex }}

#7ab55c

color_extract

Extrahiert eine Komponente aus der Farbe. Gültige Komponenten sind Alpha, Rot, Grün, Blau, Farbton, Sättigung und Helligkeit.

{{ '#7ab55c' | color_extract: 'rot' }}

122

color_brightness

Berechnet die wahrgenommene Helligkeit der angegebenen Farbe. Verwendet die W3C-Empfehlungen zur Berechnung der wahrgenommenen Helligkeit, um einen angemessenen Kontrast zu gewährleisten.

{{ '#7ab55c' | color_brightness }}

153.21

color_modify

Ändert die angegebene Komponente einer Farbe.

• Rot-, Grün- und Blauwerte sollten eine Zahl zwischen 0 und 255 sein
• Alpha sollte eine Dezimalzahl zwischen 0 und 1 sein
• Der Farbton sollte zwischen 0 und 360 Grad liegen
• Sättigung und Helligkeit sollten einen Wert zwischen 0 und 100 Prozent haben.

{{ '#7ab55c' | color_modify: 'rot', 255 }}

#ffb55c

Der Filter gibt einen Farbtyp zurück, der das geänderte Format enthält - wenn Sie z. B. den Alphakanal ändern, gibt der Filter die Farbe im Format rgba() zurück, auch wenn Ihre Eingabefarbe im Hex-Format war.

{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}

rgba(122, 181, 92, 0.85)

color_lighten

Hellt die Eingabefarbe auf. Nimmt einen Wert zwischen 0 und 100 Prozent an.

{{ '#7ab55c' | color_lighten: 30 }}

#d0e5c5

color_darken

Dunkelt die Eingabefarbe ab. Nimmt einen Wert zwischen 0 und 100 Prozent an.

{{ '#7ab55c' | color_darken: 30 }}

#355325

color_saturate

Sättigt die Eingabefarbe. Nimmt einen Wert zwischen 0 und 100 Prozent an.

{{ '#7ab55c' | color_saturate: 30 }}

#6ed938

color_desaturate

Entsättigt die Eingabefarbe. Nimmt einen Wert zwischen 0 und 100 Prozent an.

{{ '#7ab55c' | color_desaturate: 30 }}

#869180

color_mix

Mischt zwei Farben miteinander. Der Blendfaktor sollte ein Wert zwischen 0 und 100 Prozent sein.

{{ '#7ab55c' | color_mix: '#ffc0cb', 50 }}

#bdbb94

Wenn eine Eingabe eine Alphakomponente hat, die andere aber nicht, wird für die Eingabe ohne Alphakomponente eine Alphakomponente von 1 angenommen.

{{ 'rgba(122, 181, 92, 0.75)' | color_mix: '#ffc0cb', 50 }}

rgba(189, 187, 148, 0.875)

color_contrast

Berechnet das Kontrastverhältnis zwischen zwei Farben. Gibt den Zählerteil des Verhältnisses zurück, der den Nenner 1 hat. Bei einem Kontrastverhältnis von 3,5:1 ergibt der Filter beispielsweise 3,5.

Im Hinblick auf die Zugänglichkeit verlangt die WCAG 2. 0 Stufe AA ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Stufe AAA erfordert ein Kontrastverhältnis von mindestens 7:1 für normalen Text und 4,5:1 für großen Text.

Die Reihenfolge, in der Sie die Farben angeben, spielt keine Rolle. Der Filter erkennt automatisch die helleren und dunkleren Farben.

{{ '#495859' | color_contrast: '#fffffb' }}

7.4

color_difference

Berechnet den Farbunterschied oder den Abstand zwischen zwei Farben. Im Hinblick auf die Zugänglichkeit schlägt das W3C vor, dass der Farbunterschied größer als 500 sein sollte.

{{ '#ff0000' | color_difference: '#abcdef' }}

528

brightness_difference

Berechnet den wahrgenommenen Helligkeitsunterschied zwischen zwei Farben. Im Hinblick auf die Zugänglichkeit schlägt das W3C vor, dass der Helligkeitsunterschied größer als 125 sein sollte.

{{ '#fff00f' | brightness_difference: '#0b72ab' }}

129