BESTE WEBSITE FÜR WEBENTWICKLER
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django WIE MAN W3.CSS AI Mehr 🔍 ◑ Bücher VERWEISE ÜBUNGEN
HTML-Farben. Lektionen für Anfänger

Ua En Es Fr

Farben HWB

❮ Prev Next ❯

Was sind HWB-Farben?

Die HWB-Farbe ist ein Farbmodell, das eine Farbe mit drei Werten beschreibt:

  • Hue / Farbton: Dies ist der Winkel auf dem Farbkreis, der die Primärfarbe definiert (z. B. Rot, Grün, Blau). Sie wird in Grad (0 bis 360) gemessen.
  • Whiteness / Weißgrad: Es ist der prozentuale Anteil an Weiß, der dem Hauptfarbton zugesetzt wird. Er wird in Prozent (von 0 bis 100) gemessen.
  • Blackness / Schwärze: Dies ist der Prozentsatz an Schwarz, der dem Hauptfarbton hinzugefügt wird. Er wird in Prozent (von 0 bis 100) gemessen.

Es hilft, die Farbe genau zu bestimmen, wenn man bedenkt, wie viel weiße oder schwarze Farbe darin enthalten ist.

Wie funktioniert das?

Stellen Sie sich vor, Sie haben eine reine Farbe (z. B. Rot) und möchten sie heller oder dunkler machen. Wenn Sie mehr Weiß hinzufügen, wird die Farbe heller (weniger gesättigt). Wenn Sie mehr Schwarz hinzufügen, wird die Farbe dunkler (gesättigter).

Wo werden HWB-Farben verwendet?

Die HWB-Farbe wird in verschiedenen Bereichen verwendet, in denen es notwendig ist, Farben genau und intuitiv zu beschreiben:

  • Grafikdesign: Um harmonische Farbpaletten zu erstellen, wählen Sie Farben für Websites, Logos, Illustrationen und mehr.
  • Webentwicklung: Um die Farben von Webseitenelementen mit CSS festzulegen.
  • Bildverarbeitung: Um Farben in Fotos zu bearbeiten, Farbeffekte zu erstellen und vieles mehr.

Das HWB-Modell ist eine Alternative zu populäreren Farbmodellen wie RGB oder HSL, da es sehr einfach ist, mit Farbsättigung zu arbeiten (wenn Sie die Farbe heller oder dunkler machen möchten).

Vorteile von HWB

  • Benutzerfreundlichkeit: HWB bietet eine bequeme Möglichkeit, Farben ohne komplizierte mathematische Berechnungen zu steuern. HWB macht es einfach, verschiedene Farbtöne zu erstellen, indem Sie einfach die Werte für Weiß und Schwarz ändern.
  • Unkomplizierter Ansatz: Die meisten Menschen verstehen intuitiv, was es bedeutet, der Hauptfarbe Weiß oder Schwarz hinzuzufügen. HWB ist unkompliziert und einfach zu bedienen, insbesondere für Personen, die keine tiefgreifenden Kenntnisse der Farbtheorie haben.
  • Designerfreundlich: HWB bietet Ihnen mehr Farbkontrolle als einige andere Modelle wie RGB. Wenn Sie die Farbe etwas heller oder dunkler machen möchten, ist das in HWB sehr einfach möglich.

Nachteile von HWB

  • Einschränkungen: HWB deckt nicht alle möglichen Farben ab, die in der Natur vorkommen.
  • HWB wird nicht von allen Apps unterstützt: Einige Grafik-Apps unterstützen HWB möglicherweise nicht.
  • Weniger beliebt: HWB ist nicht so verbreitet wie andere Farbmodelle wie RGB oder HSL, daher kann es manchmal schwieriger sein, Unterstützung oder Ressourcen für die Arbeit damit zu finden.
  • Vielleicht ungenau: Im Vergleich zu anderen Modellen bietet der HWB möglicherweise nicht die gleiche Genauigkeit bei der Wiedergabe von Farben.

Beispiele für die Verwendung von HWB-Farben

  • Erstellen einer Farbpalette für eine Website: Sie können einen primären Farbton (Farbton) auswählen und die Weiß- und Schwarzwerte ändern, um unterschiedliche Farbtöne für Schaltflächen, Hintergründe, Text und mehr zu erstellen.
  • Fotobearbeitung: Mit HWB können Sie die Helligkeit und den Kontrast des Bildes ändern, es wärmer oder kühler machen.
  • Logo-Design: Sie können HWB verwenden, um eine einzigartige Logofarbe zu erstellen, die sich von den anderen abhebt.

Beispiel

Verwenden von HWB-Farben beim Formatieren einer Webseite:

body {
  background-color: hwb(240, 5%, 50%); /* Blauer Hintergrund */
  color: hwb(60 5% 0%); /* Gelber Text */
}

HWB (Hue, Whiteness, Blackness) ist ein vorgeschlagener Standard für CSS4.

Wie bekommt man HWB-Farbe?

Um eine HWB-Farbe zu erhalten, können Sie den HWB-Rechner verwenden.

HWB-Rechner


 
rgb(255, 0, 0)
#ff0000
hsl(0, 100%, 50%)

H:
0
W:
0
B:
0

HTML-Unterstützung

HWB wird in HTML (noch) nicht unterstützt, wird aber als neuer Standard in CSS4 vorgeschlagen.

Während Sie auf CSS4 warten, können Sie die Farbbibliothek von W3Schools einbinden und HWB als HTML-Attribut wie folgt verwenden:

Beispiel

<div data-w3-color="hwb(60, 50%, 0)">

<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div>

<script src="/lib/w3color.js"></script>
Try It Yourself »

Schlussfolgerung. HWB ist also ein praktisches Modell für die Arbeit mit Farben, insbesondere wenn Sie die Helligkeit oder Dunkelheit einer Farbe schnell anpassen müssen.

W3Schools Farbbibliothek

Die im obigen Beispiel verwendete JavaScript-Bibliothek kann von

https://www.w3schools.com/lib/w3color.js

Sie können auch einen alternativen Download von unserer Website verwenden W3SchoolsDE. DasBeste unter dem Link: https://w3schoolsua.github.io/lib/w3color.js

❮ Prev Next ❯