Farb-Pipette
Online Farb-Pipette-Werkzeug, HEX/RGB/HSL-Format-Konvertierung, Farbpalette generieren
Was ist eine Farb-Pipette?
Ein Color Picker hilft, Farben für Design und Frontend-Entwicklung auszuwählen, zu prüfen und zwischen Formaten umzuwandeln. Dieselbe Farbe kann unterschiedlich notiert werden: HEX ist kompakt und in CSS üblich, RGB beschreibt Rot-, Grün- und Blaukanäle, HSL beschreibt Farbton, Sättigung und Helligkeit und ist oft leichter für Palettenanpassungen. Das Werkzeug ist nützlich, wenn Markenfarben in Code übertragen, Farbmodelle verglichen, kleine Paletten erstellt oder verwandte Farbfelder wie Komplementär- und Analogfarben geprüft werden. Farbauswahl ist nicht nur Ästhetik: Kontrast, Lesbarkeit, Barrierefreiheit, Druckausgabe und Bildschirmkalibrierung zählen. Wichtige UI-Farben sollten immer auf dem finalen Hintergrund und gegen Accessibility-Anforderungen getestet werden.
So geht's
So wird's benutzt
- Klicken Sie auf die Farbauswahl, um eine Farbe zu wählen, oder geben Sie einen Farbwert in das Eingabefeld ein
- Umwandlungsergebnisse in HEX-, RGB- und HSL-Format anzeigen
- Klicken Sie auf die Kopierschaltfläche neben einem Format, um den Farbwert zu kopieren
- Schauen Sie sich die Farbschemata für komplementäre, analoge und weitere Kombinationen an
- Prüfen Sie Schattierungen und Tönungen für dunklere und hellere Varianten der Farbe
Tipps zu Farben
- Prüfen Sie den Kontrast, bevor Sie eine Farbe für Text, Symbole oder Bedienelemente nutzen; optisch ansprechende Farben können die Anforderungen an die Barrierefreiheit dennoch verfehlen.
- Verwenden Sie HSL, wenn Sie Helligkeit oder Sättigung anpassen, und HEX oder RGB, wenn Sie Werte in CSS oder Design Tokens kopieren.
Anwendungsfälle
Technisches Prinzip
Alle Werte in diesem Tool leben im sRGB-Farbraum nach IEC 61966-2-1, der als Standardannahme für CSS-Hex-Literale, die rgb()-Funktion und jedes <canvas>-Readback gilt. HEX #RRGGBB ist ein gepacktes 24-Bit-Integer (8 Bit pro Kanal, 0–255); HEX #RRGGBBAA fügt ein Alpha-Byte hinzu; rgb()/rgba() legen dieselben Kanäle als Ganzzahlen oder Prozentwerte offen; hsl()/hsla() wechseln zu Zylinderkoordinaten mit Farbwert in Grad [0, 360), Sättigung und Helligkeit in [0 %, 100 %]. Die RGB-zu-HSL-Umrechnung bestimmt L = (max + min) / 2, S = (max - min) / (1 - |2L - 1|) bei nicht-null Chrominanz und H über ein sechssegmentiges stückweise definiertes Formel, das darauf abzielt, welcher Kanal das Maximum ist. Die inverse HSL-zu-RGB-Berechnung verwendet den Standardalgorithmus t = L < 0,5 ? L(1+S) : L+S-LS, bevor jeder Kanal zurück auf 0–255 skaliert wird. Der Live-Picker verwendet das native <input type="color">-Element, das auf unterstützenden Browsern auch die EyeDropper API bereitstellt (Chrome 95+, Edge 95+; noch nicht in Safari/Firefox per 2026). EyeDropper löst eine systemseitige Bildschirmabtastung aus und liefert einen sRGB-Hex-String, kann aber nicht innerhalb von Cross-Origin-Iframes oder DRM-geschützten Oberflächen sampeln. Die Palettenerzeugung rotiert den HSL-Farbwert: Komplementär ist +180 Grad, Triadisch ist +/-120 Grad, Analog ist +/-30 Grad, Gespalten-Komplementär ist +150 und +210 Grad. Aufhellungen und Abdunklungen schreiten in festen Schritten (typischerweise +10 % Richtung Weiß für Aufhellungen, -10 % Richtung Schwarz für Abdunklungen) bei konstantem Farbwert und Sättigung. Der Kontrast folgt WCAG 2.1 SC 1.4.3/1.4.6: Jeder Kanal wird mit der stückweisen sRGB-Übertragungsfunktion gamma-dekodiert (linearer Abschnitt unter 0,03928, Potenz 2,4 darüber), mit den Luminanzgewichten 0,2126R + 0,7152G + 0,0722B zur relativen Luminanz kombiniert, dann ergibt sich das Verhältnis (L_heller + 0,05) / (L_dunkler + 0,05). Die Schwellen sind 4,5:1 für AA-Normaltext, 3:1 für AA-Großtext und UI-Komponenten sowie 7:1 für AAA. Zu beachten: sRGB ist ein 8-Bit-pro-Kanal-Raum, daher können Wide-Gamut-Displays mit Display P3 (Apple) oder Rec. 2020 denselben Hex-Code mit sichtbar gesättigteren Primärfarben darstellen; für farbkritische Arbeiten über Geräte hinweg sollte die Farbe mit einem Profil versehen werden statt sich auf rohe RGB-Triplets zu verlassen.
- sRGB-Farbraum nach IEC 61966-2-1; 8 Bit pro Kanal, insgesamt 16.777.216 darstellbare Farben.
- HSL-zu-RGB verwendet t = L<0,5 ? L(1+S) : L+S-LS, dann per-Kanal hue2rgb()-Lookup.
- EyeDropper API erfordert Chrome/Edge 95+ und eine Benutzergeste; Cross-Origin-Iframe-Oberflächen sind blockiert.
- WCAG-Kontrast: sRGB gamma-dekodieren, Luminanz gewichten mit 0,2126R + 0,7152G + 0,0722B, dann (L1+0,05)/(L2+0,05).
- Komplementär = +180 Grad Farbwert, Triadisch = +/-120 Grad, Analog = +/-30 Grad, Gespalten-Komplementär = +150/+210 Grad.
- canvas.getImageData gibt Uint8ClampedArray-RGBA-Pixel zurück, erfordert aber Same-Origin-Canvas (keine getainteten Bilder).
- Display P3 / Rec. 2020-Wide-Gamut-Monitore rendern denselben Hex-Wert mit stärkeren Primärfarben – Profil für farbkritische Arbeiten vergeben.
Beispiele
Markenfarbe auswählen und in drei Formaten kopieren
Ausgewählt: Tailwind blue-600
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(217, 91%, 53%)
Die Form kopieren, die zum umgebenden Code passt. Alle drei Werte
beschreiben dieselbe sRGB-Farbe (IEC 61966-2-1, 8 Bit pro Kanal);
die Seite konvertiert mit der Standard-Mathematik RGB <-> HSL.Komplementärschema erzeugen
Basis: #2563eb (Blau)
Komplementär: #eb7a25 (Orange) Farbton +180°
Analog-1: #5a25eb (Violett) Farbton +60°
Analog-2: #256beb (Azurblau) Farbton -30°
Triadisch-1: #25eb56 (Grün) Farbton +120°
Triadisch-2: #eb2525 (Rot) Farbton -120°
Komplementär für kontraststarke Akzente, Analog für harmonische
Hintergründe und Triadisch für lebendige Illustrationen verwenden.
Helligkeit und Sättigung bleiben konstant; nur der Farbton rotiert.WCAG-Kontrast vor der Veröffentlichung prüfen
Vordergrund: #1f2937 (gray-800, relative Leuchtdichte 0,022)
Hintergrund: #ffffff (Weiß, relative Leuchtdichte 1,000)
Kontrastverhältnis: (1,000 + 0,05) / (0,022 + 0,05) = 14,5:1
Besteht WCAG AAA für normalen Text (>= 7:1) und großen Text (>= 4,5:1)
und erfüllt auch den Schwellenwert 3:1 für UI-Komponenten. Dieselbe
Prüfung für jedes Text-/Hintergrundpaar ausführen, das in Produktion
geht; die Seite berechnet die relative Leuchtdichte mit der
stückweise definierten sRGB-Übertragungsfunktion (Gamma-Dekodierung,
Gewichtung 0,2126R + 0,7152G + 0,0722B).FAQ
Welche Farbformate werden angezeigt?
HEX (#RRGGBB), RGB (rgb(R, G, B)) und HSL (hsl(H, S%, L%)). Die Seite zeigt zusätzlich komplementäre, analoge, triadische und Split-Komplementär-Farbschemata sowie Tönungen und Schattierungen basierend auf der gewählten Farbe.
Was ist der Unterschied zwischen HSL und HSV?
Beide zerlegen Farbe in Farbton (0–360°), Sättigung und eine helligkeitsähnliche Komponente. Die dritte Dimension von HSL ist Lightness (50 % am gesättigtsten, 0 % schwarz, 100 % weiß). Die dritte Dimension von HSV ist Value (100 % am gesättigtsten, 0 % schwarz, kein Weiß). HSL ist intuitiver für Tönungen und Schattierungen; HSV liegt näher daran, wie Künstler Farben mischen.
Wie genau sind die Farbumrechnungen?
HEX, RGB und HSL sind exakte mathematische Umrechnungen – sie beschreiben dieselbe sRGB-Farbe. Die Seite konvertiert mit Standardformeln zwischen ihnen, ohne Genauigkeitsverlust.
Sieht derselbe HEX-Wert auf jedem Bildschirm gleich aus?
Nein. sRGB ist der Standard-Farbraum im Web; Wide-Gamut-Displays (P3, Adobe RGB) ohne Farbmanagement können denselben HEX-Wert gesättigter darstellen. Auch die Kalibrierung variiert. Teste kritische Farben auf dem Zielgerät, besonders bei Branding-Arbeiten.
Wie werden die Farbschemata erzeugt?
Die Schemata rotieren den HSL-Farbton, während Sättigung und Lightness konstant bleiben. Komplementär ist +180°, triadisch +120° / +240°, analog ±30° und Split-Komplementär +150° / +210°. Tönungen verschieben die Lightness Richtung 100 % (Weiß), Schattierungen Richtung 0 % (Schwarz).
Ist der Color Picker nur für Bildschirmfarben?
Er arbeitet im sRGB-Farbraum, dem passenden Modell für Web und die meisten Consumer-Bildschirme. Die Umrechnungen sind standardisiert und für CSS- und UI-Design erprobt.
Wird etwas hochgeladen?
Nein. Die Seite ist reines Browser-JavaScript. Farbwerte werden weder gespeichert noch übertragen.