imported>WikiMax312: Bild und Bildunterschrift hinzugefügt

2025-11-12T02:40:01Z

Bild und Bildunterschrift hinzugefügt

Neue Seite

[[Datei:Aditiivne syntees hex koodid.png|mini|Webfarben]]
'''Webfarben''' sind [[Farbreiz|Farben]], die für die Gestaltung von [[Webseite]]n eingesetzt werden. Die Spezifikationen der Webbrowser bieten die Möglichkeit, die darstellbaren Farbvorgaben [[Hexadezimale Farbdefinition|hexadezimal]] oder [[dezimal]] zu bezeichnen oder die browsereigenen Farbbezeichnungen zu nutzen.

== Farbnotierungen in Stylesheets (CSS) ==
[[Webentwickler]] können eine Farbe innerhalb eines [[Cascading Style Sheets|Stylesheets]] notieren.

=== RGB-Farbraum ===
Der zugrunde liegende Standard ist [[sRGB]] (siehe auch [[RGB-Farbraum#Der sRGB-Farbraum|sRGB-Farbraum]]), der als Primärvalenzen die im ITU-R BT.709-5-Standard festgelegten Farbkoordinaten verwendet.

Farben des [[RGB-Farbraum]]s sind in CSS-Syntax wie folgt definiert:
<syntaxhighlight lang="css">
p { color: #F00; } /* #rgb */
p { color: #FF0000; } /* #rrggbb */
p { color: rgb(255, 0, 0); } /* integer 0 - 255 */
p { color: rgba(64, 0, 0, 0.7); } /* 0.7 = 70 % Deckkraft - spezifiziert in CSS 3 */
p { color: rgb(100%, 0%, 0%); } /* prozentuale Angaben 0,0 % - 100,0 % */
</syntaxhighlight>

=== HSL-Farbraum ===
Farben nach dem Model des [[HSL-Farbraum]]es können ab [[Cascading Style Sheets|CSS 3]] wie folgt notiert werden:<ref>[http://www.css3.info/preview/hsla/ HSLA Colors] auf css3.info</ref>
<syntaxhighlight lang="css">
p { color: hsl(120, 100%, 50%); } /* Grün */
p { color: hsl(120, 100%, 25%); } /* Dunkelgrün */
p { color: hsl(120, 100%, 75%); } /* Hellgrün */
p { color: hsl(120, 50%, 50%); } /* Pastellgrün */
p { color: hsla(120, 100%, 50%, 0.7); } /* Grün mit 70 % Deckkraft */
</syntaxhighlight>

=== CMYK-Farbraum ===
Ab CSS 3 können Farben außerdem nach dem [[CMYK-Farbmodell]] angegeben werden:<ref>[http://www.w3.org/TR/css3-gcpm/#cmyk-colors CMYK colors] auf w3.org</ref>
<syntaxhighlight lang="css">
p { color: device-cmyk(0.0, 0.95, 1, 0.1); } /* Rot */
</syntaxhighlight>

=== Farbnamen ===
Vielen Farbwerten ist ein Name zugeordnet. Eine solche Angabe wird beispielsweise wie folgend notiert.
<syntaxhighlight lang="css">
p { color: navy; /* Marineblau */ }
p { color: red; /* Rot */ }
</syntaxhighlight>
Die Zuordnung der Farbwerte ist [[#Benannte Farben|nachfolgend]] beschrieben.

=== Notierung mit Rückwärtskompatibilität ===
Da nur neuere Browser die rgba-, hsl(a)- und cmyk-Notierung interpretieren können, sollten Webentwickler eine „Fallback-Farbe“ definieren.
<syntaxhighlight lang="css">
p {
color: red; /* Rückwärtskompatibilität */
color: cmyk(0.0, 0.95, 1, 0.1); /* Wird von modernen Browsern interpretiert */
}
</syntaxhighlight>

== Benannte Farben ==
Es gibt mehrere Standards, die den Hexadezimal-Codes einen Farbnamen zuordnen. So lassen sich definierte englische Farbnamen anstelle der Anteilswerte im [[RGB-Farbraum]] angeben. Die Nutzung solcher Namen erleichtert es dem Designer die [[Farbton|Farbtöne]] nach eigener [[Farbwahrnehmung|Wahrnehmung]] zu wählen, statt die unhandliche (formale) [[Hexadezimale Farbdefinition|hexadezimale Notierung]]. Abhängig vom jeweiligen Standard ist die Anzahl an Farbnamen begrenzt, da diese naturgemäß bereits vorgegeben sein müssen.

=== HTML 4/VGA ===
{| class="mw-collapsible mw-collapsed" style="border:1px solid #999999; font-family:Courier, monospace; width:100%; line-height:150%;"
! colspan="4" style="font-family:sans-serif; background:#DDDDDD;"|[[Hypertext Markup Language|HTML]] 4: die 16 Farben des VGA-16-Farben-Standards
|-
|width="200" style="background-color:#000000;color:#FFFFFF;"|'''black'''
|width="90" style="background-color:#000000;color:#FFFFFF;"|'''#000000'''
|width="200" style="background-color:#C0C0C0;color:#000000;"|'''silver'''
|width="90" style="background-color:#C0C0C0;color:#000000;"|'''#C0C0C0'''
|-
|style="background-color:#800000;color:#FFFFFF;"|'''maroon'''
|style="background-color:#800000;color:#FFFFFF;"|'''#800000'''
|style="background-color:#FF0000;color:#000000;"|'''red'''
|style="background-color:#FF0000;color:#000000;"|'''#FF0000'''
|-
|style="background-color:#008000;color:#FFFFFF;"|'''green'''
|style="background-color:#008000;color:#FFFFFF;"|'''#008000'''
|style="background-color:#00FF00;color:#000000;"|'''lime'''
|style="background-color:#00FF00;color:#000000;"|'''#00FF00'''
|-
|style="background-color:#808000;color:#FFFFFF;"|'''olive'''
|style="background-color:#808000;color:#FFFFFF;"|'''#808000'''
|style="background-color:#FFFF00;color:#000000;"|'''yellow'''
|style="background-color:#FFFF00;color:#000000;"|'''#FFFF00'''
|-
|style="background-color:#000080;color:#FFFFFF;"|'''navy'''
|style="background-color:#000080;color:#FFFFFF;"|'''#000080'''
|style="background-color:#0000FF;color:#000000;"|'''blue'''
|style="background-color:#0000FF;color:#000000;"|'''#0000FF'''
|-
|style="background-color:#800080;color:#FFFFFF;"|'''purple'''
|style="background-color:#800080;color:#FFFFFF;"|'''#800080'''
|style="background-color:#FF00FF;color:#000000;"|'''fuchsia'''
|style="background-color:#FF00FF;color:#000000;"|'''#FF00FF'''
|-
|style="background-color:#008080;color:#FFFFFF;"|'''teal'''
|style="background-color:#008080;color:#FFFFFF;"|'''#008080'''
|style="background-color:#00FFFF;color:#000000;"|'''aqua'''
|style="background-color:#00FFFF;color:#000000;"|'''#00FFFF'''
|-
|style="background-color:#808080;color:#FFFFFF;"|'''gray'''
|style="background-color:#808080;color:#FFFFFF;"|'''#808080'''
|style="background-color:#FFFFFF;color:#000000;"|'''white'''
|style="background-color:#FFFFFF;color:#000000;"|'''#FFFFFF'''
|}

Die dunklen Farben ergeben sich durch eine (nahezu) Halbierung des Rot-, Grün- und Blauwerts von 0xFF auf 0x80 (Ausnahme: schwarz und silber).

=== CSS 3 ===
Die [[Cascading Style Sheets|CSS-3]]-Spezifikation des [[World Wide Web Consortium]] (W3C) definiert aus der Liste des [[X Window System|X11]], die für [[Scalable Vector Graphics|SVG 1.0]] standardisiert wurde, folgende 140 Farben:
{{W3C-Farben}}
Hierbei kann statt der Silbe ''gray'' auch ''grey'' geschrieben werden. Ferner repräsentieren ''aqua'' und ''cyan'' sowie ''fuchsia'' und ''magenta'' jeweils dieselbe Farbe. Die Liste setzt sich im Wesentlichen aus den 120 Farben des Netscape-Browsers und den 16 VGA-Farben zusammen. Die Farben ''bisque'' (#FFE4C4) und ''blanchedalmond'' (#FFEBCD) stammen nicht von dort.

2014 wurde die Farbe ''rebeccapurple'' (#663399) in Erinnerung an Eric Meyers Tochter Rebecca, die an ihrem sechsten Geburtstag an einem Hirntumor starb, neu aufgenommen.<ref>{{Internetquelle |url=https://lists.w3.org/Archives/Public/www-style/2014Jun/0312.html |titel=Re: [CfC] adding 'rebeccapurple' color to CSS Color Level 4 |datum=2014-06-21 |abruf=2021-04-24 |sprache=en}}</ref><ref>{{Internetquelle |autor=Eric Meyer |url=https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/ |titel=rebeccapurple |datum=2014-06-19 |abruf=2021-04-24 |sprache=en}}</ref>

=== Herstellerabhängige Farbnamen ===
Zusätzlich haben die Hersteller von [[Webbrowser|Browsern]] eine Vielzahl von Farbnamen definiert. Bei diesen ist aber nicht sichergestellt, dass alle Browser diese Farbnamen auch interpretieren können.

== Websichere Farben ==
Mit Beginn der Webgestaltungen wurde eine Bezeichnungsgruppe von Farben als „websichere Farbpalette“ bezeichnet. Diese wurde Mitte der 1990er Jahre entwickelt, als Grafikkarten häufig bei voller Auflösung nur 16 oder 256 Farben anzeigen konnten<ref>Die ersten Consumer-Grafikkarten mit High-Color (32×32×32 Farben) und True-Color (256×256×256 Farben) als nettes Feature tauchten 1992 auf. Allerdings mit reduzierter Auflösung. Anfang 1996, als das WWW etwas bekannter wurde, waren an sich alle Windows-PC-Grafikkarten in der Lage bei akzeptabler Auflösung und Wiederholrate mindestens 32768 Farben darzustellen. Allerdings unterstützten viele UNIX-Workstations weiterhin nur 256 Farben und man konnte die Farbtiefe unter Windows aus Performance-Gründen reduzieren.</ref>. Die Palette wurde zuerst durch Lynda Weinman vorgeschlagen. Das Ziel dieser Farbpalette war es, eine einheitliche Farbdarstellung auf unterschiedlichen Bildschirmen zu erreichen. Die sechs verschiedenen Farbtönungen jeder Grundfarbe des Bildschirms: Rot, Grün und Blau ergab 6 × 6 × 6 = 6<sup>3</sup> = 216 darstellbare Farben.

Der Spielraum für eine gute Farbgestaltung von Webseiten ist zwangsläufig eingeschränkt. Durch unzureichend kalibrierte Bildschirme und die subjektive Wahrnehmung des Betrachters konnte dieses Ziel von Gleichheit nicht erreicht werden. Spätestens seit dem Jahr 2000 können fast alle Grafikkarten eine ausreichend große Anzahl darstellen. Bei einer Notierung von 256 unterschiedenen Anteilen je der drei bildschirmbedingten Grundfarben ergeben sich 256<sup>3</sup> also über 16,7 Millionen Farbdarstellungen. Dadurch hat die Palette der „websicheren Farben“ heute keine Bedeutung mehr.

{{Websichere Farben}}

== Weblinks ==
{{Wiktionary}}
* [http://www.w3.org/TR/css3-color/ CSS-3-Farbnamen-Definitionen des W3C] auf [[w3.org]]
* [https://paletton.com Paletton - The Color Scheme Designer] – zusammenpassende Farb-Schemata, nützlich zur Auswahl passender Schattierungen
* [https://web.archive.org/web/20050829041538/http://www.metacolor.de/ www.metacolor.de] – umfangreiches Tutorial über Farben im Webdesign
* [https://colorizer.org/ Colorizer.org] – umfangreicher Farbauswähler mit Umrechnungen ([[RGB-Farbraum|RGB]], HEX, [[HSV-Farbraum|HSL]], [[HSV-Farbraum|HSV]]/[[HSB-Farbraum|HSB]], [[CMYK]])
* [https://web.archive.org/web/20230930201205/https://html-colors.org/de/web-farbtabelle/ html-colors.org] – benannte Farben mit Dezimal- und Hexadezimalwerten in Tabellen, farblich gruppiert und sortiert nach Abstufungen

== Einzelnachweise ==
<references />

{{Hinweis Farbdarstellung}}

[[Kategorie:HTML]]
[[Kategorie:Farbsystem]]
[[Kategorie:Bildtafel]]
[[Kategorie:Cascading Style Sheets]]
[[Kategorie:Webfarbe| ]]

Webfarbe - Versionsgeschichte

imported>WikiMax312: Bild und Bildunterschrift hinzugefügt