mNo edit summary |
m (→Web-Farben) |
||
| Line 8: | Line 8: | ||
'''Inhalt:'''<br> | '''Inhalt:'''<br> | ||
''Allgemeine Notierung''<br> | ''Allgemeine Notierung''<br> | ||
* RGB Farbraum | |||
* HSL Farbraum | |||
* CMYK Farbraum | |||
''Farbnamen''<br> | ''Farbnamen''<br> | ||
* Websichere Farben | |||
<br> | <br> | ||
''Anwendungen''<br> | ''Anwendungen''<br> | ||
Latest revision as of 10:46, 3 April 2012
Web-Farben
Info:
wApplications WS 11/12 Vortrag von Tobias Zeller
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));