CSS - Farbreferenzen

Textfarbe mit RGB-Werten festlegen

p {
  color: rgb(255, 0 ,0); /* Rot */
}

Sie können verschiedene Anteile von Rot, Grün und Blau mischen, um unterschiedliche Farben zu erzeugen:

Beispiele für RGB-Farbwerte in CSS

h1 {
    color: rgb(0 ,128 ,0); /* Grün */
}

.highlight {
    background-color: rgb(255 ,255 ,0); /* Gelb */
}

a {
    color: rgb(128 ,0 ,128); /* Lila */
}

RGB ermöglicht es Ihnen, viele Farben zu erstellen, indem Sie den Anteil jeder Komponente ändern. Dies bietet mehr Kontrolle als die Verwendung vordefinierter Namen.

CSS unterstützt auch RGBA-Werte (Rot Grün Blau Alpha), die eine Deckkraft-Komponente zur Farbe hinzufügen. Der Deckkraftwert reicht von null (volle Transparenz) bis eins (volle Deckkraft).

Verwendung von RGBA für Transparenz

div { 
    background-color: rgba(255 ,00 ,00 ,.5); /* Rot mit fünfzig Prozent Deckkraft */ 
} 

Die Verwendung von RGBA ermöglicht es Ihnen, Farben mit Transparenz zu erstellen, ohne die Deckkraft des gesamten Elements zu beeinflussen. Dies ist nützlich für die Erstellung von Überlagerungen und anderen Effekten, bei denen Sie die Transparenz einzelner Farben steuern müssen.

RGB und RGBA werden in CSS weitgehend unterstützt und bieten Ihnen im Vergleich zu den im Webdesign häufig verwendeten Namen eine große Auswahl an Optionen.

Textfarbe mit HSL-Werten festlegen

p {
    color: hsl(0, 100%, 50%); /* Rot */
}

Beispiele für HSL-Farbwerte in CSS

h1 {
    color: hsl(120, 100%, 50%); /* Grün */
}

.highlight {
    background-color: hsl(60, 100%, 50%); /* Gelb */
}

a {
    color: hsl(300, 100%, 50%); /* Lila */
}

Das HSL-Modell ermöglicht es, viele Farben durch Anpassung von Farbton, Sättigung und Helligkeit zu erstellen. Es bietet eine intuitive Methode im Vergleich zu Hexadezimal- oder RGB-Werten.

Ähnlich wie RGBA unterstützt CSS auch HSLA-Werte (Farbton, Sättigung, Helligkeit, Alpha), die eine Transparenzkomponente hinzufügen. Der Transparenzwert reicht von null (vollständig transparent) bis eins (vollständig undurchsichtig).

HSLA für Transparenz verwenden

div {
    background-color: hsla(0, 100%, 50%, 0.5); /* Rot mit fünfzig Prozent Deckkraft */
}

Die Verwendung von HSLA ermöglicht es, die Transparenz einzelner Farben zu steuern, ohne die Deckkraft des gesamten Elements zu beeinflussen. Dies ist nützlich für die Erstellung von durchscheinenden Überlagerungen, Farbverläufen und anderen visuellen Effekten.

HSL und HSLA bieten eine flexible Möglichkeit zur Farbspezifikation. CSS bietet einen intuitiven Ansatz zur Auswahl, der einfache Anpassungen ermöglicht, um Variationen zu erstellen. HSL ist eine gute Wahl, wenn Sie Farbschemata basierend auf einem einzelnen Farbton erstellen oder subtile Anpassungen an einem Design vornehmen möchten.

Verwendung von Farbschlüsselwörtern in CSS

.overlay {
  background-color: transparent;
}

.button {
  color: blue;
  border: 2px solid currentColor;
}

.child-element {
  color: inherit;
}

.overlay hat einen transparenten Hintergrund, wodurch der dahinterliegende Inhalt sichtbar bleibt. Dies ist nützlich für die Erstellung von Overlays oder halbtransparenten Elementen.

.button verwendet currentColor. Der Text ist blau, und durch die Verwendung von currentColor für border-color sind sowohl Text als auch Rahmen blau. Wenn Sie die Textfarbe später ändern, wird sich der Rahmen automatisch anpassen.

.child-element verwendet inherit. Es übernimmt die Textfarbe seines übergeordneten Elements, ohne dass eine explizite Angabe erforderlich ist.

Farbschlüsselwörter bieten eine Möglichkeit, Farben basierend auf bestimmten Bedeutungen oder Beziehungen zwischen Elementen anzuwenden. Sie können zusammen mit anderen Notationen wie Hexadezimalwerten, RGB oder HSL für eine flexible Gestaltung in Ihrem CSS verwendet werden.

Textfarbe festlegen

Die Eigenschaft color legt die Textfarbe eines Elements fest. Sie kann auf jedes Element angewendet werden, das Text enthält, wie Absätze, Überschriften, Links oder Span-Elemente.

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

a {
  color: rgb(0, 128, 0);
}

In diesen Beispielen legt die Eigenschaft color die Textfarbe für Absätze auf Blau, für Überschriften auf Rot (mit einem Hexadezimalwert) und für Links auf Grün (mit einem RGB-Wert) fest.

Hintergrundfarbe festlegen

Die Eigenschaft background-color legt die Hintergrundfarbe eines Elements fest. Sie kann auf jedes Element angewendet werden.

div {
  background-color: yellow;
}

.container {
  background-color: #f0f0f0;
}

button {
  background-color: hsla(240, 100%, 50%, 0.8);
}

In diesen Beispielen legt die Eigenschaft background-color die Hintergrundfarbe für ein div-Element auf Gelb, für eine Container-Klasse auf Hellgrau (mit einem Hexadezimalwert) und für einen Button auf halbtransparentes Blau (mit einem HSLA-Wert) fest.

Rahmenfarbe festlegen

Die Eigenschaft border-color legt die Rahmenfarbe für ein Element fest. Sie kann angewendet werden, wenn das Element einen Rahmen hat.

.box {
  border: 2px solid;
  border-color: red;
}

input[type="text"] {
  border:1px solid; 
  border-color:#ccc; 
} 

button { 
  border: 3px solid; 
  border-color: rgb(0, 0, 0); 
} 

In diesen Beispielen legt die Eigenschaft border-color die Rahmenfarbe für eine Box-Klasse auf Rot, für ein Eingabefeld auf Hellgrau (mit einem Hexadezimalwert) und für einen Button auf Schwarz (mit einem RGB-Wert) fest. Diese Farbeigenschaften akzeptieren verschiedene Farbnotationen wie Farbnamen, Hexadezimalwerte, RGB, RGBA, HSL und HSLA. Sie können diese Notationen je nach gewünschter Farbe verwenden. Durch die Verwendung dieser Farbeigenschaften können Sie die Textfarbe, Hintergrundfarbe und Rahmenfarbe von Elementen auf Ihren Webseiten steuern und visuell ansprechende und einheitliche Designs erstellen.

Verwendung von RGBA für Farbtransparenz

Um Transparenz auf eine Farbe mit RGBA anzuwenden, verwenden Sie die rgba()-Funktion:

.overlay {
  background-color: rgba(255, 0, 0, 0.5); /* Rot mit 50% Deckkraft */
}

p {
  color: rgba(0, 0, 255, 0.8); /* Blau mit 80% Deckkraft */
}

• Das .overlay-Element hat einen halbtransparenten roten Hintergrund.
• Der Text in Absätzen ist auf Blau mit einem Alpha-Wert von .8 eingestellt.

Verwendung von HSLA für Farbtransparenz

Ähnlich wie RGBA:

.button {
  background-color: hsla(120%,100%,50%, .6); /* Grün mit .6 Deckkraft */
}

a {
  color: hsla(240%,100%,50%, .9); /* Blau mit .9 Deckkraft */
}

• Das .button-Element hat einen halbtransparenten grünen Hintergrund.
• Links haben eine blaue Farbe mit einem Alpha-Wert von .9.

Verwendung der Opacity-Eigenschaft

CSS bietet auch die opacity-Eigenschaft:

img {
  opacity: .5; /* Macht das Bild halb durchsichtig */
}

.container { 
  opacity: .8; /* Macht den Container größtenteils undurchsichtig */ 
}

• Ein Bild wird durch Einstellen seiner opacity halb durchsichtig gemacht.
• Ein Container-Element wird durch Einstellen seiner opacity größtenteils undurchsichtig gemacht.

Beachten Sie, dass bei der Verwendung von opacity sowohl ein Element als auch dessen Inhalte beeinflusst werden. Wenn Sie Transparenz nur für bestimmte Teile oder Farben innerhalb eines Elements wünschen, ohne die Deckkraft von Kindelementen zu beeinflussen, verwenden Sie stattdessen entweder RGBA oder HSLA.

Lineare Farbverläufe

Lineare Farbverläufe erzeugen einen geradlinigen Übergang von einer Farbe zur anderen. Um einen linearen Farbverlauf zu erstellen, verwenden Sie die Funktion linear-gradient() als Wert für die Eigenschaft background-image.

.linear-gradient {
  background-image: linear-gradient(to right, red, blue);
}

.linear-gradient-multiple {
  background-image: linear-gradient(to bottom right, red, yellow, green);
}

Radiale Farbverläufe

Radiale Farbverläufe erzeugen einen kreisförmigen oder elliptischen Übergang zwischen Farben. Um einen radialen Farbverlauf zu erstellen, verwenden Sie die Funktion radial-gradient() als Wert für die Eigenschaft background-image.

.radial-gradient {
  background-image: radial-gradient(circle, blue, green);
}

.radial-gradient-multiple {
  background-image: radial-gradient(circle at top left, red, yellow, green);
}

Beispiele für die Erstellung von Farbverläufen in CSS

Hier sind einige weitere Beispiele:

.linear-gradient-transparent { 
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)); 
} 

.repeating-linear-gradient {   
  background-image: repeating-linear-gradient(45deg, red 10px, blue 20px);    
}  

.radial-gradient-custom {     
  background-image: radial-gradient(ellipse, yellow, green, blue);      
}    

Farbverläufe sind nützliche Funktionen in CSS, die Ihnen helfen, ansprechende Hintergründe für Schaltflächen, Abschnitte, Vollseiten-Hintergründe und mehr zu erstellen. Mit der Flexibilität, die beide Arten bieten, und der Möglichkeit, Eigenschaften wie Farbpositionen und Transparenz zu steuern, sind viele kreative Effekte auf Ihren Webseiten möglich.

Monochrom

Ein monochromatisches Farbschema verwendet verschiedene Schattierungen, Tönungen und Nuancen einer einzigen Farbe. Es erzeugt einen einheitlichen Look und ist angenehm für die Augen. Um dieses Schema zu erstellen, wählen Sie eine Grundfarbe und verwenden dann ihre helleren und dunkleren Variationen.

Komplementär

Ein komplementäres Farbschema verwendet Farben, die sich im Farbkreis gegenüberliegen. Diese Farben erzeugen einen hohen Kontrast, sollten aber vorsichtig eingesetzt werden, um visuelle Spannungen zu vermeiden. Beispiele sind Blau und Orange, Rot und Grün oder Lila und Gelb.

Analog

Ein analoges Farbschema verwendet Farben, die im Farbkreis nebeneinander liegen. Diese Farben bilden eine harmonische Kombination. Um dieses Schema zu erstellen, wählen Sie eine Primärfarbe und verwenden dann die Farben direkt links und rechts davon.

Triadisch

Ein triadisches Farbschema verwendet drei Farben, die im Farbkreis gleichmäßig verteilt sind. Dieses Schema erzeugt einen ausgewogenen Look. Um dieses Schema zu erstellen, wählen Sie eine Primärfarbe und zeichnen dann ein gleichseitiges Dreieck auf dem Farbkreis, um die anderen beiden Farben zu finden.

Bei der Erstellung einer Palette für Ihre Website können Tools helfen, Schemata basierend auf Ihren Vorlieben zu generieren:

• Adobe Color: Dieses Tool ermöglicht es Ihnen, Schemata basierend auf verschiedenen Regeln wie monochrom oder komplementär zu erstellen.
• Coolors: Coolors ist schnell und einfach zu bedienen, um zufällige Paletten zu generieren oder einzelne Farben anzupassen.
• Paletton: Paletton ermöglicht es Ihnen, Schemata basierend auf Modellen wie monochrom oder triadisch mit Feinabstimmungsoptionen zu erstellen.

Durch die Verwendung dieser Tools und das Verständnis verschiedener Arten von Schemata können Sie ansprechende Paletten für Ihre Webdesigns erstellen. Berücksichtigen Sie dabei die Markenbotschaft und die Benutzererfahrung bei der Auswahl Ihrer Farben und experimentieren Sie, bis Sie die perfekte Palette für Ihre Website gefunden haben.