No edit summary |
No edit summary |
||
| Line 4: | Line 4: | ||
'''Inhalt:''' | '''Inhalt:'''<br> | ||
''Allgemeine Notierung'' | ''Allgemeine Notierung''<br> | ||
- RGB Farbraum<br> | - RGB Farbraum<br> | ||
- HSL Farbraum<br> | - HSL Farbraum<br> | ||
- CMYK Farbraum<br> | - CMYK Farbraum<br> | ||
''Farbnamen'' | ''Farbnamen''<br> | ||
- Websichere Farben | - Websichere Farben<br> | ||
<br> | |||
''Anwendungen'' | ''Anwendungen''<br> | ||
''Variationen'' | ''Variationen'' | ||
== Allgemeine Notierung == | == Allgemeine Notierung == | ||
'''Hexadezimale Notierung''' | '''Hexadezimale Notierung'''<br> | ||
Die Farbe wird nach diesem Schema definiert: | Die Farbe wird nach diesem Schema definiert: | ||
| Line 25: | Line 25: | ||
RR GG BB | RR GG BB | ||
Rot-Anteil Grün-Anteil Blau-Anteil | Rot-Anteil <br> | ||
Grün-Anteil <br> | |||
Blau-Anteil | |||
---- | ---- | ||
| Line 43: | Line 45: | ||
9=9 | 9=9 | ||
'''- 16 Zustände | '''- 16 Zustände<br> | ||
- Jeder Farbwert hat 2 Ziffern | - Jeder Farbwert hat 2 Ziffern<br> | ||
- 16 x 16 = 256''' | - 16 x 16 = 256'''<br> | ||
== RGB Farbraum Notierungen == | == RGB Farbraum Notierungen == | ||
<br> | |||
color: #F00 (r g b) | color: #F00 (r g b)<br> | ||
color: #FF0000 (rr gg bb) | color: #FF0000 (rr gg bb)<br> | ||
color: rgb(255, 0, 0) (0 -255) | color: rgb(255, 0, 0) (0 -255)<br> | ||
color: rgba(64, 0, 0, 0.7) (70% Transparenz - definiert in CSS3) | color: rgba(64, 0, 0, 0.7) (70% Transparenz - definiert in CSS3)<br> | ||
color: rgb(100%, 0%, 0%) (prozentuale Angaben) | color: rgb(100%, 0%, 0%) (prozentuale Angaben)<br> | ||
== HSL Farbraum Notierungen == | == HSL Farbraum Notierungen == | ||
color: hsl(120, 100%, 50%) grün | color: hsl(120, 100%, 50%) grün<br> | ||
color: hsl(120, 100%, 25%) dunkelgrün | color: hsl(120, 100%, 25%) dunkelgrün<br> | ||
color: hsl(120, 100%, 75%) hellgrün | color: hsl(120, 100%, 75%) hellgrün<br> | ||
color: hsl(120, 50%, 50%) pastellgrün | color: hsl(120, 50%, 50%) pastellgrün<br> | ||
color: hsl(120, 100%, 50%, 0.7) grün mit 70% Transparenz | color: hsl(120, 100%, 50%, 0.7) grün mit 70% Transparenz<br> | ||
== CMYK Farbraum Notierungen == | == CMYK Farbraum Notierungen == | ||
color: cmyk(0.0, 0.95, 1, 0.1) rot | color: cmyk(0.0, 0.95, 1, 0.1) rot<br> | ||
''Ab CSS 3 ist die CMYK-Kodierung möglich.'' | ''Ab CSS 3 ist die CMYK-Kodierung möglich.''<br> | ||
== Farbnamen == | == Farbnamen == | ||
Derzeit gibt es 16 standartisierte Farbnamen, die Brwoserunabhängig sind. | Derzeit gibt es 16 standartisierte Farbnamen, die Brwoserunabhängig sind.<br> | ||
Es gibt sowohl Browserabhängige CSS3 Farbnamen (130), als auch SVG Farbnamen. | Es gibt sowohl Browserabhängige CSS3 Farbnamen (130), als auch SVG Farbnamen.<br><br> | ||
color: navy; dunkelblau | color: navy; dunkelblau<br> | ||
color: red; rot | color: red; rot<br> | ||
color: silver; silber | color: silver; silber<br> | ||
color: grey (oder gray); grau | color: grey (oder gray); grau<br><br> | ||
'''Farbnamen der 16 VGA-Farben (Websichere Farben)''' | '''Farbnamen der 16 VGA-Farben (Websichere Farben)'''<br> | ||
black #000000 gray #808080 | black #000000 gray #808080<br> | ||
maroon #800000 red #FF0000 | maroon #800000 red #FF0000<br> | ||
green #008000 lime #00FF00 | green #008000 lime #00FF00<br> | ||
olive #808000 yellow #FFFF00 | olive #808000 yellow #FFFF00<br> | ||
navy #000080 blue #0000FF | navy #000080 blue #0000FF<br> | ||
purple #800080 fuchsia #FF00FF | purple #800080 fuchsia #FF00FF<br> | ||
teal #008080 aqua #00FFFF | teal #008080 aqua #00FFFF<br> | ||
silver #c0c0c0 white #FFFFFF | silver #c0c0c0 white #FFFFFF<br> | ||
== Anwendungen == | == Anwendungen == | ||
''Hintergrundfarbe:'' | ''Hintergrundfarbe:''<br> | ||
''' | ''' | ||
<body bgcolor="#FF0000">''' | <body bgcolor="#FF0000">'''<br><br> | ||
''Schriftfarbe:'' | ''Schriftfarbe:''<br> | ||
''' | ''' | ||
<font color="#FF0000">Text</font>''' | <font color="#FF0000">Text</font>'''<br><br> | ||
''Linkfarbe:'' | ''Linkfarbe:''<br> | ||
''noch nicht benutzte Links: LINK | ''noch nicht benutzte Links: LINK<br> | ||
benutzte (besuchte) Links: VLINK | benutzte (besuchte) Links: VLINK<br> | ||
aktivierte Links: ALINK'' | aktivierte Links: ALINK'' | ||
<br> | |||
''' | ''' | ||
<body link="#FF0000" vllink="FF0000" alink="FF0000"''' | <body link="#FF0000" vllink="FF0000" alink="FF0000"''' | ||
| Line 111: | Line 113: | ||
== Variationen == | == Variationen == | ||
In CSS sind Verläufe möglich: | In CSS sind Verläufe möglich:<br> | ||
''Linearer Verlauf''<br> | ''Linearer Verlauf''<br> | ||
Revision as of 15:48, 14 March 2012
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));