Farbwahler/ HEX · RGB · HSL
Farben wahlen, konvertieren und erkunden. Unterstutzt HEX, RGB, HSL, HSV mit Helligkeitsskalen und Harmonie-Paletten.
Farbwerte
Voreingestellte Farben
Helligkeitsskala
Farbharmonien
Komplementär
Analog
Triadisch
Hat dieses Tool Ihr Problem gelöst?
Haufig gestellte Fragen
Welche Farbformate werden unterstutzt?
Das Tool unterstutzt HEX (z.B. #6366f1), RGB (z.B. rgb(99, 102, 241)), HSL (z.B. hsl(239, 84%, 67%)) und HSV/HSB. Geben Sie eines dieser Formate in das Eingabefeld ein, und es wird automatisch erkannt und konvertiert.
Was ist die Pipette (EyeDropper)?
Mit der Pipetten-Schaltflache konnen Sie auf eine beliebige Stelle auf Ihrem Bildschirm klicken, um die Farbe dieses Pixels auszuwahlen. Dies verwendet die EyeDropper API des Browsers, die in Chrome, Edge und Opera verfugbar ist. Firefox und Safari unterstutzen sie noch nicht.
Was ist eine Helligkeitsskala?
Die Helligkeitsskala zeigt 9 Abstufungen Ihrer gewahlten Farbe von sehr dunkel (10% Helligkeit) bis sehr hell (90%), alle mit demselben Farbton und derselben Sattigung. Dies ist nutzlich fur den Aufbau konsistenter Farbpaletten im UI-Design.
Was sind Farbharmonien?
Farbharmonien sind Farbkombinationen, die visuell gut zusammenpassen. Komplementarfarben liegen gegenuber auf dem Farbkreis (hoher Kontrast). Analoge Farben sind Nachbarn (harmonisch). Triadische Farben sind drei gleichmassig verteilte Farben (lebendig und ausgewogen).
Was ist der Unterschied zwischen HSL und HSV?
Beide verwenden Farbton (H) und Sattigung (S), aber die dritte Komponente unterscheidet sich. HSL verwendet Helligkeit L (0%=Schwarz, 50%=reine Farbe, 100%=Weiss). HSV verwendet Hellwert V (0%=Schwarz, 100%=volle Helligkeit). HSV wird oft in Design-Tools wie Photoshop verwendet; HSL ist in CSS haufiger.
Wie verwende ich die Farben in CSS?
Kopieren Sie den HEX-Wert (z.B. #6366f1) fur die gangigste Verwendung. Verwenden Sie den RGB-Wert fur rgba() mit Transparenz: rgba(99, 102, 241, 0.5). Verwenden Sie den HSL-Wert, wenn Sie Helligkeit oder Sattigung programmatisch in CSS Custom Properties anpassen mochten.