Sie haben auch einen Blog? Empfehlen Sie ihn hier!

CSS Color

Erstellt am 2. Juli 2017 von Looplogic

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.

  1. Name
  2. HEX
  3. 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.