CodeKitHubWas ist dieses Tool?
Ein Farbwähler wandelt eine visuelle Auswahl – diesen Blauton, genau dieses Pixel in einem Logo – in numerische Codes um, die die Software versteht. Dieselbe Farbe hat mehrere gleichwertige Bezeichnungen: HEX (#3b82f6) dominiert im CSS und bei der Designübergabe, RGB (59, 130, 246) entspricht der Art und Weise, wie Bildschirme und Code Farben darstellen, und HSL (217°, 91 %, 60 %) beschreibt Farbton, Sättigung und Helligkeit auf eine Weise, die für Menschen nachvollziehbar ist.
Der zweite Teil des Tools ist eine Farbpipette. Laden Sie einen Screenshot, ein Logo oder ein Foto hoch und klicken Sie auf eine beliebige Stelle, um die Farbe unter dem Cursor zu ermitteln – die gängige Methode, um die Frage „Welche Farbe ist das genau?“ zu beantworten. Sofern der Browser die EyeDropper-API unterstützt, wird die native Vergrößerungslupe verwendet; in anderen Browsern liest das Tool den Pixelwert aus einer Canvas-Kopie des Bildes aus. In beiden Fällen erfolgt die Verarbeitung lokal: Das Bild wird zu keinem Zeitpunkt hochgeladen.
Warum sollte man es nutzen?
- Drei Formate auf einmal: Jede ausgewählte Farbe wird gleichzeitig als HEX, RGB und HSL angezeigt, jeweils mit einer Schaltfläche zum Kopieren per Mausklick – ganz ohne separaten Konvertierungsschritt.
- Aus einem Bild auswählen: Laden Sie ein beliebiges Bild hoch und klicken Sie darauf, um die genaue Pixelfarbe zu ermitteln – ideal, um Markenfarben aus einem Logo zu extrahieren oder eine Farbe aus einem Screenshot abzugleichen.
- Verwendet, sofern verfügbar, die native Pipette des Browsers mit Vergrößerungsfunktion und greift ansonsten auf die präzise Pixelauslesung aus dem Canvas zurück.
- Ein Live-Vorschau-Farbfeld zeigt die aktuelle Farbe auf einen Blick an, sodass Sie die Auswahl vor dem Kopieren überprüfen können.
- Kostenlos, sofort und vollständig lokal: Farben werden berechnet und Bilder in Ihrem Browser geladen – es wird nichts hochgeladen, gespeichert oder protokolliert.
Anleitung
- Wählen Sie über das Farbfeld eine Farbe aus oder fügen Sie einen Wert direkt ein bzw. bearbeiten Sie ihn.
- Um eine Farbe aus einem Bild zu entnehmen, laden Sie ein Bild hoch und klicken Sie auf die Stelle, deren Farbe Sie auswählen möchten.
- Lesen Sie die HEX-, RGB- und HSL-Werte ab, die zusammen mit einer Live-Vorschau-Farbprobe angezeigt werden.
- Klicken Sie auf die Schaltfläche „Kopieren“ neben dem gewünschten Format – HEX für CSS, RGB oder HSL für den Code.
Beispiel
Eingabe
Clicking the blue area of an uploaded logoAusgabe
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Alle drei Zeilen beschreiben dieselbe Farbe. Verwenden Sie HEX in Stylesheets und Design-Tools, RGB, wenn der Code Kanalwerte erwartet, und HSL, wenn Sie hellere oder dunklere Varianten ableiten möchten, indem Sie nur die letzte Zahl ändern.
Welches Farbformat für welchen Auftrag?
Modernes CSS akzeptiert alle drei Formate überall dort, wo Farben zulässig sind; daher ist die Wahl eine Frage des Arbeitsablaufs und nicht der Kompatibilität. Teams standardisieren in der Regel HEX in Design-Tokens und verwenden dann HSL, während sie Variationen ausprobieren – man verändert die Helligkeit um 10–15 Punkte, um einen brauchbaren Hover-Zustand zu erhalten, ohne den Farbton zu verändern.
| Format | Beispiel | Am besten geeignet für |
|---|---|---|
| Hex | #3b82f6 | CSS, Design-Tools, Farben im Chat teilen und Spezifikationen |
| Rot, Grün, Blau | Rot, Grün, Blau (59, 130, 246) | Code zur Bearbeitung von Kanälen, zum Zeichnen auf der Leinwand und zur Transparenz mit rgba() |
| HSL | hsl(217, 91 %, 60 %) | Heller-, dunkler- und Hover-Varianten erstellen, Farbpaletten zusammenstellen |
Von der ausgewählten Farbe bis zum fertigen CSS
Das Auswählen einer Farbe ist in der Regel der erste Schritt bei der Gestaltung. Wenn Sie dieselbe Farbe in anderen Farbsystemen benötigen – beispielsweise CMYK für den Druck oder einen OKLCH-Wert für CSS mit großem Farbraum –, übernimmt der Farbkonverter dort, wo dieser Farbwähler aufhört.
Die ausgewählte Farbe fließt oft direkt in einen visuellen Effekt ein: Der „Box Shadow Generator“ verwendet einen HEX-Wert für realistische Schatten, und mit dem „Border Radius Generator“ erstellte Karten mit abgerundeten Ecken runden das Erscheinungsbild ab.
→ Farbkonverter · Box-Shadow-Generator · Border-Radius-Generator
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX, RGB und HSL?
Es handelt sich um drei Darstellungsformen desselben Farbmodells. Bei HEX werden die Kanäle Rot, Grün und Blau in sechs Hexadezimalziffern (#3b82f6) zusammengefasst; dies ist die gängigste Form in CSS und Design-Tools. RGB listet dieselben drei Kanäle als Dezimalzahlen von 0 bis 255 auf. HSL drückt die Farbe als Farbton (0–360°), Sättigung und Helligkeit aus – was weitaus intuitiver ist, wenn man „dieselbe Farbe, nur heller“ haben möchte. Bei der Umrechnung zwischen diesen Formaten ändert sich die Farbe nie.
Wie funktioniert das Auswählen einer Farbe aus einem Bild?
Das hochgeladene Bild wird auf eine unsichtbare Leinwand in Ihrem Browser gezeichnet. Wenn Sie darauf klicken, liest das Tool die Rot-, Grün- und Blauwerte des Pixels an genau dieser Position aus und wandelt sie in HEX, RGB und HSL um. In Browsern, die die EyeDropper-API unterstützen (Chrome und Edge auf dem Desktop), öffnet sich stattdessen eine native Lupe, sodass Sie mit Pixelgenauigkeit an einer beliebigen Stelle auf dem Bildschirm eine Farbe auswählen können.
Wird mein Bild irgendwo hochgeladen?
Nein. Das Bild wird direkt von Ihrem Browser geöffnet und lokal aus einem Canvas gelesen; es werden zu keinem Zeitpunkt Dateien oder Farbdaten übertragen oder gespeichert. Sie können die Seite laden, offline gehen, und sowohl der Farbwähler als auch die Bild-Pipette funktionieren weiterhin – was die Nutzung für noch nicht veröffentlichte Designs und interne Screenshots sicher macht.
Warum stimmt die ausgewählte Farbe nicht genau mit dem überein, was ich auf dem Bildschirm sehe?
Zwei häufige Gründe. Anti-Aliasing: Pixel an den Rändern von Text und Formen werden mit dem Hintergrund vermischt, sodass ein Klick, der ein Pixel daneben liegt, eine Zwischenfarbe ergibt – nehmen Sie stattdessen eine Probe aus der einheitlichen Mitte eines Bereichs. Farbmanagement: JPG-/PNG-Dateien mit ungewöhnlichen Farbprofilen können auf verschiedenen Bildschirmen leicht unterschiedlich dargestellt werden; das Tool gibt den in der Datei gespeicherten Pixelwert an – genau den Wert, den Sie für Ihre Designarbeit benötigen.
Welches Format sollte ich für CSS übernehmen?
HEX ist die sicherste Standardwahl – jeder Browser und jedes Tool akzeptiert dieses Format. Verwenden Sie HSL, wenn Sie Hover- oder Dark-Mode-Varianten erstellen möchten, da durch die Anpassung nur der Helligkeitskomponente Farbton und Sättigung konsistent bleiben. RGB ist vor allem dann nützlich, wenn Farben im Code aus numerischen Kanälen zusammengesetzt werden oder wenn Transparenz hinzugefügt wird; dabei ist rgba(59, 130, 246, 0,5) übersichtlicher als ein achtstelliger HEX-Wert.