IFD:WApplications/Vortraege/webfarben: Difference between revisions

From Medien Wiki
No edit summary
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==[[Web-Farben]]==
==[[Web-Farben]]==
Info:
Info:
wApplications WS 11/12
wApplications WS 11/12
Vortrag von Tobias Zeller




'''Inhalt:'''<br>
'''Inhalt:'''<br>
''Allgemeine Notierung''<br>
''Allgemeine Notierung''<br>
- RGB Farbraum<br>
* RGB Farbraum
- HSL Farbraum<br>
* HSL Farbraum
- CMYK Farbraum<br>
* CMYK Farbraum


''Farbnamen''<br>
''Farbnamen''<br>
- Websichere Farben<br>
* Websichere Farben
<br>
<br>
''Anwendungen''<br>
''Anwendungen''<br>
Line 84: Line 86:
'''Farbnamen der 16 VGA-Farben (Websichere Farben)'''<br>
'''Farbnamen der 16 VGA-Farben (Websichere Farben)'''<br>


black  #000000     gray    #808080<br>
black  #000000 <br>  gray    #808080<br>
maroon  #800000     red    #FF0000<br>
maroon  #800000 <br>  red    #FF0000<br>
green  #008000     lime    #00FF00<br>
green  #008000 <br>  lime    #00FF00<br>
olive  #808000     yellow  #FFFF00<br>
olive  #808000   <br>  yellow  #FFFF00<br>
navy    #000080     blue    #0000FF<br>
navy    #000080   <br>  blue    #0000FF<br>
purple  #800080     fuchsia #FF00FF<br>
purple  #800080   <br>  fuchsia #FF00FF<br>
teal    #008080     aqua    #00FFFF<br>
teal    #008080   <br>  aqua    #00FFFF<br>
silver  #c0c0c0     white  #FFFFFF<br>
silver  #c0c0c0   <br>  white  #FFFFFF<br>


== Anwendungen ==
== Anwendungen ==
Line 100: Line 102:


''Schriftfarbe:''<br>
''Schriftfarbe:''<br>
'''
 
<font color="#FF0000">Text</font>'''<br><br>
'''<font color="#FF0000">'''<br><br>


''Linkfarbe:''<br>
''Linkfarbe:''<br>
Line 108: Line 110:
aktivierte Links: ALINK''
aktivierte Links: ALINK''
<br>
<br>
'''
<br>
<body link="#FF0000" vllink="FF0000" alink="FF0000"'''
'''<body link="#FF0000" vllink="FF0000" alink="FF0000">'''


== Variationen ==
== Variationen ==
Line 116: Line 118:


''Linearer Verlauf''<br>
''Linearer Verlauf''<br>
'''background: -moz-linear-gradient(top, #f00, #fff);'''
'''background: -moz-linear-gradient(top, #f00, #fff);'''<br>
'''background: -webkit-gradient(linear, left top, left bottom, from (#f00), to (#fff));'''
'''background: -webkit-gradient(linear, left top, left bottom, from (#f00), to (#fff));'''
<br><br>
<br><br>
''Radialer Verlauf''<br>
''Radialer Verlauf''<br>
'''background: -moz-radial-gradient(center, #f00, #fff);'''
'''background: -moz-radial-gradient(center, #f00, #fff);'''<br>
'''background: -webkit-radial-gradient(center, from (#f00), to (#fff));'''
'''background: -webkit-radial-gradient(center, from (#f00), to (#fff));'''<br>
 
 
== Siehe auch ==
* [[Farbe]]

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


Siehe auch