CSS Color

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

Farbtypen

In CSS kann man 3 verschiedene Farbtypen verwenden.

Name
HEX
RGB

Name

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

background-color: red

Color Name

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

Color HEX

#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)

Color RGB

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 Wertespanne geht von 0 bis eins, 0 entspricht zu 100% durchsichtig und 1 zu 100% sichtbar.

Color RGB

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)

Colorpicker

html5 Native picker

Farbwert mit JQuery auslesen:

jQuery( "#nativecolorpicker" ).val()

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.