Hex-zu-RGB-Konverter

Ein Hex-zu-RGB-Konverter nimmt eine Farbe, die als hexadezimaler Code geschrieben ist—drei oder sechs Ziffern, mit oder ohne führendes Hash-Zeichen—und zerlegt sie in die drei ganzzahligen Kanäle, die jeder Bildschirm, jede Canvas-Fläche und jedes Design-Token-System noch nativ spricht: Rot, Grün und Blau, jeweils von null bis zweihundertfünfundfünfzig. Fügen Sie #3498db oder die Kurzform #abc ein; das Werkzeug expandiert die Kurzschreibweise bei Bedarf, normalisiert auf ein kleingeschriebenes sechsstelliges Hex und liefert r, g, b sowie eine fertig einfügbare CSS-rgb()-Zeichenkette und die Kanalkalkulation Schritt für Schritt.

Was eine Hex-Farbe bedeutet und wie RGB abgeleitet wird

Hexadezimale Farbcodes packen drei Acht-Bit-Kanäle in eine kompakte Zeichenkette, die Stylesheets, Designwerkzeuge und Markenrichtlinien seit Jahrzehnten nutzen. In der sechsstelligen Form #RRGGBB kodieren die ersten beiden Zeichen Rot, die mittleren beiden Grün und die letzten beiden Blau; jedes Paar wird als Ganzzahl zur Basis sechzehn von null (00) bis zweihundertfünfundfünfzig (FF) gelesen. Die dreistellige Kurzform #RGB ist eine CSS-Bequemlichkeit, die jede Ziffer verdoppelt: #abc wird zu #aabbcc, sodass ein einzelnes Nibble für ein volles Byte steht, wenn eine Palette nur grobe Schritte braucht.

Diese Expansionsregel zu verstehen, zählt für Referenztests und Barrierefreiheitsprüfungen, denn #fff und #ffffff sind dasselbe reine Weiß, während #f0f0f0 ein anderes Grau ohne dreistelliges Äquivalent ist. Dieser Konverter führt genau diese Abbildung aus: optionales führendes Hash entfernen, alles ablehnen, was nicht drei oder sechs Hexadezimalziffern ist, Kurzform bei Bedarf expandieren, dann jedes zweistellige Paar zur Basis sechzehn parsen. Das Ergebnis sind drei Ganzzahlen, die Sie in Canvas-Füllstile, React-Inline-Styles, E-Mail-HTML oder einen Kontrastverhältnis-Rechner speisen können, ohne die Bit-Packung selbst neu abzuleiten.

Unterrichtsübungen und Coding-Interviews verlangen diese Transformation oft von Hand; eine deterministische Referenz beseitigt Mehrdeutigkeit zu Groß-/Kleinschreibung, Hash-Präsenz und Kurzform-Expansion.

Praktische Tipps, Grenzen und verwandte Suchen

Senden Sie vorzugsweise die Hex-Zeichenkette, die Ihr Designwerkzeug exportiert hat, einschließlich Hash, wenn vorhanden; beide Formen funktionieren, und die Antwort normalisiert immer auf kleingeschriebenes sechsstelliges Hex, damit nachgelagerte Diffs stabil bleiben. Übergeben Sie keine Alpha-Formen wie #RRGGBBAA oder #RGBA—diese Seite ist bewusst auf klassisches opakes RGB-Packing beschränkt, und diese Längen werden abgelehnt, damit Sie es merken, statt Alpha stillschweigend zu verwerfen.

Benannte CSS-Farben wie rebeccapurple liegen außerhalb des Umfangs; wandeln Sie sie zuerst mit einer Tabelle benannter Farben um oder nutzen Sie ein breiteres Mehrraum-Werkzeug, wenn Sie auch HSL, LAB oder CMYK brauchen. Beim Schreiben von Unit-Tests decken Sie mindestens einen sechsstelligen Fall, eine dreistellige Expansion, eine Großbuchstaben-Eingabe, eine Eingabe ohne Hash und eine absichtlich ungültige Länge ab, damit Validierungsregressionen nicht durchrutschen.

Diese Seite richtet sich an Personen, die einen Hex-zu-RGB-Konverter, #RRGGBB zu Rot Grün Blau oder einen kostenlosen Hex-Farb-zu-RGB-Rechner online suchen; sie ist keine vollständige Farbmanagement-Suite, kein Palette-Extraktor aus Bildern und kein RGB-zu-Hex-Rückweg. Bevorzugen Sie diese Fähigkeit, wenn Sie bereits ein Hex-Token haben und nur die drei Kanal-Ganzzahlen oder eine css-rgb()-Zeichenkette brauchen; muss Ihre Pipeline über HSL oder Druck-CMYK laufen, nutzen Sie stattdessen einen Multi-Format-Konverter.