Zum Hauptinhalt springen

Web-Farben verstehen 🎨

Beim Erstellen einer Website sehen Sie seltsame Codes wie #FF5733, rgb(255, 87, 51). Das sind alles Farbcodes! Ich erkläre es auf einfache Weise, damit auch Anfänger es verstehen können.

Warum Farbcodes verwenden?​

Wir sagen "rot", "blau", aber der Computer braucht genaue Zahlen.

Zum Beispiel:

  • Wenn Sie "rot" sagen: Welches Rot? Helles Rot? Dunkles Rot? 🤔
  • Wenn Sie #FF0000 sagen: Exakt Rot! ✅

3 Möglichkeiten, Farben im Web auszudrücken​

1. HEX (Hexadezimal) Farbe 🔢​

Das ist das häufigste Format!

color: #FF5733;
background: #3498db;

Format:

  • Beginnt mit dem Symbol #
  • 6 Ziffern/Buchstaben (0-9, A-F)
  • Paarweise: #RRGGBB
    • RR = Rot (Red)
    • GG = Grün (Green)
    • BB = Blau (Blue)

Beispiele:

#FF0000  →  Rot (Red maximal)
#00FF00  →  Grün (Green maximal)
#0000FF  →  Blau (Blue maximal)
#FFFFFF  →  Weiß (alle Farben maximal)
#000000  →  Schwarz (alle Farben 0)

2. RGB Farbe 🎨​

Ausgedrückt in Mengen von Rot (Red), Grün (Green), Blau (Blue)!

color: rgb(255, 87, 51);
background: rgb(52, 152, 219);

Format:

  • rgb(rot, grün, blau)
  • Jede Zahl zwischen 0~255

Beispiele:

rgb(255, 0, 0)     →  Rot
rgb(0, 255, 0)     →  Grün
rgb(0, 0, 255)     →  Blau
rgb(255, 255, 255) →  Weiß
rgb(0, 0, 0)       →  Schwarz
rgb(128, 128, 128) →  Grau

Transparenz hinzufügen (RGBA):

rgba(255, 0, 0, 0.5)  →  Halbtransparentes Rot
             ↑
        0.0 ~ 1.0 (transparent ~ undurchsichtig)

3. HSL Farbe 🌈​

Die für Menschen am einfachsten verständliche Methode!

color: hsl(9, 100%, 60%);
background: hsl(204, 70%, 53%);

Format:

  • hsl(farbton, sättigung, helligkeit)
  • H (Hue): Farbton (0~360 Grad)
  • S (Saturation): Sättigung (0~100%)
  • L (Lightness): Helligkeit (0~100%)

Farbkreis (Hue):

0° / 360°  →  Rot
60°        →  Gelb
120°       →  Grün
180°       →  Cyan
240°       →  Blau
300°       →  Magenta

Beispiele:

hsl(0, 100%, 50%)    →  Reines Rot
hsl(120, 100%, 50%)  →  Reines Grün
hsl(240, 100%, 50%)  →  Reines Blau
hsl(0, 0%, 50%)      →  Grau
hsl(0, 100%, 100%)   →  Weiß
hsl(0, 0%, 0%)       →  Schwarz

Vergleich der Farbformate​

Dieselbe Farbe auf drei Arten ausgedrückt:

🔴 Helles Rot​

HEX:  #FF5733
RGB:  rgb(255, 87, 51)
HSL:  hsl(9, 100%, 60%)

🔵 Blau​

HEX:  #3498db
RGB:  rgb(52, 152, 219)
HSL:  hsl(204, 70%, 53%)

🟢 Grün​

HEX:  #2ecc71
RGB:  rgb(46, 204, 113)
HSL:  hsl(145, 63%, 49%)

Wann welches Format verwenden?​

HEX verwenden 📝​

  • Wenn der Designer Farbcodes gibt (am häufigsten)
  • Zum einfachen Festlegen von Farben
  • Häufig in CSS-Dateien verwendet
.button {
  background-color: #3498db;
  color: #ffffff;
}

RGB verwenden 🎨​

  • Wenn Transparenz (Alpha) erforderlich ist
  • Beim Berechnen von Farben mit JavaScript
  • Beim dynamischen Ändern von Farben
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparentes Schwarz */
}

HSL verwenden 🌈​

  • Wenn Sie nur den Farbton ändern möchten
  • Wenn Sie nur die Helligkeit anpassen möchten
  • Zum Erstellen von Farben mit ähnlichen Tönen
.primary {
  background: hsl(200, 70%, 50%);
}
.primary-light {
  background: hsl(200, 70%, 70%); /* Nur Helligkeit geändert */
}
.primary-dark {
  background: hsl(200, 70%, 30%); /* Dunkler */
}

Praktische Beispiele​

Beispiel 1: Button-Farbe 🔘​

/* Blauer Button */
.button {
  background-color: #3498db;
  color: #ffffff;
}

/* Beim Hover */
.button:hover {
  background-color: #2980b9; /* Etwas dunkleres Blau */
}

Beispiel 2: Verlaufshintergrund 🌅​

.gradient-bg {
  background: linear-gradient(
    to right,
    #667eea,   /* Violett */
    #764ba2    /* Magenta */
  );
}

Beispiel 3: Halbtransparente Überlagerung 👻​

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* 70% undurchsichtiges Schwarz */
}

Farbwerkzeuge verwenden​

Farben konvertieren​

Im Color Converter:

  • HEX → RGB → HSL Konvertierung
  • Farbauswahl mit dem Farbwähler
  • Kopieren in verschiedenen Formaten

Verwendung:

  1. Color Converter öffnen
  2. Gewünschte Farbe mit dem Farbwähler auswählen
  3. HEX-, RGB-, HSL-Codes werden automatisch generiert!
  4. Benötigtes Format kopieren und verwenden

CSS-Verlauf erstellen​

Im Gradient Generator:

  • Verlauf mit 2 oder mehr Farben
  • Richtung einstellen
  • CSS-Code automatisch generieren

Tipps zur Farbauswahl 💡​

1. Farbharmonie​

Komplementärfarben (gegenüberliegende Farben):

Rot(0°) ↔ Cyan(180°)
Blau(240°) ↔ Gelb(60°)

Analoge Farben (ähnliche Farben):

hsl(200, 70%, 50%)  Blau
hsl(210, 70%, 50%)  Etwas violettes Blau
hsl(190, 70%, 50%)  Etwas cyanblaues Blau

2. Helligkeitskontrast​

Damit Text gut lesbar ist:

/* Guter Kontrast ✅ */
.good-contrast {
  background: #000000;  /* Schwarz */
  color: #ffffff;       /* Weiß */
}

/* Schlechter Kontrast ❌ */
.bad-contrast {
  background: #cccccc;  /* Hellgrau */
  color: #ffffff;       /* Weiß - Schwer zu sehen! */
}

3. Konsistenz wahren​

Ähnliche Elemente mit ähnlichen Farben:

/* Primary Farbreihe */
.primary       { background: hsl(200, 70%, 50%); }
.primary-light { background: hsl(200, 70%, 70%); }
.primary-dark  { background: hsl(200, 70%, 30%); }

/* Success Farbreihe */
.success       { background: hsl(120, 60%, 50%); }
.success-light { background: hsl(120, 60%, 70%); }
.success-dark  { background: hsl(120, 60%, 30%); }

Häufig verwendete Farbcodes​

Grundfarben​

Rot:     #FF0000  rgb(255, 0, 0)    hsl(0, 100%, 50%)
Grün:    #00FF00  rgb(0, 255, 0)    hsl(120, 100%, 50%)
Blau:    #0000FF  rgb(0, 0, 255)    hsl(240, 100%, 50%)
Gelb:    #FFFF00  rgb(255, 255, 0)  hsl(60, 100%, 50%)
Magenta: #FF00FF  rgb(255, 0, 255)  hsl(300, 100%, 50%)
Cyan:    #00FFFF  rgb(0, 255, 255)  hsl(180, 100%, 50%)

Unbunte Farben​

Weiß:      #FFFFFF  rgb(255, 255, 255)
Hellgrau:  #CCCCCC  rgb(204, 204, 204)
Grau:      #808080  rgb(128, 128, 128)
Dunkelgrau: #333333  rgb(51, 51, 51)
Schwarz:   #000000  rgb(0, 0, 0)

Beliebte Farben​

Himmelblau: #87CEEB  rgb(135, 206, 235)
Rosa:       #FFC0CB  rgb(255, 192, 203)
Orange:     #FFA500  rgb(255, 165, 0)
Violett:    #800080  rgb(128, 0, 128)
Gold:       #FFD700  rgb(255, 215, 0)

Abgekürzter HEX-Code​

Wenn sich gleiche Ziffern wiederholen, kann man abkürzen:

#FF0000  →  #F00   (Rot)
#00FF00  →  #0F0   (Grün)
#0000FF  →  #00F   (Blau)
#FFFFFF  →  #FFF   (Weiß)
#000000  →  #000   (Schwarz)
#CCCCCC  →  #CCC   (Grau)

Farbnamen verwenden​

In CSS können auch Farbnamen verwendet werden:

color: red;
color: blue;
color: green;
color: white;
color: black;

Aber es ist besser, genaue Farbcodes zu verwenden!

Barrierefreiheit berücksichtigen ♿​

Kontrastverhältnis prüfen​

  • Normaler Text: mindestens 4.5:1
  • Großer Text: mindestens 3:1

Gutes Beispiel:

background: #000000;  /* Schwarz */
color: #FFFFFF;       /* Weiß - Kontrast 21:1 */

Schlechtes Beispiel:

background: #777777;  /* Grau */
color: #888888;       /* Etwas helleres Grau - Kontrast zu niedrig */

Praxis: Farben experimentieren​

Praxis 1: Gleiche Farbe, unterschiedliche Helligkeit​

.color-1 { background: hsl(200, 70%, 20%); } /* Sehr dunkel */
.color-2 { background: hsl(200, 70%, 40%); } /* Dunkel */
.color-3 { background: hsl(200, 70%, 60%); } /* Normal */
.color-4 { background: hsl(200, 70%, 80%); } /* Hell */

Praxis 2: Gleiche Helligkeit, unterschiedliche Farbe​

.color-1 { background: hsl(0, 70%, 50%); }   /* Rot */
.color-2 { background: hsl(120, 70%, 50%); } /* Grün */
.color-3 { background: hsl(240, 70%, 50%); } /* Blau */
Tipp

Experimentieren Sie im Color Converter direkt mit den Farben!

Häufig gestellte Fragen (FAQ)​

F1: Was bedeuten die Zahlen und Buchstaben in HEX?​

A: Es wird das Hexadezimalsystem verwendet.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
                                ↑
                        A=10, B=11 ... F=15

F2: Warum geht RGB bis 255?​

A: Der Computer drückt jede Farbe in 8 Bit (0~255) aus.

0 = Minimum (keine Farbe)
255 = Maximum (volle Farbe)

F3: Wie erstellt man eine transparente Farbe?​

A: Verwenden Sie RGBA oder HSLA:

rgba(255, 0, 0, 0.5)   /* Halbtransparentes Rot */
hsla(0, 100%, 50%, 0.5) /* Halbtransparentes Rot */

F4: Wie erstellt man einen Verlauf?​

A: Verwenden Sie Gradient Generator oder:

background: linear-gradient(to right, #667eea, #764ba2);

Nächste Schritte 🚀​

Nachdem Sie Farben verstanden haben:

  1. ✅ Color Converter - Farbkonvertierung üben
  2. ✅ Gradient Generator - Verläufe erstellen
  3. ✅ Shadow Generator - Farbschatten erstellen
  4. ✅ Border Radius Generator - Abgerundete Ecken erstellen

Zusammenfassung​

Web-Farben sind nicht schwer!

Zu merkende Punkte:

  • HEX: #RRGGBB - Am häufigsten
  • RGB: rgb(rot, grün, blau) - Kann Transparenz hinzufügen
  • HSL: hsl(farbton, sättigung, helligkeit) - Für Menschen leicht verständlich

Durch häufiges Experimentieren mit dem Color Converter Tool werden Sie schnell vertraut! 🎨

Farbe ist ein wichtiges Element, das die Atmosphäre der Website bestimmt. Probieren Sie verschiedene Farben aus!