IFD:WApplications/Vortraege/webfarben: Difference between revisions

Revision as of 15:44, 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));