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 sein rot oder cyan für das Schlüsselwort Farbe. 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*/
Farbe Rot;
Farbe: karmesinrot;
Farbe: schieferblau;

Verwenden von RGB-Werten

Beim Entwerfen einer Website oder einer App wird die Farbschema ist sehr wichtig – 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 String-Notation beginnt immer mit dem Zeichen #. Nach diesem Zeichen geben Sie die Farben mit hexadezimalen Ziffern eines bestimmten Farbcodes an. Die Zeichenfolge unterscheidet nicht zwischen Groß- und Kleinschreibung, 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 deckende Farbe mit roten, grünen und blauen Komponenten als 0xrr, 0xgg, und 0xbb bzw.

#rrggbbaa

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

#rgb

Wenn du Farbe hast #556677, du kannst es einfach schreiben als #567 da es repräsentiert 0xrr, 0xgg, und 0xbb bzw. Zum Beispiel, #000 (oder #000000) ist schwarz während #F f f (oder #ffffff) ist weiß.

#rgba

Es folgt den oben genannten Kriterien mit einem Alphakanal, der durch. angegeben wird 0xaa um die Deckkraft zu kontrollieren.

RGB-Funktionsnotation

Die funktionale RGB-Notation repräsentiert Farben mit roten, grünen und blauen Komponenten. Es ist definiert mit dem rgb()-Funktion 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 sein 0 zu 255 (einschließlich) oder ein Prozentsatz von 0 % bis 100 %. 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*/
Farbe: rgb (rr, gg, bb);
Farbe: 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 dem sehr ähnlich rgb() Funktion in Bezug auf die Nutzung. Du kannst ganz einfach Finde den Hex-Wert einer beliebigen Farbe auf Ihrem Computerbildschirm. 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 enthält deg, rad, grad, und Dreh dich. Sättigung (S) gibt den Prozentsatz der endgültigen Farbe an, der aus dem Farbton besteht. Die Helligkeitskomponente (L) definiert die Graustufe.

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

Anwenden von Farben auf HTML-Elemente

In CSS ist das Farbe -Eigenschaft definiert die Vordergrundfarbe des Inhalts und Hintergrundfarbe 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 Farbe -Eigenschaft wird beim Zeichnen von Text verwendet und wenn Sie Textdekorationen benötigen. Du kannst den... benutzen Text-Dekoration-Farbe -Eigenschaft, um Unterstreichungen, Überstriche oder durchgestrichene Linien in verschiedenen Farben zu rendern. Sie können die Hintergrundfarbe des Textes ändern, indem Sie Hintergrundfarbe Eigentum. Sie können einen Schatteneffekt auf Text anwenden, indem Sie die Text-Schatten Eigentum. Sie können auswählen Text-Hervorhebung-Farbe beim Zeichnen von Hervorhebungssymbolen in Textfeldern.

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. Du kannst den... benutzen Hintergrundfarbe -Eigenschaft, wenn kein Vordergrundinhalt vorhanden ist. Wenn Sie eine Linie zeichnen, um die Spalten eines Textes zu trennen, können Sie die Spalten-Regel-Farbe Eigentum dafür. Dort ist ein Umrissfarbe -Eigenschaft, um den Umriss zu fä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 Randfarbe Eigentum als Bordüre-Oberseite-Farbe, Rahmen-rechts-Farbe, Rahmen-unten-Farbe, und Rahmen-Links-Farbe um die Rahmenfarbe der entsprechenden Seiten einzustellen. Die Verwendung der Abkürzungseigenschaft ist jedoch eine gute Praxis.

Die Rahmen-inline-Startfarbe -Eigenschaft können Sie die Kanten des Rahmens färben, die dem Anfang am nächsten sind. Auf der anderen Seite ist die Rahmen-inline-Endfarbe -Eigenschaft können Sie das Ende des Anfangs der Textzeilen innerhalb eines Rahmens einfärben. Obwohl es je nach Ihrem variiert Schreibmodus, Textorientierung, und Richtung.

Zusammenfassung: Farbe und Zugänglichkeit

Obwohl eine schön gestaltete Website stark von der verwendeten Farbe beeinflusst wird, sollten Sie immer sicherstellen, 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!

So nutzen Sie die Farbtheorie, um Ihre kreativen Projekte zu verbessern

Durch die richtige Verwendung der richtigen Farben können Sie Ihre kreativen Projekte auf eine ganz neue Ebene bringen.

Weiter lesen

Über den Autor