4 Möglichkeiten, Farben in CSS zu definieren

Die zentralen Thesen

• Verwenden von Farbnamen: CSS bietet 145 Farbnamen für eine einfache und einsteigerfreundliche Farbauswahl, die Optionen sind jedoch begrenzt und erfüllen möglicherweise nicht die genauen Designanforderungen.
• Hexadezimale Farbcodes: Hex-Codes bieten eine große Auswahl an Farboptionen und eine präzise Anpassung, obwohl sie möglicherweise weniger intuitiv zu verwenden und zu merken sind.
• RGB- und RGBA-Farbwerte: RGB ermöglicht eine genaue Farbsteuerung mit numerischen Werten, während RGBA Transparenz hinzufügt. Es ist wichtig, zugängliche Farbkombinationen sicherzustellen.

Farben gehören zu den am häufigsten verwendeten CSS-Attributen und spielen eine entscheidende Rolle bei der Gestaltung der visuellen Identität, Stimmung und Benutzererfahrung einer Website. CSS bietet eine Reihe von Optionen für die Verwendung von Farben, die jeweils auf spezifische Designanforderungen und -präferenzen zugeschnitten sind.

Auch wenn die Bedeutung der Farbdefinition leicht übersehen wird, können Ihre Entscheidungen das Erscheinungsbild Ihrer Website erheblich beeinflussen. Das Erkunden der Unterschiede zwischen verschiedenen Methoden und deren praktische Anwendung und Kombination wird Ihre Fähigkeit verbessern, optisch ansprechende Websites zu erstellen.

1. Verwenden von Farbnamen

CSS bietet eine praktische Möglichkeit, Farben mithilfe von Namen zu definieren, und es stehen 145 Optionen zur Verfügung. Diese Farbnamen reichen von einfachem „Rot“, „Grün“ und „Blau“ bis hin zu spezifischeren Farbtönen wie „Koralle“ oder „Lavendel“.

Die Verwendung benannter Farben ist unkompliziert: Sie wählen einen Farbnamen wie „rot“ aus und verwenden ihn in einer CSS-Eigenschaft, die Farbwerte unterstützt. Solch Zu den Eigenschaften gehört das Offensichtliche Farbe Und Hintergrundfarbe, aber auch Randfarbe, Umrissfarbe, Und Textschatten, unter anderen.

Farbnamen sind praktisch, wenn Sie eine temporäre Farbe für die Prototypenerstellung benötigen oder Ihren Code leicht lesbar halten möchten. Hier ist die Syntax:

color_property: color_name;

In diesem Fall einfach austauschen Farbname mit der spezifischen Farbe, die Sie verwenden möchten. Zum Beispiel, wenn Sie den Text festlegen möchten Farbe eines Absatzes zu Rot, schreiben:

p {
color: red;
}

Dadurch erhalten Ihre Absätze eine rote Textfarbe:

Vorteile: Sie sind in Ihrem CSS-Code leicht zu lesen und zu verstehen. Sie sind einsteigerfreundlich, funktionieren gut in allen Browsern und eignen sich für schnelle Designideen.

Nachteile: Sie haben begrenzte Möglichkeiten und bieten möglicherweise nicht genau die Farbtöne, die Sie benötigen, was die Design-Kreativität einschränkt. Darüber hinaus erfüllen sie möglicherweise nicht immer strenge Barrierefreiheitsanforderungen und die Unterstützung in älteren Systemen kann variieren.

2. Hexadezimale Farbcodes

Hexadezimale Farbcodes, oft auch als „Hex-Codes“ bezeichnet, sind die gebräuchlichsten Methoden zur Angabe von Farben im Webdesign. Diese Codes bestehen aus sechsstelligen Zahlen- und Buchstabenkombinationen (0–9, A–F), die die Mischung der roten, grünen und blauen (RGB) Komponenten einer Farbe darstellen.

Obwohl sie einfach zu bedienen sind, kann es schwierig sein, ihre Funktionsweise zu verstehen. Du kannst nehmen ein tiefer Einblick in Hex-Codes besser zu verstehen. Hier ist ein einfaches Beispiel dafür, wie Sie Hex-Codes in CSS verwenden können:

color: #RRGGBB;

In diesem Format stellen RR, GG und BB die roten, grünen bzw. blauen Komponenten dar. Jede Komponente kann von 00 (keine Intensität) bis FF (maximale Intensität) reichen. Wenn Sie beispielsweise die Hintergrundfarbe eines Website-Headers auf einen bestimmten Blauton festlegen möchten, können Sie einen Hex-Code wie diesen verwenden:

header {
background-color: #336699;
}

Dadurch entsteht eine tiefblaue Farbe:

​​​​​

Sie können auch eine Abkürzung verwenden, wenn jede der drei Komponenten dasselbe Zeichen zweimal wiederholt. Sie können das obige Beispiel wie folgt schreiben:

header {
background-color: #369;
}

Vorteile: Hexadezimale Farbcodes bieten eine große Auswahl an Farboptionen, sodass Sie detaillierte und individuelle Farbtöne erzeugen können. Sie bieten eine reibungslose Kontrolle über die Farbauswahl und eignen sich daher ideal für komplexe Designanforderungen.

Nachteile: Obwohl Hex-Codes leistungsstark sind, können sie weniger intuitiv sein als benannte Farben. Möglicherweise stehen Sie auch vor der Herausforderung, sich bestimmte Farbwerte zu merken. Glücklicherweise, Werkzeuge zum Finden der Hex-Codes von Farben Sie sind verfügbar, sodass der Prozess einfacher zu handhaben ist.

3. RGB- und RGBA-Farbwerte

Wie bei Hexadezimalcodes können Sie mit diesem Format Farben anhand ihrer Rot-, Grün- und Blauanteile angeben. Dieses Mal können Sie jedoch benutzerfreundlichere Ganzzahlen verwenden.

RGB-Farbwerte

RGB-Farbwerte sind die zweithäufigste Methode zum Definieren von Farben in CSS. „RGB“ steht für Rot, Grün und Blau, ausgedrückt als CSS-Funktion mit anschließenden Klammern. Innerhalb der Klammern weisen Sie jedem Farbkanal Werte im Bereich von 0 bis 255 zu. Dadurch können Sie die Intensität von Rot, Grün und Blau in der Farbe steuern, die Sie verwenden möchten.

Hier ist die Syntax:

rgb(red_value, green_value, blue_value);

Ersetzen red_value, grüner_Wert, Und blauer_Wert mit ihren jeweiligen numerischen Werten. Sie können beispielsweise die Farben Weiß, Schwarz und Rot wie in diesem Bild erzielen:

Wenn Sie alle drei Farbkanäle (Rot, Grün und Blau) auf ihren Maximalwert von 255 einstellen, ergibt sich für jeden Kanal die höchste Intensität, wodurch die Farbe Weiß entsteht:

.white-box {
 color: rgb(255, 255, 255);
}

Wenn Sie alle drei Farbkanäle auf ihren Mindestwert 0 setzen, stellt dies das Fehlen von Farbe in jedem Kanal dar, was zu Schwarz führt.

.black-box {
color: rgb(0, 0, 0);
}

Wenn Sie den roten Kanal auf seinen Maximalwert von 255 setzen, während die anderen Kanäle auf ihrem Minimalwert von 0 bleiben, entsteht die Farbe Rot:

.red-box {
color: rgb(255, 0, 0); 
}

RGBA-Farbwerte

RGBA funktioniert auf die gleiche Weise wie RGB, der einzige Unterschied besteht in der Einbeziehung eines Alphawerts. Das „A“ in RGBA steht für Alpha, das den Grad der Transparenz oder Opazität für die gewählte Farbe bestimmt. Ein Wert von 0 steht für vollständige Transparenz, sodass die Farbe vollständig unsichtbar ist, während ein Wert von 1 für vollständige Deckkraft steht, sodass die Farbe vollständig sichtbar ist.

RGBA ist besonders nützlich, wenn Sie Elemente mit unterschiedlichen Transparenzgraden erstellen möchten, beispielsweise durchscheinende Hintergründe oder verblassten Text. Die vollständige Syntax lautet:

color: rgba(red_value, green_value, blue_value, alpha_value);

Hier, red_value, grüner_Wert, Und blauer_Wert stellen die Farbkanäle wie in RGB dar und alpha_value Gibt den Grad der Transparenz an.

div {
background-color: rgba(0, 128, 0, 0.5);
}

In diesem Beispiel weist der Alpha-Wert von 0,5 der grünen Farbe eine Transparenz von 50 % zu, sodass der darunter liegende Inhalt durchscheinen kann:

Vorteile: Mit RGB und RGBA können Sie Farben präzise steuern, was die Auswahl präziser Farbtöne und die Erstellung optisch ansprechender Designs erleichtert. Sie sind mit verschiedenen Webbrowsern kompatibel und stellen so sicher, dass die von Ihnen gewählten Farben konsistent aussehen.

Nachteile: Die Herausforderung besteht darin, zugängliche Farbkombinationen sicherzustellen. Es ist wichtig, auf die Kontrastverhältnisse zu achten, vor allem beim Arbeiten mit Transparenz in RGBA. Die WCAG-Richtlinien können helfen Sie stellen sicher, dass Ihr Design zugänglich ist.

4. HSL- und HSLA-Farbwerte

HSL – kurz für Hue, Saturation und Lightness – ist eine weitere CSS-Funktion, die Farben definiert. Ähnlich wie RGB verwendet HSL numerische Werte zur Darstellung von Farben, allerdings auf andere Weise. Sie kennen es vielleicht HSL-Werte von UI-Komponenten in Design-Apps und anderswo.

Farbton: Dies stellt die Farbe selbst mithilfe von Graden auf einem Farbkreis dar, der von 0 bis 360 reicht. Stellen Sie sich vor, Sie wählen einen Punkt auf einem Kreis aus, wobei jeder Grad einer anderen Farbe entspricht. Beispielsweise 0 und 360 Grad für Rot, 120 Grad für Grün und 240 Grad für Blau.

Sättigung: Die Sättigung bestimmt die Lebendigkeit oder Intensität der Farbe. Es definiert das Verhältnis der Farbe zu Grau, wobei 0 % eine vollständige Graustufe (entsättigt) und 100 % eine vollständige Sättigung (lebendig und rein) bedeutet.

Leichtigkeit: Helligkeit gibt an, wie hell oder dunkel die Farbe erscheint. Es hängt mit der Position der Farbe im Spektrum zwischen Schwarz (0 %) und Weiß (100 %) zusammen. Ein Wert von 50 % stellt die normale Farbe dar, während Werte unter 50 % die Farbe dunkler und Werte über 50 % heller machen.

Neben HSL gibt es noch HSLA, wobei das „A“ für „Alpha“ steht. Dies ähnelt dem „A“ in RGBA und bedeutet Transparenz.

Hier ist die Syntax:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Ersetzen Sie mit dieser Syntax hue_value, Sättigungsprozentsatz, Und Helligkeitsprozentsatz mit den spezifischen Werten, die Sie für jede Komponente wünschen. Zum Beispiel:

div {
background-color: hsl(120, 100%, 50%);
}

In diesem Beispiel ist die Hintergrundfarbe von a div Das Element wird mithilfe von HSL-Werten auf ein leuchtendes Grün gesetzt. Die 120 stellt den Farbton (grün) dar, 100 % steht für volle Sättigung und 50 % stellt die Helligkeit auf ein ausgewogenes Niveau ein.

Vorteile: HSL und HSLA bieten vielseitige Farbberechnungen mithilfe benutzerdefinierter CSS-Eigenschaften. Sie sind hochkompatibel mit modernen Browsern und ermöglichen eine einfache Anpassung der Farbhelligkeit.

Nachteile: Das Erlernen von HSL erfordert Farbwissenschaft verstehenB. Farbtöne und Sättigungen, die eine größere Herausforderung darstellen können als die bekannten RGB-Farben.

Nutzen Sie die Kraft der CSS-Farben

Es gibt weitere Methoden, die Sie überprüfen können, und während Sie die verschiedenen Formate zum Definieren von Farben erkunden Denken Sie bei CSS daran, dass Sie die Möglichkeit haben, das Erscheinungsbild, die Stimmung und das Benutzererlebnis Ihrer Website zu gestalten.

Ihre Wahl des Farbformats – seien es einfache Farbnamen, Hexadezimalcodes, RGB oder HSL – kann sich darauf auswirken, wie Ihr Publikum Ihre Website wahrnimmt. Experimentieren Sie also, lernen Sie und finden Sie die Farbdefinitionen, die Ihren Designzielen am besten entsprechen.