Farbwähler

Wähle einen beliebigen Farbton aus dem visuellen Rad und konvertiere ihn mit diesem kostenlosen Color picker in die Formate hex, rgb und hsl. Für die Nutzung des Online-Tools ist keine Registrierung nötig.

Wie das Farbrad die Formate berechnet

Du klickst irgendwo ins visuelle Rad. Das Tool berechnet daraufhin die exakten Koordinaten im Raum aus Farbton, Sättigung und Helligkeit. Diese Werte wandern dann durch Standard-Konvertierungsmatrizen. Dabei kommen die äquivalenten Werte für andere Farbräume heraus. Du erhältst den rohen Hex-Code, das RGB-Triple und die HSL-Werte in einem Rutsch. Die komplette Berechnung läuft direkt und ohne Verzögerung in deinem Browser.

Das Modell behandelt Farbe als dreidimensionalen Zylinder. Der Farbton läuft um den kreisförmigen Rand herum. Die Sättigung bewegt sich vom grauen Zentrum zur leuchtenden Außenkante. Die Helligkeit skaliert von reinem Schwarz an der Basis bis zu Weiß an der Spitze. Verstellst du auch nur einen einzigen Slider, aktualisieren sich die anderen Werte automatisch. Sie sind mathematisch fest miteinander verknüpft. Kennst du deine Zielwerte schon, tippst du die Zahlen einfach direkt in die Eingabefelder.

Wann du einen kostenlosen Color picker brauchst

Designer nutzen es, um exakte Werte aus einem Mockup zu extrahieren. Etwa wenn ein Kunde exakt diesen einen speziellen Blauton sehen will. Frontend-Entwickler brauchen das Tool, um eine visuelle Entscheidung in eine gültige CSS-Variable zu übersetzen. Vielleicht suchst du aber auch nur einen Komplementärton für deine nächste Präsentationsfolie. Die Anwendung verbindet visuelle Intuition mit den harten Anforderungen deines Codes.

Beim Aufbau eines Design-Systems ist das Tool Gold wert. Du musst sicherstellen, dass deine Kontrastverhältnisse stimmen. Wähle eine Basisfarbe, schau dir den Hex-Wert an und schiebe den Regler für die Helligkeit manuell hin und her. Mach das so lange, bis der Text auf dunklem Hintergrund problemlos lesbar bleibt.

• Exakte Hex-Codes aus einem Brand-Guideline-Bild extrahieren.
• Komplementäre oder analoge Paletten für ein neues Website-Theme generieren.
• Einen RGB-Wert aus einem Screenshot in einen nutzbaren Hex-Code umwandeln.
• Textkontrast testen, indem du die Helligkeit anpasst, bis das Verhältnis passt.

Grenzen des Online Color picker

Das Tool arbeitet ausschließlich im Standard-Farbraum sRGB. Werte für Wide-Gamut-Displays wie Display-P3 oder Rec2020 kannst du hier nicht generieren. Designst du für High-End-Smartphones mit breiteren Gamuts, werden deine Hex- und RGB-Werte auf diesen Geräten clippen oder falsch gemappt.

Einen CMYK-Wert direkt einzutippen, um ihn auf dem Rad zu sehen, funktioniert ebenfalls nicht. Die Umrechnung von CMYK zu RGB hängt extrem stark vom ICC-Profil des jeweiligen Druckers ab. Das Tool nutzt hier eine generische Standard-Konvertierung. Für Webdesign reicht das völlig. Im professionellen Print-Bereich ist das aber viel zu ungenau. Lass dir im Zweifel immer physische Druckproofs geben.

So benutzt du den Color picker

1. Klicke irgendwo in das große Farbquadrat, um die Basis-Sättigung und Helligkeit festzulegen.
2. Ziehe den vertikalen Slider auf der rechten Seite, um den generellen Farbton anzupassen.
3. Feinjustiere die exakten Werte über die numerischen Eingabefelder für Hex, RGB oder HSL.
4. Kopiere den generierten Code direkt aus der Textbox neben deinem bevorzugten Format.
5. Verstelle den Opacity-Slider, wenn du einen RGBA- oder HSLA-Wert mit einem bestimmten Alpha-Kanal brauchst.

Vergleich der Farbformate

Unterschiedliche Umgebungen brauchen verschiedene String-Formate. Zu wissen, welches du nutzen musst, verhindert Rendering-Bugs.

Frequently asked questions

Ist dieser Color picker wirklich kostenlos?

Ja. Das Tool ist komplett kostenlos und du musst weder ein Konto erstellen noch dich einloggen. Du generierst so viele Farbcodes, wie du brauchst, ohne auf eine Paywall zu stoßen.

Wie wähle ich eine Farbe aus einem Bild aus?

Dieses spezielle Tool setzt auf das visuelle Rad und Slider statt auf eine Image-Dropper-Funktion. Um eine Farbe aus einem Foto zu bekommen, musst du zuerst den systemweiten Screen-Color-Picker deines Betriebssystems oder ein dediziertes Bildextraktions-Tool nutzen. Hast du den ersten Wert, fügst du den resultierenden Hex-Code hier ins Eingabefeld ein und passt ihn weiter an.

Warum sieht mein Hex-Code auf dem Handy anders aus?

Die Kalibrierung von Screens schwankt extrem zwischen den Geräten. Ein Hex-Code repräsentiert einen absoluten mathematischen Wert im sRGB-Raum. Das physische Display verändert aber, wie dieses Licht emittiert wird. Sieht die Farbe falsch aus, liegt das am Monitorprofil und nicht am generierten Code.

Kann ich hier CMYK zu Hex konvertieren?

Du kannst CMYK-Werte eingeben, aber der resultierende Hex-Code ist nur eine Näherung. CMYK ist ein subtraktives Farbmodell für Druckfarbe, während Hex ein additives Modell für Licht ist. Der Konvertierung fehlt das spezifische ICC-Profil des Druckers, das man für echte Präzision bräuchte.

Funktioniert das Tool in mobilen Browsern?

Ja. Das Interface ist responsiv und die Touch-Targets für die Slider und das Farbquadrat sind groß genug für die Fingereingabe. Du kopierst die generierten Codes in deine Zwischenablage, genau wie am Desktop. Auf kleineren Screens stapelt das Layout die Bedienelemente einfach vertikal, damit sich nichts überlappt.