Tooleem
BilderDieses Tool läuft im Browser. Dateien und Texte werden nicht an unsere Server gesendet.

Farbwähler

Farbe wählen oder HEX-Code einfügen und sofort HEX, RGB und HSL erhalten, dazu eine passende Palette und einen Kontrastcheck mit Weiß und Schwarz.

Beispieltext
Auf diesem Hintergrund ist dunkle Schrift besser lesbar. Kontrast zu Weiß: 3,68:1 · zu Schwarz: 5,71:1.
Vorgeschlagene Palette (zum Auswählen auf eine Farbe klicken)

Die Farben werden vollständig im Browser berechnet, es werden keine Daten gespeichert. Praktisch für Websites, CSS, Präsentationen und Canva.

Tool teilenWhatsApp
Weiter geht's

Weiteres Tool ausprobieren

Passend zu diesem Tool ausgewählt

Der Farbwähler übersetzt eine Farbe in alle gängigen Formate. Eine Farbe im Auswahlfeld anklicken oder einen HEX-Code wie #3B82F6 einfügen, und sofort erscheinen die Werte in HEX, RGB und HSL, eine abgeleitete Palette (heller, dunkler, komplementär und ein sanfter Hintergrundton) sowie ein Kontrastcheck gegen weiße und schwarze Schrift nach der WCAG-Formel. Jeder Wert lässt sich mit einem Klick kopieren und direkt in CSS, ein Designprogramm, eine Präsentation oder Canva übernehmen. Die Umrechnung läuft im Browser, ohne Anmeldung und ohne gespeicherte Daten.

01

So funktioniert das Tool

  1. 01Farbe wählen oder HEX-Code einfügenIm Farbfeld eine Farbe anklicken oder einen Code wie #3B82F6 eintippen. Die Kurzform #0F0 wird ebenfalls erkannt.
  2. 02Werte in HEX, RGB und HSL ablesenDer Code wird sofort umgerechnet. Darunter stehen die Palette und die Kontrastwerte zu Weiß und Schwarz.
  3. 03Wert kopieren und verwendenEin Klick auf einen Wert kopiert ihn in die Zwischenablage, auch als fertige CSS-Variable.
02

Beispiele

  • #3B82F6, ein ruhiges BlauGut für Buttons und Links. In RGB ist das rgb(59, 130, 246); weiße Schrift erreicht darauf ein Kontrastverhältnis von etwa 3,7:1.
  • #22C55E, ein frisches GrünPassend für Erfolgsmeldungen und Bestätigungen. Über den HSL-Wert lässt sich die Helligkeit gezielt feinjustieren.
  • #F97316, ein kräftiges OrangeEin typischer Farbton für einen Call-to-Action-Button. Die Palette liefert dazu eine hellere und eine dunklere Variante für Hover-Zustände.
03

HEX, RGB und HSL im Vergleich

HEX ist ein sechsstelliger Code aus drei Hexadezimalpaaren (#3B82F6) und das übliche Format in HTML und CSS. RGB beschreibt dieselbe Farbe über die Anteile von Rot, Grün und Blau zwischen 0 und 255. HSL zerlegt sie in Farbton (0 bis 360 Grad), Sättigung und Helligkeit in Prozent und eignet sich besonders, um eine Farbe aufzuhellen, abzudunkeln oder ihre Komplementärfarbe zu finden.

04

So entsteht die Palette

Die hellere und die dunklere Variante entstehen durch Verschieben der HSL-Helligkeit bei gleichem Farbton. Die Komplementärfarbe liegt auf dem Farbkreis um 180 Grad gedreht gegenüber. Der sanfte Hintergrund ist eine stark aufgehellte Version derselben Farbe, die sich für Flächen hinter Text eignet.

05

Was der Kontrastcheck misst

Der Kontrast wird nach der WCAG-Formel aus der relativen Leuchtdichte berechnet, jeweils gegen reines Weiß und reines Schwarz. WCAG 2.1 verlangt für normalen Fließtext mindestens 4,5:1 und für großen Text 3:1. Wer zwei beliebige Farben gegeneinander prüfen möchte, nutzt den Farbkontrast-Prüfer.

06

Häufige Fragen

Wie finde ich den HEX-Code einer Farbe heraus?

Die Farbe im Auswahlfeld anklicken; der HEX-Code steht sofort darunter und lässt sich mit einem Klick kopieren. Umgekehrt zeigt ein eingefügter HEX-Code die passenden RGB- und HSL-Werte.

Was ist der Unterschied zwischen HEX, RGB und HSL?

Alle drei beschreiben dieselbe Farbe. HEX ist die kompakte Schreibweise für Webseiten, RGB nennt die Rot-, Grün- und Blauanteile, HSL den Farbton, die Sättigung und die Helligkeit.

Kann ich die Werte direkt in CSS verwenden?

Ja. Der HEX-Wert und die fertige CSS-Variable (etwa --color: #3B82F6;) lassen sich direkt in ein Stylesheet einfügen.

Was bedeutet ein Kontrast von 4,5:1?

Es ist das Verhältnis der Leuchtdichten von Schrift und Hintergrund. 4,5:1 ist der WCAG-Mindestwert für normalen Text der Stufe AA; 7:1 erfüllt die strengere Stufe AAA.

Warum sieht dieselbe Farbe auf verschiedenen Bildschirmen anders aus?

Bildschirme unterscheiden sich in Kalibrierung, Helligkeit und Paneltechnik. Der Farbcode bleibt identisch, die Darstellung kann leicht abweichen.

Wird die gewählte Farbe irgendwo gespeichert?

Nein. Die Berechnung findet nur im Browser statt; nach dem Neuladen der Seite ist die Auswahl zurückgesetzt.

Fehlt ein Tool oder ist etwas kaputt?Wir bauen Tooleem nach dem, was wirklich gebraucht wird. Schreiben Sie uns, was fehlt oder nicht funktioniert.
Nachricht senden