HTML Color Codes

HTML-Farbwähler für RGB, HEX, HSL Formate

HTML-CSS-Farbcodes für Ihre Website einfach mit dem Farbwähler abrufen, Farbformat zwischen HEX, RGB, HSL, HSV konvertieren.

Farbe wählen

Farbwert eingeben

Oder HTML5-Wähler verwenden

Ausgewählte Farbe

Rot: 0
Grün: 255
Blau: 255
HUE (Grad): 180
Helligkeit: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Farbgruppe: Cyan
Teilen:
CSS3-Farbbeispiel

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Dunkelste und Aufhellungsstile

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Farben aus einem Bild extrahieren

get pixel color from pic

Farbe wählen und Palette erstellen

select color and create palette

Was ist ein HTML-Farbcode?

HTML-Farbcodes sind eine Möglichkeit, Farben im Webdesign anzugeben. Diese Codes werden in HTML und CSS verwendet, um die Farben von Elementen wie Text, Hintergründen, Rändern und mehr zu definieren. Das Verständnis von HTML-Farbcodes ist entscheidend für die Erstellung visuell ansprechender und konsistenter Webseiten.

Zum Beispiel kann die Farbe Rot in den folgenden Formaten identifiziert werden:

Arten von HTML-Farbcodes


Hexadezimale Farbcodes:
  • Die gebräuchlichste Art, Farben in HTML und CSS anzugeben, ist die Verwendung von hexadezimalen (hex) Farbcodes. Ein Hex-Farbcode ist eine sechsstellige Kombination aus Zahlen und Buchstaben, die durch ihre Mischung aus Rot, Grün und Blau (RGB) Komponenten definiert wird.
  • Format: #RRGGBB
  • Beispiel: #FF5733 stellt einen Orangeton dar.
  • Jedes Paar von Ziffern entspricht der Intensität von Rot, Grün und Blau auf einer Skala von 00 (keine Intensität) bis FF (volle Intensität).
RGB-Farbcodes:
  • RGB-Farbcodes definieren Farben basierend auf ihren roten, grünen und blauen Komponenten.
  • Format: rgb(rot, grün, blau)
  • Beispiel: rgb(255, 87, 51) ist das RGB-Äquivalent von #FF5733.
  • Jede Komponente (Rot, Grün und Blau) wird als Zahl zwischen 0 und 255 angegeben.
RGBA-Farbcodes:
  • Ähnlich wie RGB, aber mit einer Alphakomponente für die Deckkraft.
  • Format: rgba(rot, grün, blau, alpha)
  • Beispiel: rgba(255, 87, 51, 0.5) gibt die gleiche Farbe mit 50% Deckkraft an.
HSL-Farbcodes:
  • HSL steht für Farbton, Sättigung und Helligkeit.
  • Format: hsl(farbton, sättigung%, helligkeit%)
  • Beispiel: hsl(9, 100%, 60%) ist eine weitere Möglichkeit, die Farbe #FF5733 darzustellen.
  • Der Farbton ist ein Grad auf dem Farbkreis (von 0 bis 360), die Sättigung ist ein Prozentsatz (0% ist Graustufen, 100% ist volle Farbe), und die Helligkeit ist ebenfalls ein Prozentsatz (0% ist Schwarz, 100% ist Weiß).
HSLA-Farbcodes:
  • Ähnlich wie HSL, aber mit einer Alphakomponente für die Deckkraft.
  • Format: hsla(farbton, sättigung%, helligkeit%, alpha)
  • Beispiel: hsla(9, 100%, 60%, 0.5) gibt die gleiche Farbe mit 50% Deckkraft an.
Verwendung von HTML-Farbcodes:

HTML-Farbcodes können in verschiedenen CSS-Eigenschaften verwendet werden, um Webelemente zu gestalten. Zum Beispiel:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

In diesem Beispiel werden der Text, der Hintergrund und die Grenze mit verschiedenen Arten von HTML-Farbcodes gestaltet, die alle denselben Orangeton darstellen.

HTML-Farbcodes sind ein grundlegender Aspekt des Webdesigns und ermöglichen es Entwicklern, Farben präzise zu definieren und zu manipulieren. Durch das Verständnis von Hex, RGB, RGBA, HSL und HSLA Farbcodes können Sie visuell kohärente und ansprechende Webseiten erstellen, die die Benutzererfahrung verbessern.