HTML und Farben
HTML ist die Grundstruktur einer Webseite. Es legt fest, welche Inhalte vorhanden sind, zum Beispiel Überschriften, Texte oder Bilder. Farben werden in Webseiten hauptsächlich mit CSS festgelegt.
Farben haben eine klare Funktion. Sie helfen dabei, Inhalte visuell zu ordnen und wichtige Bereiche hervorzuheben. Wichtig ist dabei ein guter Kontrast. Text muss sich deutlich vom Hintergrund abheben, damit er gut lesbar ist.
Farben sollten einheitlich und sparsam verwendet werden. Zu viele verschiedene Farben wirken unübersichtlich. Eine kleine Auswahl sorgt für ein klares Gesamtbild.
Um mit Farben in HTML zu arbeiten, ist CSS das Werkzeug der Wahl. Farben in CSS können auf unterschiedliche Weise angegeben werden. Jede dieser Arten beschreibt Farben auf eine eigene Weise.
Farbnamen
Farbnamen sind die einfachste Form, Farben festzulegen. Dafür wurden im HTML-Standard 140 Farbnamen definiert. Diese sind in den Browsern hinterlegt und können direkt verwendet werden.
Diese Methode ist leicht verständlich und schnell einsetzbar, stößt aber auch schnell an ihre Grenzen.
| white | red | green | blue | black |
Hexadezimal Farbwerte
Mit Hexadezimal Farbwerten werden Farben über eine Kombination aus Zahlen und Buchstaben beschrieben. Sie beginnen mit einem „#“-Zeichen, gefolgt von sechs Stellen. Diese stehen für die Anteile von Rot, Grün und Blau. Jeder Farbanteil wird durch zwei Zeichen dargestellt (#rrggbb).
Hexadezimale Farbwerte ermöglichen eine genaue Festlegung einer Farbe. Dadurch sind sie in der Praxis weit verbreitet.
Die Schreibweise ist weniger leicht verständlich, da die Werte nicht direkt erkennbar sind.
| #ffffff | #ff0000 | #008000 | #0000ff | #000000 |
RGB-Farbwerte
Mit RGB-Werten werden Farben über drei Zahlen beschrieben. Diese stehen für die Anteile von Rot, Grün und Blau. Jeder Wert liegt in einem Bereich von 0 bis 255.
RGB-Werte ermöglichen eine genaue Festlegung einer Farbe. Änderungen an den einzelnen Werten wirken sich direkt auf das Farbergebnis aus.
Die Schreibweise ist verständlicher als bei Hexadezimalwerten, da die Zahlen direkt die Farbanteile zeigen.
| rgb(255, 255, 255) | rgb(255, 0, 0) | rgb(0, 125, 0) | rgb(0, 0, 255) | rgb(0, 0, 0) |
HSL-Farbwerte
Mit HSL-Werten werden Farben über drei Angaben beschrieben. Diese stehen für Farbton, Sättigung und Helligkeit.
Der Farbton wird als Winkel angegeben, die Sättigung und Helligkeit in Prozent. Dadurch lässt sich eine Farbe gezielt verändern.
HSL-Werte sind gut verständlich, da die Wirkung von Änderungen leicht nachvollziehbar ist.
| hsl(0, 0%, 100%) | hsl(0, 100%, 50%) | hsl(120, 100%, 25%) | hsl(240, 100%, 50%) | hsl(0, 0%, 0%) |