⬆
Youtube Video

Farben & Effekte

Farbwähler
#000000

Grundlegendes zum Thema Farben und Farbmodelle

Grundlegendes zum Thema Dezimal und Hexadezimal

Das Thema Farben und Transparenz bei Mediaevent

Farbfehlsichtigkeit

siehe auch meinen Tipp Barrierefreiheit

Eine Website sollte für alle wahrnehmbar und bediebar sein. Der Wert 3.5 als Kontrast sollte beachtet werden. Mit dem Adobe Contrast Analyzer kann man das überprüfen.

siehe auch contrastchecker

Webdeveloper / grayscale / schwarz weiß Ansicht

Man kann mit dem Webdeveloper Tools die Farben deaktivieren und hat so einen guten Eindruck, ob es ein gutes Kontrastverhältnis gibt.

  1. Öffne die Developer Tools Chrome mit Strg Umschalt J
  2. Wähle unter Elemente das body - Element aus.
  3. Klicke unter Stile in die geschweifte Klammer, eine Zeile entsteht
  4. gebe in der Zeile folgendes ein filter: grayscale(1);

Farbschema / Styleguide

Ein Styleguide bestimmt welche Schriften, welche Farben etc. eingesetzt werden, Stichwort Corporate Identity. In Punkto Farbzusammenstellung gibt es ein paar nützliche Tools:

Hexadezimale Farbangabe

HTML Farbcodes

Es gibt die Möglichkeit Farben über eine hexadezimale Angabe des RGB Farbwertes zu definieren. Es wird ein Gatterzeichen vorangestellt gefolgt von einer zweistelligen Angabe für Rot, dann Grün und Blau. #FF04A4 beispielsweise.

dez 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
hex 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A

Im hexadezimale Zahlensystem gibt es mehr Zeichen als im dezimalen System. Inklusive 0 sind es 16 Hex- Zeichen. Nach 1F folgt 20. Der höchste 2 stellige Wert in Hexadezimal FF ist in Dezimal 255, welches dem höchsten Wert einer der drei RGB Farben entspricht. Am Taschenrechner kann man das ausprobieren. Die 6 stellige hexadezimale Farbangabe funktioniert folgendermaßen, die ersten beiden Stellen, definieren den Rot Wert, die mittleren beiden Stellen den Grün Wert und die letzten beiden Stellen den Blau Wert. Bei einstelligen Werten wird eine 0 vorangestellt.

Sonderregelung: wenn in allen drei Farbanteilen die beiden Stellen gleich sind, ist auch eine jeweils einstellige Angabe möglich. Also bedeutet #FFAA33 das gleiche wie #FA3

Farbnamen

Es gibt 140 Farbnamen in CSS. Red, Beige, Azure, Blue,...

Dezimale RGB Farbangabe

rgb(100,204,153)

Prozentuale RGB Farbangabe

rgb(40%,50%,75%)

RGBA Farbangabe mit Alpha

Hier wird nach den 3 RGB Werten ein vierter Wert für Transparenz vergeben. Es ist ein Wert von 0 bis 1 wobei 0 für absolut durchsichtig steht.

rgba(220,160,140,0.5);

HSL Farbton, Sättigung, Helligkeit

H = Hue, S= Saturation = Sättigung, L = Lightness = Helligkeit. Hier werden 3 Werte erwartet ein Farbtonwert von 0-360 sowie ein Sättigungswert in Prozent und ein Lightness Wert in Prozent. Man beachte, dass diese Farbangabe etwas anders als die HSB Angabe in Photoshop funktioniert, denn ein Lightness Wert von 100 Prozent erzeugt immer ein Weiß und 50% ist der Normalwert. Mit diesem Tool kann man eine HSL Farbe erzeugen. 

color: hsl(321,42%,35%);

 

HSLA mit Alpha

Wie auch bei RGB kann man zusätzlich zu HSL einen vierten Wert Alpha von 0 bis 1 für die Tranparenz angeben.

background-color: hsla( 220, 50%, 50%, 0.5);

OKLCH

Ein neues Farbformat.

Siehe OKLCH evilmartians.com

Schaut man sich die Entwicklung der letzten Jahrzehnte an, war die größte technische Leistung in punkto Farben die Qualität unserer Bildschirme. Moderne Displays unterstützen weitaus lebendigere Farben mit hellerem Weiß und dunklerem Schwarz. Wann immer Sie auf einen Fernseher, Monitor oder Bildschirm stoßen, der HDR (oder Dolby Vision) oder Display P3 unterstützt, bedeutet das im Klartext, dass es sich um ein fortschrittliches Display handelt, das mehr Farben als je zuvor darstellen kann. Das Problem bestand darin, dass RGB und die 16.777.216 Farben, die man damit definieren konnte, nicht zur Darstellung dieser lebendigeren Farben verwendet werden konnten.

Vergleiche die Farbbalken in diesem Artikel von Björn Ottoson, um zu verstehen, dass die RGB oder HSL Farbtöne auch gleichzeitig eine Änderung der Helligkeit bewirken können. Im Gegensatz zu HSL wird die Helligkeit bei OKLCH besser interpretiert.

Der folgende Artikel aus der Apple's developer documentation hebt die Einschränkung von RGB hervor:

Ein Beispiel

.logo{background-color: oklch(65% 0.202 245.65) }

Siehe OKLCH Color Picker Tool

Damit auch ältere Browser (can i use) die Farbzuweisung verstehen, sollte man vorerst auch eine alternative Farbdefinition angeben.

.logo{
    background-color: #0095ed;
    background-color: oklch(65% 0.202 245.65);
    }

Ein vierter Alpha Wert für die Transparenz kann in Prozent nach einem Slash / angegeben werden:

.logo{

    background-color: oklch(65% 0.202 245.65 / 50%);
    }

Opacity Deckkraft

Selfhtml Opacity

Mit dem Wert opacity lässt sich die Deckkraft eines Elements bestimmen. Erlaubt sind Werte zwischen 0 und 1 oder das Schlüsselwort inherit. Hier sieht man das gleiche Bild das erste hat einen opacity Wert von 0.5 bekommen.

.img1 {opacity: 0.6;}

html5 Logohtml5 Logo

Fade Gallery Animation mit Opacity

Farbverläufe

siehe background: linear-gradient()

Box-Shadow

Mit CSS 3 kann man Schatteneffekte erzeugen.

Shadow Generator

Die Werte sind der Reihenfolge nach:

Art (kann weggelassen werden), x-Versatz, y-Versatz, Weichheit, Ausbreitung, Farbe

box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.85);

Mit dem Schlüsselwort none kann man den Schatten deaktivieren

box-shadow: none;

Mit dem Schlüsselwort inset kann man den Schatten innen definieren. Wenn der Wert nicht angegeben wird, wird ein Außenschatten erzeugt.

box-shadow:inset 2px 2px 3px 2px rgba(0, 0, 0, 0.85);

Beispiele

Auch mehrere box-shadow Effekt auf einmal sind möglich.

so sieht`s aus

Linien mit <hr> Horizontale Trennlinien

Mit dem HTML- Tag <hr> erzeugt man horizontale Linien, die man mit CSS gestalten kann.

Breite, Höhe, Hintergrundfarbe, Rand und Ausrichgung kann man festlegen.

hr {
border: none;
background: linear-gradient(90deg, #fec, #5F0001, #fec);
height: 2px;
width: 90%;
margin-left: 0;
}

so sieht's aus

Filter

siehe auch Developer Mozilla Filter

Filtereigenschaften in CSS stammen ursprünglich aus SVG. filter: contrast(100%);
Der Shadow Filter reagiert auf transparente Bereiche eines png Bildes. Das ist mit box-shadow nicht möglich.
Mehrere Filtereigenschaften werden mit Leerzeichen separiert aufgeführt filter: blur(3px) grayscale(0.5)
Ich habe hier ein paar Beispiele mit einigen Filtern zusammengestellt.

so sieht's aus

checkout

filter
Eigenschaft Einheit Funktion Bedeutung
filter px blur(2px) Weichzeichnung Wert in Pixeln
%, oder
0 - 1

brightness(60%)

brightness(0.6)

 Helligkeit in Prozent unter 100% werden die Farben dunkler. Über 100% wird es heller.
%, oder von 0 - 1 contrast(40%)
contrast(0.4)		 Bei einem Contrast-Wert unter 0.5 bis 0 bewegen sich alle Pixel auf den Wert 0.5. Bei einem Contrast-Wert über 0.5 werden Pixel, die über 0.5 liegen in Richtung 1 verschoben und die Pixel die unter 0.5 liegen, bewegen sich auf 0 zu. Das geschieht in jedem RGB-Kanal.
%, oder
0 - 1		 grayscale(30%)
grayscale(0.3)		 Graustufen 100% erzeugt ein Bild in Graustufen
deg hue-rotate(120deg) Werte von 0deg bis 360deg die Farbtöne werden gemäß dem HSL Modell auf dem Farbkreis verschoben. Bei 30deg wird aus einem Farbton der 60 entspricht der Farbton 90.
%, oder
0 - 1		 invert(70%)
invert(0.7)		 Werte in Prozent oder eine Zahl von 0 bis 1. Der Wert 50% oder 0.5 erzeugt einen einheitlich grauen Hintergrund. Werte darüber kehren die Farben um.
%, oder
0 - 1		 opacity(20%)
opacity(0.2)		 Transparenz in Prozent.
%, oder
0 - 1		 sepia(90%)
sepia(.9)		 Der Hintergrund wird in warmen Brauntönen angzeigt.
%, oder
0 - 1		 saturate(80%)
saturate(.8)		 saturate() unter 100% werden die Farben weniger kräftig bis hin zu Graustufen bei 0%. Über 100% werden die Farben satter. 100% Originalfarben.
  drop-shadow(3px 4px 2px #0000) Schatten, der Transparenzen eines Bildes berücksichtigt. Die Wert sind (x-Versatz, y-Versatz, Weichheit, Farbe)
Standardwert  
Vererbbar nein
Anwendbar Alle Blockelemente

Siehe dieses interessanten Beispiele, Halftone 1 / Halftone2 / Halftone 3 / Halftone 4 / Halftone 5 / Halftone 6
Quelle und Erklärungen bei Frontend Masters.

Box Refelect

siehe auch w3schools

Mit der Eigenschaft blox-reflect lässt sich eine Spiegelung erzeugen, die man besonders gut bei Bildern einsetzen kann. Die Eigenschaft ist 2024 noch ganz neu und muss mit einem prefix eingesetzt werden.
-webkit-box-reflect
Firefox unterstützt es noch gar nicht.

Man muss 3 Werte vergeben in folgender Reihenfolge.

  1. Richtung / Position
  2. Abstand
  3. Verlauf für die Transparenz
img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

siehe Beispiel

box-reflect
Eigenschaft Einheit Funktion Bedeutung
box-reflect
none keine Reflexion Richtung  Position
below

unten
above oben
left links
right rechts
px, rem   Abstand
linear-gradient Farben mit Transparenzwerten bestimmen die Durchsichtigkeit der Spiegelung siehe hier Transparenz
Standardwert none
Vererbbar nein
Anwendbar jedes sichtbare HTML Element