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: Text
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));