CSS Color

CSS Color Teaser
jetzt liken

In diesem Beitrag erläutere ich das Farbsystem in CSS, des weiteren zeige ich euch Colorpicker.

Farbtypen

In CSS kann man 4 verschiedene Farbtypen verwenden.

  1. Name
  2. HEX
  3. RGB
  4. HSL

Name

Es gibt 7 Farbnamen die verwendet werden können. Diese sind in allen Browsern fest definiert.

background-color: red
ColorName
 Red
 Green
 Blue
 Orange
 Yellow
 Cyan
 Black

HEX

HEX steht für Hexadezimal weil der Farbwert in diesem Zahlensystem aufgebaut ist. Die Strucktur ist #RRGGBB, RR steht für Rotanteil, GG für den Grünanteil und BB für den Blauanteil. Die Zahlenwerte gehen von 00 bis FF.

background-color: #ff0000
ColorHEX
 #ff0000
 #ffff00
 #ffffff
 #00ff00
 #00ffff
 #0000ff
 #ff00ff

RGB

RGB werden im Dezimalsystem geschrieben und gehen von 0 bis 255. Dabei steht R für Rot, G für Grün und B für Blau.

background-color: rgb(255,0,0)
ColorRGB
 rgb(255,0,0)
 rgb(255,255,0)
 rgb(255,255,255)
 rgb(0,255,0)
 rgb(0,255,255)
 rgb(0,0,255)
 rgb(255,0,255)

Bei RGB gibt es noch ein Zusatz, der Alphakanal. Mit diesem kann man der Farbe eine Transparenz geben. Die Wertspanne geht von 0 bis eins, 0 entspricht zu 100% durchsichtig und 1 zu 100% sichtbar.

background-color: rgba(255,0,0, 0.5)
ColorRGB
 rgba(255,0,0,0.5)
 rgba(255,255,0,0.5)
 rgba(255,255,255,0.5)
 rgba(0,255,0,0.5)
 rgba(0,255,255,0.5)
 rgba(0,0,255,0.5)
 rgba(255,0,255,0.5)

HSL

Die drei Buchstaben stehen für Hue, Saturation, Luminance (Farbton, Sättigung, Helligkeit).

background-color: hsl(360, 100%, 50%)
ColorHSL
 hsl(360, 100%, 50%)
 hsl(260, 100%, 50%)
 hsl(160, 100%, 50%)
 hsl(0, 100%, 50%)
 hsl(360, 50%, 50%)
 hsl(360, 0%, 50%)
 hsl(360, 100%, 100%)
 hsl(360, 100%, 0%)

Genauso wie bei RGB gibt es den Alphakanal mit dem man die Farbransparenz einstellen kann.

background-color: hsla(360, 100%, 50%, 0.5)
ColorHSL
 hsla(360, 100%, 50%, 0.5)
 hsla(260, 100%, 50%, 0.5)
 hsla(160, 100%, 50%, 0.5)
 hsla(0, 100%, 50%, 0.5)
 hsla(360, 50%, 50%, 0.5)
 hsla(360, 0%, 50%, 0.5)
 hsla(360, 100%, 100%, 0.5)
 hsla(360, 100%, 0%, 0.5)

Colorpicker

html5 Native picker

<input type="color" id="nativecolorpicker" value="#fe6000">

Farbwert mit JavaScript auslesen:

document.getElementById("nativecolorpicker").value

Farbwert auswählen:
Farbwert:

Juqery Colorpicker

Ein mit Jquery erstellter Colorpicker.
Download auf Github

Chrome picker

Im Chrome gibt es ein eingebauten Colorpicker, den kannst du in der Developer Konsole finden. Einfach auf das grüne Rechteck Rechtsklick und Untersuchen, danach findet ihr ein grünes Rechteck unter Styles. Auf das Rechteck klicken und der Colorpicker öffnet sich.

Chrome Color Picker

jetzt liken