Tönungen (Richtung Weiß)
Schattierungen (Richtung Schwarz)
Harmonien
Klicke auf ein Farbfeld, um es als aktuelle Farbe zu laden.
Du startest mit einem Foto statt mit einem Farbwert? Der Bild-Farbwähler holt exakte Hex-Codes direkt aus einem Bild, genauso privat.
Farbformate erklärt
Dieselbe Farbe lässt sich auf viele Arten schreiben. Jedes Format ist ein anderer Satz von Koordinaten, der auf dieselbe sichtbare Farbe zeigt. Das Umrechnen ändert also nie die Farbe, nur ihre Beschreibung.
| Format | Sieht aus wie | Am besten für |
|---|---|---|
| HEX | #2563EB | Kompaktes CSS und Design-Übergabe |
| RGB | rgb(37, 99, 235) | Bildschirme, Canvas, Bilddaten |
| HSL | hsl(221, 83%, 53%) | Feinabstimmung von Farbton, Sättigung, Helligkeit |
| HSV / HSB | hsv(221, 84%, 92%) | Farbwähler in Design-Tools |
| OKLCH | oklch(0.546 0.215 263) | Wahrnehmungsgleiche Paletten, modernes CSS |
Häufig gestellte Fragen
Wie wandle ich eine HEX-Farbe in RGB um?
Eine HEX-Farbe wie #2563EB ist einfach RGB im Zahlensystem zur Basis 16. Teile sie in drei Paare (25, 63, EB) und rechne jedes von hexadezimal nach dezimal um, um Rot 37, Grün 99, Blau 235 zu erhalten, also rgb(37, 99, 235). Dieses Tool erledigt das sofort, sobald du eine Farbe tippst oder wählst, und zeigt auch den umgekehrten Weg.
Was ist der Unterschied zwischen HSL und HSV?
Beide beschreiben eine Farbe über den Farbton, aber HSL nutzt Sättigung und Helligkeit (Lightness), während HSV (auch HSB genannt) Sättigung und Hellwert (Value/Brightness) nutzt. Bei HSL ist 100 % Helligkeit immer Weiß; bei HSV ist 100 % Hellwert die kräftigste Version des Farbtons. HSL ist in CSS verbreitet; HSV taucht in den Farbwählern vieler Design-Tools auf.
Was ist OKLCH und warum sollte man es nutzen?
OKLCH ist ein moderner Farbraum (Helligkeit, Chroma und Farbton), der wahrnehmungsgleich aufgebaut ist, das heißt: gleiche numerische Schritte sehen wie gleiche visuelle Schritte aus. Das macht ihn weit besser als HSL, um Paletten zu bauen und die Helligkeit ohne unerwartete Farbtonverschiebungen anzupassen. Er wird in modernem CSS als Funktion oklch() unterstützt.
Was sind Tönungen und Schattierungen?
Eine Tönung ist deine Farbe mit Weiß gemischt, wodurch sie heller wird; eine Schattierung ist deine Farbe mit Schwarz gemischt, wodurch sie dunkler wird. Die Palette hier erzeugt von jedem eine Reihe, sodass du aus einer einzigen Grundfarbe eine gleichmäßige Hell-zu-Dunkel-Skala für Buttons, Hintergründe und Zustände bauen kannst.
Was ist eine Komplementärfarbe?
Eine Komplementärfarbe liegt auf dem Farbkreis direkt gegenüber deiner Farbe, 180 Grad entfernt, und ergibt den stärksten Kontrast. Analoge Farben liegen direkt daneben für einen harmonischen Look, und triadische Farben sind gleichmäßig um 120 Grad verteilt für ein ausgewogenes, lebendiges Schema. Der Abschnitt „Harmonien“ zeigt alle drei.
Ist das Farb-Tool privat?
Ja. Sämtliche Umrechnung und Palettenerzeugung passiert in deinem Browser mit reinem JavaScript. Nichts wird hochgeladen oder getrackt, und einmal geladen funktioniert die Seite offline.