Skip to main content
chambe.dev

Farbkonverter & Kontrastprüfer

Kostenloses Farbkonverter-Tool. Zwischen HEX, RGB, HSL-Formaten konvertieren. WCAG-Kontrastverhältnisse prüfen und Farbpaletten generieren.

Kontrastprüfer

Beispieltext
7.25:1
Kontrastverhältnis
✓
WCAG AA
✓
WCAG AAA

Farbpalette

Konvertieren Sie Farben sofort zwischen verschiedenen Formaten. Ob Sie HEX für CSS, RGB für Design-Tools oder HSL für Farbmanipulation benötigen - dieses Tool bewältigt alle Konvertierungen.

Prüfen Sie Farbkontrastverhältnisse für WCAG-Barrierefreiheitskonformität und generieren Sie harmonische Farbpaletten basierend auf Ihrer ausgewählten Farbe.

Wie Sie dieses Tool verwenden

  1. 1 t
  2. 2 o
  3. 3 o
  4. 4 l
  5. 5 s
  6. 6 .
  7. 7 c
  8. 8 o
  9. 9 l
  10. 10 o
  11. 11 r
  12. 12 .
  13. 13 h
  14. 14 o
  15. 15 w
  16. 16 T
  17. 17 o
  18. 18 U
  19. 19 s
  20. 20 e
  21. 21 .
  22. 22 s
  23. 23 t
  24. 24 e
  25. 25 p
  26. 26 s

Anwendungsfälle

Web-Design

Konvertieren Sie Farben zwischen Formaten für CSS, Sass und Design-Tools.

Barrierefreiheit

Stellen Sie sicher, dass Text- und Hintergrundfarben die WCAG-Kontrastanforderungen erfüllen.

Branding

Erstellen Sie konsistente Farbpaletten mit geeigneten Farbtonvariationen.

Entwicklung

Konvertieren Sie schnell Farbformate beim Arbeiten auf verschiedenen Plattformen.

Häufig gestellte Fragen

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX verwendet hexadezimale Notation (#RRGGBB), RGB gibt Rot-, Grün-, Blauwerte (0-255) an, und HSL verwendet Farbton (0-360), Sättigung und Helligkeit in Prozent. Sie sind verschiedene Wege, dieselben Farben darzustellen.

Was ist das WCAG-Kontrastverhältnis?

WCAG (Web Content Accessibility Guidelines) definiert Mindestkontrastverhältnisse für die Lesbarkeit von Text. AA erfordert 4,5:1 für normalen Text, AAA erfordert 7:1. Höhere Verhältnisse sind barrierefreier.

Warum HSL statt RGB verwenden?

HSL ist intuitiver für Farbanpassungen. Sie können leicht hellere/dunklere Variationen durch Ändern der Helligkeit erstellen, oder mehr/weniger gesättigte Versionen, während Sie denselben Farbton beibehalten.

Wie erstelle ich eine Farbpalette?

Beginnen Sie mit einer Basisfarbe und variieren Sie die Helligkeit, um Farbtöne zu erstellen. Die Palette unten zeigt 10 Variationen von hell (50) bis dunkel (900), ähnlich den Tailwind CSS-Farbskalen.

Welches Kontrastverhältnis sollte ich anstreben?

Für Fließtext streben Sie mindestens 4,5:1 (AA) an. Für großen Text (18px+ oder 14px+ fett) ist 3:1 akzeptabel. Für beste Barrierefreiheit streben Sie 7:1 (AAA) an, wenn möglich.