CSS-Grundlagen: Arbeiten mit Farben

Bei der Gestaltung einer Website sind viele Faktoren zu berücksichtigen. Schriftart, UX-Flow und vieles mehr. Ein sehr wichtiges Gestaltungselement ist die Farbe. Selbst einfache Entscheidungen wie Markenfarbe, Rahmenfarbe und Hintergrundfarbe haben eine deutliche und spürbare Wirkung.

In diesem Artikel behandeln wir die Grundlagen von CSS-Farben und lernen, wie Sie eine HTML-Site in eine tadellos aussehende Website verwandeln.

Erste Schritte mit CSS-Farben

Es gibt eine bestimmte Art, Farben in CSS zu beschreiben, die ein Computer verstehen kann. Dies geschieht normalerweise, indem die Farbe in verschiedene Komponenten zerlegt und ein gemischter Satz von Primärfarben berechnet wird, um die gewünschte Farbe zu bilden. Es gibt verschiedene Möglichkeiten, eine Farbe in CSS zu beschreiben.

Farbnamen als Schlüsselwörter verwenden

Es gibt ungefähr 140 CSS-Farbnamen, die von den meisten modernen Browsern unterstützt werden. Es könnte so einfach wie Rot oder Cyan für das Farbschlüsselwort sein. Obwohl es bei einer moderaten Farbpalette hilft, sind Sie auf ein paar festgelegte Farben beschränkt, ohne dass Schattierungen und Tönungen kontrolliert werden. Hier müssen Sie zu den höheren CSS-Farboptionen springen.

 /*Syntax*/
 color: red;
 color: crimson;
 color: slateblue;

Verwenden von RGB-Werten

Beim Entwerfen einer Website oder einer App spielt das Farbschema eine große Rolle – es sollte definitiv nicht das letzte sein, was Sie in Betracht ziehen. In CSS können Sie drei Methoden verwenden, um eine RGB-Farbe darzustellen. Dies sind die hexadezimale Zeichenfolgennotation, die funktionale RGB-Notation und die funktionale HSL-Notation. Hier ist ein genauerer Blick auf jeden von ihnen.

Hexadezimale Zeichenfolgennotation

Die hexadezimale Zeichenkettennotation beginnt immer mit dem Zeichen # . Nach diesem Zeichen geben Sie die Farben mit hexadezimalen Ziffern eines bestimmten Farbcodes an. Bei der Zeichenfolge wird die Groß-/Kleinschreibung nicht beachtet, aber es ist üblich, Kleinbuchstaben zu verwenden. Hier sind einige Anwendungsfälle:

#rrggbb

Dies ist die gebräuchlichste Art, eine numerische Farbe zu beschreiben. Es ist eine vollständig undurchsichtige Farbe mit roten, grünen und blauen Komponenten als 0xrr , 0xgg bzw. 0xbb .

#rrggbbaa

Es folgt den oben beschriebenen RGB-Kriterien mit einem Alphakanal, der die Transparenz der Farbe behandelt. Je niedriger der 0xaa- Wert ist, desto durchscheinender wird die Farbe.

#rgb

Wenn Sie die Farbe #556677 haben , können Sie sie einfach als #567 schreiben, da sie 0xrr , 0xgg bzw. 0xbb darstellt. Zum Beispiel ist #000 (oder #000000 ) schwarz, während #fff (oder #ffffff ) weiß ist.

#rgba

Es folgt den obigen Kriterien mit einem Alphakanal, der durch 0xaa angegeben wird, um die Deckkraft zu steuern.

RGB-Funktionsnotation

Die funktionale RGB-Notation repräsentiert Farben mit roten, grünen und blauen Komponenten. Es wird mit der Funktion rgb() definiert, die Eingabeparameter in Form von primären roten, grünen und blauen Komponenten (und einem optionalen Alphakanal) akzeptiert. Die Rot-, Grün- und Blauwerte müssen eine ganze Zahl zwischen 0 und 255 (einschließlich) oder ein Prozentsatz zwischen 0 % und 100 % sein. Andererseits akzeptiert der Alphakanal Werte von 0.0 (völlig transparent) bis 1.0 (völlig undurchsichtig). Es akzeptiert auch Prozentwerte von 0% (wie 0.0) und 100% (wie 1.0).

 /*Syntax*/
 color: rgb(rr,gg,bb);
 color: rgba(rr,gg,bb,a);

HSL-Funktionale Notation

Die funktionale HSL-Notation repräsentiert Farbe unter Verwendung von Farbton, Sättigung und Leuchtkraft. Es ist der Funktion rgb() in Bezug auf die Verwendung sehr ähnlich. Sie können den Hex-Wert jeder Farbe leicht auf Ihrem Computerbildschirm finden. Bei dieser Farbmethode definiert der Farbton die tatsächliche Farbe entsprechend der Position auf dem Farbkreis. Sättigung ist der Prozentsatz von Grau mit dem maximal möglichen Farbton. Die Leuchtkraft ändert die Farbe von ihrem dunkelsten zu hellstmöglichen Aussehen, wenn sie zunimmt.

Der Farbtonwert (H) wird durch die unterstützte Winkeleinheit in CSS angegeben. Es umfasst Grad , Rad , Grad und Drehung . Sättigung (S) gibt den Prozentsatz der endgültigen Farbe an, der aus dem Farbton besteht. Die Helligkeitskomponente (L) definiert die Graustufe.

 /*Syntax*/
 color: hsl(XXdeg, XX%, XX%);
 color: hsl(XXturn, XX%, XX%);

Anwenden von Farben auf HTML-Elemente

In CSS definiert die Eigenschaft color die Vordergrundfarbe des Inhalts, und background-color definiert die Hintergrundfarbe des durch HTML strukturierten Inhalts. Wenn ein Element gerendert wird, können Sie es mithilfe der Farbeigenschaften formatieren.

Farbeigenschaft für Texte

Die Farbeigenschaft wird beim Zeichnen von Text verwendet und wenn Sie Textdekorationen jeglicher Art benötigen. Sie können die Eigenschaft text-decoration-color verwenden , um Unterstreichungen, Überstriche oder durchgestrichene Linien in verschiedenen Farben zu rendern. Sie können die Hintergrundfarbe von Text mit der Eigenschaft background-color ändern. Sie können mit der Eigenschaft text-shadow einen Schatteneffekt auf Text anwenden. Sie können Text-Emphasis-Farbe auswählen , während Schwerpunkt Symbole in Textfeldern zeichnen.

Farbeigenschaft für Boxen

Wie Sie wissen, folgt alles auf einer Webseite dem Box-Modell. Somit ist jedes Element eine Box mit einer Art Inhalt und optionalem Auffüllen, Rahmen und Randbereich. Sie können die background-color- Eigenschaft verwenden, wenn kein Vordergrundinhalt vorhanden ist. Wenn Sie eine Linie zeichnen, um die Spalten eines Textes zu trennen, können Sie dafür die Eigenschaft column-rule-color verwenden . Es gibt eine Eigenschaft outline-color , um den Umriss einzufärben. Beachten Sie, dass sich ein Umriss vom Rahmen unterscheidet – er dient als Fokusanzeige.

Farbeigenschaft für Ränder

Jedes HTML-Element kann einen Rahmen haben. Sie können die Eigenschaft border-color als border-top-color , border-right-color , border-bottom-color und border-left-color festlegen, um die Rahmenfarbe der entsprechenden Seiten festzulegen. Die Verwendung der Abkürzungseigenschaft ist jedoch eine gute Praxis.

Mit der Eigenschaft border-inline-start-color können Sie die Kanten des Rahmens färben, die dem Anfang am nächsten sind. Auf der anderen Seite können Sie mit der Eigenschaft border-inline-end-color das Ende des Anfangs der Textzeilen innerhalb eines Rahmens einfärben. Es variiert jedoch je nach Schreibmodus , Textausrichtung und Richtung .

Zusammenfassung: Farbe und Zugänglichkeit

Obwohl eine schön gestaltete Website stark von der verwendeten Farbe beeinflusst wird, sollten Sie immer darauf achten, dass sie zugänglich ist. Die unsachgemäße Verwendung von Farben kann zu einem erheblichen Trafficverlust auf Ihrer Website führen.

Die Verwendung von hexadezimalen Zeichenfolgennotationen, Farbnamen oder RGB-Werten liegt ganz bei Ihnen. Stellen Sie einfach sicher, dass Sie Farben verwenden, um vorhandenen Text zu verstärken, und lassen Sie ihn einer bestimmten visuellen Hierarchie folgen. Wenn Sie ein angehender Webentwickler sind, ist es eine hervorragende Idee, mehr über die Farbtheorie zu lernen und Ihre eigene Palette zu erstellen. Bis dahin fröhliches und farbenfrohes Programmieren!