Farbkonverter

So verwenden Sie es

Eine Farbe im Web wird normalerweise in einem von drei Formaten geschrieben: HEX, RGB oder HSL. HEX packt eine Farbe in einen einzelnen String — ein # gefolgt von sechs Hexadezimalziffern, in Paaren für Rot, Grün und Blau angeordnet, wobei jedes Paar von 00 (keine) bis FF (voll) reicht. RGB buchstabiert die gleichen drei Kanäle als einfache Zahlen statt Hex-Paare auf, wobei Rot, Grün und Blau jeweils von 0 bis 255 laufen. HSL nimmt einen anderen Ansatz: statt Kanalintensitäten beschreibt es Farbton als Position auf einem 360°-Farbrad, dann Sättigung und Helligkeit als Prozentsätze, die viel natürlicher abbilden, wie Menschen tatsächlich über Farbe denken. Jedes Format besteht weiter, weil es besser für eine andere Aufgabe geeignet ist, nicht weil eines die anderen ersetzt hat. HEX ist kompakt und leicht in CSS oder ein Designwerkzeug einfügbar — sechs Zeichen erfassen eine exakte Farbe ohne Mehrdeutigkeit. RGB bildet direkt ab, wie Bildschirme tatsächlich Farbe erzeugen, indem rotes, grünes und blaues Licht auf Pixelebene gemischt wird, und es erweitert sich sauber zu rgba(), indem ein vierter Alpha-Kanal für Transparenz hinzugefügt wird. HSL ist derjenige, den Menschen erreichen, wenn sie eine Farbe anpassen, anstatt sie von Grund auf anzugeben: das Erhöhen oder Verringern der Helligkeit gibt einen vorhersehbaren helleren oder dunkleren Farbton, und das Verschieben des Farbtons bewegt sich sanft um das Farbrad, um eine passende Palette zu erstellen. Ein konkretes Beispiel macht die Beziehung klar. Nehmen Sie ein mittleres Blau: als HEX ist es #3B82F6. In Paare aufgeteilt, 3B, 82 und F6 konvertieren von hexadezimal zu dezimal als 59, 130 und 246 — genau die gleiche Farbe geschrieben als rgb(59, 130, 246). Diese gleichen Rot-, Grün- und Blauwerte in Farbton, Sättigung und Helligkeit konvertiert, erhalten Sie hsl(217°, 91%, 60%): ein Farbton von 217° sitzt im blauen Segment des Farbrads, 91% Sättigung bedeutet, dass es ein lebendiges, unbeschönigtes Blau ist, und 60% Helligkeit platziert es ungefähr in der Mitte des Bereichs von Schwarz zu Weiß-Helligkeit. Alle drei Strings beschreiben die identische Pixelfarbe. Um den Konverter zu verwenden, geben Sie eine Farbe in das Eingabefeld in einem der drei Formate ein — ein HEX-Code, ein rgb()-Wert oder ein hsl()-Wert — oder klicken Sie auf die Farbauswahl und wählen Sie visuell aus. Sobald eine gültige Farbe erkannt wird, aktualisieren sich die anderen zwei Formate sofort zusammen mit einer Live-Vorschau, damit Sie bestätigen können, dass das Ergebnis Ihren Erwartungen entspricht, bevor Sie es kopieren. Klicken Sie auf das Kopier-Symbol neben einem beliebigen Wert, um es in diesem genauen Format zum Einfügen in CSS, ein Designwerkzeug oder Code zu erfassen. Das Konvertieren zwischen Formaten kommt in echten Arbeiten ständig vor: Abgleichen einer exakten Markenfarbe, wenn ein Client einen HEX-Code übergibt, aber Ihr Designwerkzeug HSL-Regler möchte, Erstellen eines CSS-Designs, in dem Sie konsistente RGB-Werte für rgba()-Überlagern benötigen, Anpassen der Helligkeit einer Basisfarbe um einige Prozent nach oben oder unten, um einen überzeugenden Hover- oder aktiven Zustand zu erstellen, und Überprüfung, ob Text- und Hintergrundfarben genug Kontrast für Barrierefreiheit haben, indem Helligkeitswerte verglichen werden.

Häufig gestellte Fragen

Was ist ein HEX-Farbcode?

Ein HEX-Farbcode ist ein Hash-Symbol gefolgt von sechs Hexadezimalziffern, z. B. #3B82F6. Die sechs Ziffern bilden drei Paare, wobei jedes Paar die Intensität von Rot, Grün und Blau auf einer Skala von 00 (keine) bis FF (voll, 255 dezimal) einstellt. Da er kompakt und eindeutig ist, ist HEX die häufigste Art, genaue Farben in CSS und Designwerkzeugen anzugeben.

Was ist der Unterschied zwischen RGB und HSL?

RGB beschreibt eine Farbe als drei Kanalintensitäten — Rot, Grün und Blau, jeweils von 0 bis 255 — entsprechend der Art, wie Bildschirme Licht mischen, um Farbe zu erzeugen. HSL beschreibt die gleiche Farbe als Farbton (seine Position auf einem 360°-Farbrad), Sättigung (wie lebhaft oder gedimmt sie ist) und Helligkeit (wie nah an Schwarz oder Weiß). RGB ist präzise für Bildschirme; HSL ist für Menschen intuitiver zu bearbeiten.

Wie konvertiere ich HEX zu RGB?

Teilen Sie die sechs HEX-Ziffern in drei Paare auf — die erste für Rot, die zweite für Grün, die dritte für Blau — und konvertieren Sie jedes Paar von hexadezimal zu dezimal, um eine Zahl von 0 bis 255 zu erhalten. Beispielsweise teilt sich #3B82F6 in 3B, 82 und F6, die zu 59, 130 und 246 konvertieren und rgb(59, 130, 246) ergeben. Dieser Konverter führt die Mathematik sofort während der Eingabe durch.

Was macht der Alpha-Kanal?

Der Alpha-Kanal steuert die Transparenz, die als vierter Wert neben Rot, Grün und Blau in rgba() oder hsla() hinzugefügt wird und von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) reicht. Es ermöglicht einer Farbe, sich mit dem zu vermischen, was dahinter sitzt — nützlich für Überlagern, subtile Grenzen oder das Abdimmen eines Elements, ohne seine zugrunde liegende Farbe zu ändern. HEX unterstützt es auch, als optionales 4. oder 8. Paar von Ziffern.