Web-Farben
Info: wApplications WS 11/12
Inhalt:
Allgemeine Notierung
- RGB Farbraum
- HSL Farbraum
- CMYK Farbraum
Farbnamen
- Websichere Farben
Anwendungen
Variationen
Allgemeine Notierung
Hexadezimale Notierung
Die Farbe wird nach diesem Schema definiert:
#2245a4
RR GG BB
Rot-Anteil
Grün-Anteil
Blau-Anteil
Hexadezimale Ziffern
HEX DEZ
0=0 A=10 1=1 B=11 2=2 C=12 3=3 D=13 4=4 E=14 5=5 F=15 6=6 7=7 8=8 9=9
- 16 Zustände
- Jeder Farbwert hat 2 Ziffern
- 16 x 16 = 256
RGB Farbraum Notierungen
color: #F00 (r g b)
color: #FF0000 (rr gg bb)
color: rgb(255, 0, 0) (0 -255)
color: rgba(64, 0, 0, 0.7) (70% Transparenz - definiert in CSS3)
color: rgb(100%, 0%, 0%) (prozentuale Angaben)
HSL Farbraum Notierungen
color: hsl(120, 100%, 50%) grün
color: hsl(120, 100%, 25%) dunkelgrün
color: hsl(120, 100%, 75%) hellgrün
color: hsl(120, 50%, 50%) pastellgrün
color: hsl(120, 100%, 50%, 0.7) grün mit 70% Transparenz
CMYK Farbraum Notierungen
color: cmyk(0.0, 0.95, 1, 0.1) rot
Ab CSS 3 ist die CMYK-Kodierung möglich.
Farbnamen
Derzeit gibt es 16 standartisierte Farbnamen, die Brwoserunabhängig sind.
Es gibt sowohl Browserabhängige CSS3 Farbnamen (130), als auch SVG Farbnamen.
color: navy; dunkelblau
color: red; rot
color: silver; silber
color: grey (oder gray); grau
Farbnamen der 16 VGA-Farben (Websichere Farben)
black #000000
gray #808080
maroon #800000
red #FF0000
green #008000
lime #00FF00
olive #808000
yellow #FFFF00
navy #000080
blue #0000FF
purple #800080
fuchsia #FF00FF
teal #008080
aqua #00FFFF
silver #c0c0c0
white #FFFFFF
Anwendungen
Hintergrundfarbe:
<body bgcolor="#FF0000">
Schriftfarbe:
Linkfarbe:
noch nicht benutzte Links: LINK
benutzte (besuchte) Links: VLINK
aktivierte Links: ALINK
<body link="#FF0000" vllink="FF0000" alink="FF0000"
Variationen
In CSS sind Verläufe möglich:
Linearer Verlauf
background: -moz-linear-gradient(top, #f00, #fff);
background: -webkit-gradient(linear, left top, left bottom, from (#f00), to (#fff));
Radialer Verlauf
background: -moz-radial-gradient(center, #f00, #fff);
background: -webkit-radial-gradient(center, from (#f00), to (#fff));