IFD:WApplications/Vortraege/webfarben

From Medien Wiki

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