IFD:WApplications/Vortraege/webfarben: Difference between revisions

From Medien Wiki
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>