colorize
ColorKit
CK

Farbwähler

Farbe interaktiv auswählen und Werte in HEX, RGB oder HSL sofort kopieren.

Was ist ein Farbwähler?

Ein Farbwähler ist ein digitales Werkzeug, mit dem Sie Farben visuell abstimmen und unmittelbar in mathematische Farbcodes übersetzen können. Unverzichtbar für Frontend-Entwickler und Designer für einheitliche UI-Farbwelten.

Funktionen im Überblick

  • Intuitive Farbauswahl: Ziehen Sie den Cursor über das Farbfeld, um Helligkeit und Sättigung fließend anzupassen.
  • Sofortiges Kopieren: Übernehmen Sie formatierte HEX-, RGB- und HSL-Strings mit einem Klick in CSS oder Tailwind.
  • 100% lokale Privatsphäre: Alle Farbberechnungen laufen clientseitig im Browser ohne Datenübertragung an externe Server ab.

Verwandte Werkzeuge

Farben direkt aus Bildern oder Screenshots extrahieren: Bild-Farbwähler. Barrierefreiheit und Lesbarkeit überprüfen: WCAG-Kontrastprüfer.

Wissensdatenbank & FAQ

Häufig gestellte Fragen

Direkte Antworten und Lösungen zu häufigen Fragen, technischen Herausforderungen und Webstandards.

Wie berechne ich Komplementär-, Analog- oder Triadenfarben aus einem HEX-Code?expand_more
Farbharmonien basieren auf Rotationswinkeln auf dem 360-Grad-Farbkreis:
  • Komplementär: Farbton um 180° drehen (z. B. (hue + 180) % 360). Ein reines Blau bei 240° harmoniert mit einem warmen Orange bei 60°.
  • Analog: Um ±30° drehen. Ein Grün bei 120° passt perfekt zu Limettengrün (90°) und Türkis (150°).
  • Triadisch: Um +120° und +240° drehen, um ein ausgewogenes gleichseitiges Dreieck mit hohem Kontrast zu erhalten.
Was bedeutet ein 8-stelliger HEX-Code (#RRGGBBAA) und wie wird er gelesen?expand_more
Ein 8-stelliger HEX-Code (z. B. #4F46E580) enthält einen Alphakanal (Transparenz). Die ersten 6 Zeichen codieren Rot, Grün und Blau (#RRGGBB), während die Stellen 7 und 8 die Deckkraft von 00 (0 % / transparent) bis FF (100 % / deckend) festlegen. 80 entspricht hexadezimal 128 in Dezimal, was exakt 50 % Deckkraft darstellt.
Was ist der Unterschied zwischen HSV (HSB) und HSL bei Farbwählern?expand_more
Beide leiten sich von RGB ab:
  • HSV / HSB (Hue, Saturation, Value/Brightness): Definiert Helligkeit anhand des intensivsten Farbkanals. Standard im 2D-Farbwählerquadrat in Grafiktools wie Photoshop und Figma.
  • HSL (Hue, Saturation, Lightness): Verwendet eine symmetrische Achse (0 % Schwarz, 50 % reine Farbe, 100 % Weiß) und entspricht direkt der CSS-Funktion hsl().
Wie erstelle ich ansprechende Schattierungen (Tints & Shades) einer Markenfarbe?expand_more
Für saubere Nuancen ohne Grauschleier:
  • Aufhellungen (Tints): Farbton beibehalten, Helligkeit in Richtung 100 % steigern und Sättigung minimal reduzieren, um grelle Pastelltöne zu vermeiden.
  • Abdunkelungen (Shades): Helligkeit gegen 0 % senken und den Farbton leicht in kühlere Nuancen (Indigo/Marine) rotieren, statt nur stumpfes Schwarz beizumischen.