Farbwahler

WCAG (Web Content Accessibility Guidelines) definiert Mindestkontrastverhältnisse zwischen Text und seinem Hintergrund, um die Lesbarkeit für Menschen mit Sehbehinderungen oder Farbenblindheit zu gewährleisten. AA ist das gesetzliche Minimum in den meisten Gerichtsbarkeiten: 4,5:1 für normalen Text (unter 18pt/14pt fett), 3:1 für großen Text. AAA ist der erweiterte Standard: 7:1 für normalen Text, 4,5:1 für großen Text. Etwa 8% der Männer und 0,5% der Frauen haben eine Form von Sehschwäche, weshalb die Einhaltung des Kontrasts für öffentlich zugängliche Produkte entscheidend ist. Der Prüfer hier testet Text- und Hintergrundfarben gleichzeitig und zeigt an, welche Kombinationen bestehen oder nicht.

Beide verwenden Hue (0-360 Grad) und Saturation, unterscheiden sich aber im dritten Kanal. HSL (Lightness) definiert 50% als reine gesättigte Farbe, 0% als Schwarz und 100% als Weiß — was es für CSS und Design intuitiv macht. HSV (Value/Brightness) definiert 100% Value als eine reine gesättigte Farbe und 0% als Schwarz — es gibt kein reines Weiß in HSV, es sei denn, die Sättigung ist 0%. Adobe Photoshop, Illustrator und die meisten nativen OS-Farbpicker verwenden HSV. CSS und Webdesign-Tools verwenden typischerweise HSL. Dieses Tool konvertiert zwischen beiden sofort.

Die angezeigten CMYK-Werte sind eine mathematische Konvertierung von RGB unter Verwendung der Standardformel. Sie sind eine nützliche Annäherung für digitale zu drucktechnische Workflows, aber die tatsächliche Druckfarbe hängt stark vom spezifischen Drucker, der Tinte, dem Papier und dem verwendeten ICC-Profil ab. Für professionelle Druckarbeiten sollten Sie die endgültigen Farben immer mit physischen Abzügen prüfen oder die Farbspezifikationen des Druckdienstleisters einsehen. Die CMYK-Werte hier funktionieren gut für erste Farbentscheidungen und Druck-Previews.

Klicken Sie auf den Bereich Presets und wählen Sie entweder Tailwind CSS oder Material Design. Jede Palette zeigt die vollständige Farbskala (z. B. Tailwind blue-50 bis blue-950 oder Material red 100 bis 900). Klicken Sie auf ein Farbfeld, um diese Farbe in den Picker zu laden und sofort deren HEX-, RGB-, HSL- und andere Werte zu erhalten. Dies ist nützlich beim Arbeiten innerhalb eines bestehenden Designsystems — Sie können das exakte Format kopieren, das Sie benötigen (z. B. den HSL-Wert von Tailwind blue-600), ohne danach woanders suchen zu müssen.

Gespeicherte Farben werden im localStorage Ihres Browsers gespeichert — sie bleiben zwischen den Sitzungen auf demselben Gerät und Browser erhalten, werden aber nicht an einen Server oder über Geräte hinweg synchronisiert. Sie werden ebenfalls gelöscht, wenn Sie Ihre Browserdaten löschen. Für Farben, die Sie langfristig behalten möchten, kopieren Sie die HEX-Werte in ein Designdokument oder speichern Sie sie in der Farblibary Ihres Designtools. Es ist kein Account oder Login erforderlich.

Ja. Sie können einen HEX-Code direkt in das HEX-Eingabefeld (mit oder ohne das # Vorzeichen) tippen oder einfügen, und der Picker sowie alle anderen Formatfelder werden sofort aktualisiert. Sie können auch die Regler für Hue, Saturation und Lightness direkt anpassen, wenn Sie eine bestimmte Eigenschaft ändern möchten, ohne die anderen zu beeinflussen. Dies ist nützlich, wenn Sie einen Hex-Code aus einer Designdatei haben und dessen Kontrast prüfen oder ihn in ein anderes Format konvertieren möchten.

Nein. Das gesamte Auswählen von Farben, die Formatkonvertierung, die Kontrastberechnungen und das Speichern von Paletten laufen vollständig in Ihrem Browser mittels JavaScript. Keine Farbwerte, keine gespeicherten Paletten und keine Nutzungsdaten werden an einen Server gesendet. Das Tool funktioniert vollständig offline, sobald die Seite geladen wurde.