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:'''
+'''Inhalt:'''<br>
-''Allgemeine Notierung''
+''Allgemeine Notierung''<br>
-- RGB Farbraum
+* RGB Farbraum
-- HSL Farbraum
+* HSL Farbraum
-- CMYK Farbraum
+* CMYK Farbraum
-''Farbnamen''
+''Farbnamen''<br>
-- Websichere Farben
+* Websichere Farben
+<br>
-''Anwendungen''
+''Anwendungen''<br>
 ''Variationen''
 == Allgemeine Notierung ==
-'''Hexadezimale Notierung'''
+'''Hexadezimale Notierung'''<br>
 Die Farbe wird nach diesem Schema definiert:
@@ Line 25: / Line 27: @@
 RR GG BB
-Rot-Anteil Grün-Anteil Blau-Anteil
+Rot-Anteil <br>
+Grün-Anteil <br>
+Blau-Anteil
 ----
@@ Line 43: / Line 47: @@
 =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 ==
+<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 ==
-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 ==
-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 ==
-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  <br>   gray    #808080<br>
-maroon  #800000     red     #FF0000
+maroon  #800000  <br>   red     #FF0000<br>
-green   #008000     lime    #00FF00
+green   #008000  <br>   lime    #00FF00<br>
-olive   #808000     yellow  #FFFF00
+olive   #808000   <br>  yellow  #FFFF00<br>
-navy    #000080     blue    #0000FF
+navy    #000080   <br>  blue    #0000FF<br>
-purple  #800080     fuchsia #FF00FF
+purple  #800080   <br>  fuchsia #FF00FF<br>
-teal    #008080     aqua    #00FFFF
+teal    #008080   <br>  aqua    #00FFFF<br>
-silver  #c0c0c0     white   #FFFFFF
+silver  #c0c0c0   <br>  white   #FFFFFF<br>
 == Anwendungen ==
-''Hintergrundfarbe:''
+''Hintergrundfarbe:''<br>
 '''
-<body bgcolor="#FF0000">'''
+<body bgcolor="#FF0000">'''<br><br>
-''Schriftfarbe:''
+''Schriftfarbe:''<br>
-'''
-<font color="#FF0000">Text</font>'''
+'''<font color="#FF0000">'''<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''
+<br>
-'''
+<br>
-<body link="#FF0000" vllink="FF0000" alink="FF0000"'''
+'''<body link="#FF0000" vllink="FF0000" alink="FF0000">'''
 == Variationen ==
-In CSS sind Verläufe möglich:
+In CSS sind Verläufe möglich:<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));'''
 <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]]