Online-Farbstudio

Konvertieren, Paletten erstellen, Kontrast prüfen. Alles an einem Ort.

Farbe ändern
#

CSS-Code kopieren

Barrierefreiheit & Kontrast

Weißer Text

Beispiel-Überschrift

Wie lässt sich dieser Text auf dem Hintergrund lesen?

4.5:1
AA ✔ AAA ✘
Schwarzer Text

Beispiel-Überschrift

Wie lässt sich dieser Text auf dem Hintergrund lesen?

4.5:1
AA ✔ AAA ✘

Farbharmonien

Komplementär

Triadisch

Analog

Tönungen und Schattierungen

Tönungen Richtung Weiß
Schattierungen Richtung Schwarz

Farbräume und Konvertierungen

Was ist CMYK?

Steht für Cyan, Magenta, Yellow, Key (Schwarz). Während Bildschirme (RGB) Farben mit Licht erzeugen, erzeugen Drucker (CMYK) Farben mit Tinte. Prüfen Sie immer die CMYK-Werte, wenn Sie für den Druck entwerfen.

RGB vs. HEX

Technisch gesehen repräsentieren sie dasselbe. Der HEX-Code ist eine kürzere hexadezimale Darstellung der RGB-Werte. Browser verarbeiten beide mit der gleichen Geschwindigkeit.

Barrierefreiheit (Kontrastverhältnis)

Die Web Content Accessibility Guidelines (WCAG) erfordern ein bestimmtes Kontrastverhältnis zwischen Text und Hintergrund.
Level AA: Mindestens 4.5:1 Verhältnis (Für normalen Text).
Level AAA: Mindestens 7:1 Verhältnis (Höhere Lesbarkeit).

Dieses Tool berechnet automatisch, was besser lesbar ist, wenn weißer oder schwarzer Text auf der gewählten Farbe platziert wird.

Häufig gestellte Fragen

Was ist ein HEX-Code?

Ein HEX-Farbcode ist eine 6-stellige Hexadezimalzahl, die mit # beginnt und die Komponenten Rot, Grün und Blau darstellt.

Was ist der Unterschied zwischen RGB und HSL?

RGB definiert Farben als Mischung aus rotem, grünem und blauem Licht. HSL verwendet Werte für Farbton, Sättigung und Helligkeit.

Warum ist der Farbkontrast wichtig?

Ein gutes Kontrastverhältnis verbessert die Lesbarkeit von Texten und entspricht den Standards für Web-Barrierefreiheit (WCAG).

Tools (Sonstiges)

Cookie-Einstellungen

Wir verwenden Cookies und LocalStorage-Technologien, um Ihnen eine bessere Erfahrung zu bieten, den Website-Traffic zu analysieren und Ihre rechtlichen Einwilligungen (QR-Dateiuploads usw.) zu speichern.

Detaillierte Informationen