Farbton wählt die Farbfamilie
Bewege dich im Farbkreis durch Rot, Gelb, Grün, Cyan, Blau und Magenta. Bei null Sättigung ist der Farbton kaum sichtbar.
Kostenloses Browser-Farbwerkzeug
HSB-Farbwähler und HEX-RGB-Konverter
Wähle eine Farbe über Farbton, Sättigung und Helligkeit oder gib einen exakten HEX- beziehungsweise RGB-Wert ein. Alle Formate bleiben synchron und lassen sich direkt kopieren.
Aktualisiert am 18. Juli 2026
HSB-Farbwähler
Was macht dieser HSB-Farbwähler?
Der HSB-Farbwähler bearbeitet den Farbton von 0 bis 360 Grad sowie Sättigung und Helligkeit von 0 bis 100 Prozent. Er wandelt dieselbe Bildschirmfarbe in sechsstellige HEX- und RGB-Werte um, hält alle Eingaben synchron und liefert kopierfertige Ausgaben. Nutze ihn für Cartoon-Paletten, Design-Token, die Analyse einzelner Kanäle oder zur Vorbereitung eines Vergleichs im Toon Tone Delta-E-Rechner.
HSB · HEX · RGB
Farbe wählen und umrechnen
Bewege einen Regler, tippe einen Kanalwert ein, wähle eine Vorgabe oder schreibe einen HEX-Code. Vorschau und Formate folgen derselben Farbe.
Live-Farbvorschau#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
CSS-Variable
--toon-color: #2FB8D8;Cartoon-Farbvorgaben
Bearbeitbare Toon-Tone-Beispiele, keine offiziellen Franchise-Farbspezifikationen.
Die drei HSB-Kanäle lesen
HSB trennt die Farbentscheidung in Familie, Intensität und Lichtniveau. Ändere jeweils einen Kanal, um Unterschiede zu verstehen.
Sättigung steuert die Intensität
Weniger Sättigung führt Richtung Grau, mehr macht den Farbton kräftiger. Sie hellt nicht einfach nur auf oder dunkelt ab.
Helligkeit setzt die Lichtobergrenze
Null ergibt Schwarz. Höhere Werte zeigen Farbton und Sättigung, doch wahrgenommene Helligkeit hängt auch von Familie und Bildschirm ab.
Die passende Steuerung zur Aufgabe wählen
Die Formate beschreiben eine Farbe aus verschiedenen Blickwinkeln. Beginne mit der Entscheidung und nutze den passenden Kanal oder Messwert.
| Aufgabe | Bester Start | Danach prüfen |
|---|---|---|
| Rot, Grün, Blau oder andere Familie wählen | Farbton | Sättigung, dann Helligkeit |
| Eine Farbe kräftig oder gedämpft machen | Sättigung | Farbton beim Vergleich halten |
| Eine Farbe heller oder dunkler machen | Helligkeit | Kontrast im echten Kontext prüfen |
| Web- oder Design-Token kopieren | HEX oder RGB | Quelle und Farbprofil notieren |
| Unterschied zwischen zwei Farben messen | Delta-E-Rechner | Muster und HSB-Abstände ansehen |
Wie HSB eine Farbentscheidung ordnet
HSB steht für Farbton, Sättigung und Helligkeit. Der Farbton markiert die Position auf einem kreisförmigen Farbkreis, die Sättigung beschreibt den Abstand zu neutralem Grau und die Helligkeit steuert den maximalen Kanalpegel der Anzeige. Diese Trennung ähnelt einer natürlichen Bearbeitungsfolge: zuerst die breite Farbfamilie wählen, dann ihre Intensität bestimmen und zuletzt einstellen, wie hell oder dunkel der endgültige Ton sein soll. Alle drei Zahlen beschreiben gemeinsam eine digitale Farbe; keine davon ist für sich allein eine Qualitätsbewertung.
Dasselbe Modell heißt häufig HSV, wobei Value anstelle von Brightness verwendet wird. In gängigen digitalen Werkzeugen meinen HSB und HSV normalerweise dasselbe mathematische Modell. HSL ist anders: Seine Lightness-Achse setzt reine Farbtöne in die Mitte und mischt darüber in Richtung Weiß. Ein HSL-Prozentwert darf deshalb nicht unverändert in ein HSB-Feld übernommen werden. Diese Seite zeigt jeden Kanal zusammen mit HEX und RGB, damit unterschiedliche Begriffe, Skalen oder Rundungen zwischen Anwendungen leichter auffallen.
Eine zuverlässige Reihenfolge für Farbton, Sättigung und Helligkeit
Beginne mit dem Farbton, während Sättigung und Helligkeit hoch genug sind, um die Familie klar zu zeigen. Gehe zuerst in den roten, orangefarbenen, gelben, grünen, cyanfarbenen, blauen oder violetten Bereich, bevor du kleine Zahlenabweichungen verfolgst. Senke danach die Sättigung, bis die gewünschte Weichheit erreicht ist. Viele erinnerte Cartoon-Töne sind weniger gesättigt, als ihr Farbname vermuten lässt, besonders wenn Schatten, Kompression oder Nachbarfarben den Eindruck verändern. Stelle die Helligkeit zuletzt ein, damit eine dunkle Version des richtigen Farbtons nicht mit einer anderen Familie verwechselt wird.
Ändere bei präziser Arbeit jeweils nur einen Kanal und notiere den vorherigen Wert. Eine große gleichzeitige Bewegung kann attraktiv aussehen, verbirgt aber, welche Korrektur das Problem gelöst hat. Die synchronen HEX- und RGB-Felder liefern nach der visuellen Erkundung einen stabilen Übergabewert. Wenn bereits ein freigegebenes Token existiert, gib es direkt ein, statt es mit Reglern nachzubauen. Der Wähler verbindet Erkundung mit einem exakten Wert; er soll eine bekannte Quelle nicht durch eine neue Näherung ersetzen.
Was bei der Umrechnung von HEX, RGB und HSB geschieht
HEX und RGB codieren Rot-, Grün- und Blauanteile für digitale Anzeigen. Ein sechsstelliger HEX-Wert speichert zwei hexadezimale Zeichen je Kanal, während RGB dieselben Kanäle meist als Dezimalwerte von 0 bis 255 zeigt. Der Wähler rechnet diese Werte in HSB um, bearbeitet die HSB-Koordinaten und wandelt das Ergebnis wieder in eine darstellbare RGB-Farbe. Dreistellige HEX-Kürzel werden vorher erweitert. Kleine Unterschiede bei der Rückumrechnung können entstehen, wenn kontinuierliche Prozentwerte auf die in der Oberfläche sichtbaren ganzen Zahlen gerundet werden.
Eine Umrechnung entdeckt keinen offiziellen Namen, keine Markenspezifikation, keine Farbrezeptur und kein physisches Muster. Sie kalibriert auch keinen Monitor, errät kein eingebettetes Bildprofil und garantiert kein gleiches Aussehen auf einem anderen Gerät. Bewahre bei exakter Reproduktion das ursprüngliche Token auf und dokumentiere, ob der Wert aus einem Designsystem, einer Quelldatei oder einem Screenshot stammt. Komprimierte Bilder können bereits veränderte Pixel enthalten. Die Rechnung kann für die Eingabe korrekt sein, obwohl die Eingabe nicht die gesuchte verbindliche Farbe darstellt.
Den Farbwähler für Cartoon-Paletten und Illustration nutzen
Cartoons verwenden oft klare Farbfamilien, doch die einprägsame Identität eines Tons hängt von mehr als einem einfachen Namen ab. Gelb kann grünlich oder warm sein, Blau blass oder stark gesättigt und Rot in Richtung Koralle, Orange oder Magenta wandern. Nutze HSB, um eine kleine Familie verwandter Töne zu bauen, ohne den Ausgangsfarbton zu verlieren. Kopiere den HEX-Wert in deine Notizen und verändere Sättigung oder Helligkeit bewusst für Lichter, Schatten, Interface-Akzente oder leicht vergleichbare Studienmuster.
Die Vorgaben auf dieser Seite sind allgemeine Toon-Tone-Beispiele. Sie dienen als Lernstart, nicht als offizielle Codes für Studio, Figur, Franchise, Druckerei oder Produktlinie. Wenn ein Projekt eine freigegebene Palette hat, gilt diese Quelle. Halte beim Untersuchen eines Bildes den abgetasteten Bereich und die Bedingungen sichtbar. Ein kleiner Akzent, ein schattierter Frame und eine große flache Fläche können unterschiedliche repräsentative Werte liefern, obwohl Menschen sie mit demselben alltäglichen Farbnamen beschreiben.
Bildschirme, Kontrast und wahrgenommener Farbunterschied
Die Vorschau wird vom Browser erzeugt. Ihr Aussehen hängt von Bildschirmkalibrierung, Helligkeit, Farbmanagement, Blickwinkel, Umgebungslicht und benachbarten Farben ab. HSB-Helligkeit misst weder wahrgenommene Helligkeit noch einen barrierefreien Kontrast. Ein vollständig helles Gelb und Blau können denselben HSB-B-Wert haben und dennoch sehr verschieden hell wirken. Prüfe Text, Symbole, Fokusmarkierungen und Bedienelemente mit der geeigneten Kontrastmethode in der tatsächlichen Kombination aus Vorder- und Hintergrundfarbe.
Für den Vergleich zweier gespeicherter Farben dient der Delta-E-Rechner als getrennte Messung; lies die Zahl immer neben den sichtbaren Mustern. Delta E modelliert den gesamten wahrgenommenen Unterschied, während HSB-Kanäle verständliche Bearbeitungsrichtungen zeigen. Keines der Ergebnisse erzeugt eine universelle Bestehensgrenze für Marke, Barrierefreiheit, Druck oder Fertigung. Die endgültige Entscheidung folgt der maßgeblichen Spezifikation, einem kalibrierten Ablauf und realen Ausgabebedingungen statt einem bequemen Einzelwert aus einem allgemeinen Browserwerkzeug.
Von der Farberkundung zur Toon-Tone-Übung
Toon Tone nutzt Farbton, Sättigung und Helligkeit, weil sich Fehler einer erinnerten Farbe damit leichter diagnostizieren lassen. Vergleiche nach der Auflösung Ziel und Versuch Kanal für Kanal. Ist der Farbton nah, aber der Versuch zu laut, senke die Sättigung; stimmt die Familie, wirkt der Ton jedoch schwer, erhöhe die Helligkeit. Der eigenständige Wähler entfernt verborgenes Ziel und Punktzahl. So kannst du die Steuerung frei untersuchen, bevor du in eine Gedächtnisrunde mit verdeckter Referenz zurückkehrst.
Eine produktive Schleife bleibt kurz: Erkunde eine Farbe, kopiere ihre Werte, verstecke die Referenz und rekonstruiere den Eindruck im Spiel. Untersuche danach mit Auflösung oder Delta E die größte Abweichung. Sofortige Wiederholungen belegen keine langfristige Verbesserung, weil das Erinnern der Zahlen vorübergehend das visuelle Gedächtnis ersetzen kann. Mische in späteren Sitzungen unbekannte Farben ein und korrigiere eine wiederkehrende Tendenz, etwa gedämpfte Töne stets zu hell zu wählen, anstatt eine Antwortliste auswendig zu lernen.
Mit dieser Farbe weiterarbeiten
Fragen zum HSB-Farbwähler
Sind HSB und HSV dasselbe?
Meist bezeichnen sie dasselbe digitale Farbmodell. HSB nennt den dritten Kanal Brightness, HSV nennt ihn Value. Prüfe vor dem Übertragen die dokumentierten Bereiche.
Ist HSB dasselbe wie HSL?
Nein. Beide verwenden Farbton und Sättigung, doch HSL berechnet Lightness anders als HSB die Helligkeit. Gleiche Prozente können andere Farben erzeugen.
Kann ich dreistelliges HEX umrechnen?
Ja. Eine Kurzform wie #0af wird vor der Umrechnung zu #00AAFF erweitert. Sechs Stellen funktionieren mit oder ohne vorangestelltes #.
Lädt oder speichert das Werkzeug meine Farbe?
Es braucht weder Konto noch Server-Upload. Der Wähler läuft im Browser und kopiert bei Erlaubnis nur den angezeigten Text in die Zwischenablage.
Beweist HSB-Helligkeit barrierefreien Kontrast?
Nein. Barrierefreier Kontrast vergleicht die relative Leuchtdichte von Vorder- und Hintergrund. HSB-Helligkeit allein ist keine WCAG-Berechnung.
Warum zeigt ein anderer Wähler leicht andere Zahlen?
Werkzeuge können anders runden, HSL statt HSB nutzen, Farbmanagement anwenden oder mehr Dezimalstellen zeigen. Vergleiche den finalen HEX- oder RGB-Wert.