IFD:WApplications/Vortraege/webfarben: Difference between revisions

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

Farbe

@@ Line 1: / Line 1: @@
 ==[[Web-Farben]]==
 Info:
 wApplications WS 11/12
+Vortrag von Tobias Zeller
 '''Inhalt:'''<br>
 ''Allgemeine Notierung''<br>
-- RGB Farbraum<br>
+* RGB Farbraum
-- HSL Farbraum<br>
+* HSL Farbraum
-- CMYK Farbraum<br>
+* CMYK Farbraum
 ''Farbnamen''<br>
-- Websichere Farben<br>
+* Websichere Farben
 <br>
 ''Anwendungen''<br>
@@ Line 84: / Line 86: @@
 '''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 ==
@@ Line 100: / Line 102: @@
 ''Schriftfarbe:''<br>
-'''
-<font color="#FF0000">Text</font>'''<br><br>
+'''<font color="#FF0000">'''<br><br>
 ''Linkfarbe:''<br>
@@ Line 108: / Line 110: @@
 aktivierte Links: ALINK''
 <br>
-'''
+<br>
-<body link="#FF0000" vllink="FF0000" alink="FF0000"'''
+'''<body link="#FF0000" vllink="FF0000" alink="FF0000">'''
 == Variationen ==
@@ Line 116: / Line 118: @@
 ''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));'''
 <br><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]]