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>

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