HEX zu RGB Konverter: HEX-Farben in RGB umwandeln | Kostenlos

A Die Pipette greift auf deinen gesamten Bildschirm zu, nicht nur auf den Browser. Klick das Symbol an, fahr über einen Pixel in Slack, Figma oder sogar einer PDF. Die Farbe wird beim Klicken übernommen. Einzige Einschränkung: Manche Betriebssysteme verlangen vorher die Freigabe der Bildschirmaufnahme.

A Ja, kurze HEX-Codes funktionieren einwandfrei. Unser Konverter erweitert #FFF automatisch zu #FFFFFF (Weiß). Das gilt für jeden 3-stelligen Code wie #F06, das zu #FF0066 wird. Du siehst sofort die vollständigen RGB-, HSL- und RGBA-Werte. Kurzform funktioniert nur, wenn jedes Paar identische Ziffern hat – #ABC ergibt #AABBCC.

A Klar. Marketingteams verwenden dieses Tool, um sicherzustellen, dass derselbe #E63946 Rotton in Web-Bannern, Social-Media-Posts und E-Mail-Vorlagen identisch bleibt. Füge einen HEX-Code ein, und der Konverter liefert die RGB-Werte für Photoshop, RGBA für Überlagerungseffekte und HSL für Farbtheorie-Anpassungen. Synchronisiere diesen einen HEX-Wert über alle Ausgaben, und deine Hero-Section-Verläufe weichen nicht einen einzigen Farbton ab. Tipp: Speichere die Ausgabewerte in deinem Markenleitfaden, damit niemand nach Augenmaß arbeitet.

A Fügen Sie Ihren HEX-Code in den Konverter ein und notieren Sie die RGB-Werte. Geben Sie diese in einen Kontrastprüfer – Sie brauchen sowohl Vorder- als auch Hintergrundfarbe. Für normalen Text unter 14pt fett streben Sie ein Verhältnis von 4,5:1 gegen Weiß oder Schwarz an. Unser Tool berechnet den Kontrast nicht selbst, liefert aber die exakten Zahlen, damit es schneller geht. WCAG AA verlangt 4,5:1, AAA 7:1. Tipp: Helles Grau wie #CCCCCC fällt gegen Weiß durch.

A Ja, #000000 ergibt exakt rgb(0, 0, 0) — reines Schwarz ohne Rot, Grün oder Blau. Der Haken: Monitore zeigen wegen Hintergrundbeleuchtung nie echtes Schwarz an. Dein dunkelstes Pixel könnte rgb(10, 10, 10) oder schlechter sein. Für OLED-Bildschirme nimm ruhig #000000 für tiefe Schwarztöne. Bei Standard-LCDs wirkt ein dunkles Grau wie #1a1a1a oft schwärzer als reines Schwarz.

A RGB liefert drei Werte: Rot, Grün und Blau. RGBA ergänzt einen vierten — Alpha — der die Deckkraft von 0 bis 1 steuert. Wenn du Ebenen stapelst, etwa eine Navigationsleiste über einem Hero-Bild, macht RGBA die Farbe durchscheinend. Unser Konverter zeigt beides, also füg #3498DB ein und du erhältst rgb(52, 152, 219) und rgba(52, 152, 219, 1). Die 1 am Ende bedeutet voll deckend. Für deckende Flächen brauchst du Alpha aber nicht — das ist unnötiger Ballast. Hebe es dir für Hover-Effekte oder modale Overlays auf. Praxistipp: Teste Alpha bei 0,7 und 0,5, um zu sehen, was weniger aufdringlich wirkt.

A Nein, funktional sind sie identisch, nur die Schreibweise unterscheidet sich. Unser Tool erweitert #fff automatisch zu #ffffff, also erhältst du in beiden Fällen dieselben RGB-Werte. Das funktioniert, weil Kurzformen jeden Buchstaben verdoppeln: #f wird ff, #c wird cc. Aber Vorsicht: #369 und #336699 sind NICHT dieselbe Farbe. Kurzform #369 wird zu #336699 erweitert, nicht zu #036090, wie man meinen könnte. Im Zweifel nimm immer die volle 6-stellige Codierung, das vermeidet Überraschungen.

A Nein. Füge einfach einen HEX-Code wie #FF5733 ins Eingabefeld ein und du bekommst sofort rgb(255, 87, 51), dazu HSL und RGBA. Alles läuft im Browser, du installierst nichts und es wird nichts hochgeladen. Viele Designer lassen den Tab neben Figma oder VS Code offen. Kleiner Tipp: als Lesezeichen speichern, du wirst ihn öfter brauchen als gedacht.

A Suchmaschinen strafen deine SEO wegen gemischter Farbwerte nicht ab. Browser können Stylesheets jedoch langsamer laden, wenn Syntaxfehler vorliegen. Unser Tool liefert saubere CSS-Werte wie rgb(241, 196, 15) direkt aus. Kopiere deinen Farbcode einfach einmal hinein und nutze den exakten String für deine Stylesheets. Browser verarbeiten diese numerischen Werte ohne Verzögerung.

A Tailwind erwartet durch Leerzeichen getrennte Zahlen wie 59 130 246 statt Kommas. Unser Tool liefert standardmäßig normale CSS-Strings. Du musst diese Kommas für moderne Utility-Klassen einfach entfernen. Entwickler übersehen diesen Syntaxwechsel beim Umstieg auf Framework-Configs oft. Schnapp dir die rohen Ziffern direkt aus unserem Ausgabefeld und spare dir lästige Fehlersuche.