🎨 Farb-Studio

Farbcodes finden, umrechnen und prüfen - HEX, RGB, HSL, Paletten und Kontrast-Check

💡 Wähle links eine Farbe - oder tipp einen Code (#057179, rgb(5,113,121), hsl(184,92%,25%)) bzw. einen Farbnamen wie „petrol" oder „himmelblau" ins Textfeld. Jeden Wert kopierst du mit einem Klick, Abstufungen und Kombis übernimmst du per Klick als neue Farbe. Das Aufnehmen einer Farbe direkt vom Bildschirm per Pipette ist in Chrome, Edge und ähnlichen Browsern möglich - in Firefox und Safari leider noch nicht, dort ist der Knopf ausgeblendet. Alles läuft lokal in deinem Browser.
🌗 Heller & Dunkler
🎡 Passende Farben
🖼️ Farben aus einem Bild
Bild hierher ziehen - oder klicken und auswählen. Das Bild wird nur lokal in deinem Browser ausgewertet, bis zu 10 Hauptfarben erscheinen darunter.
🆚 Kontrast-Check: Ist Text gut lesbar?
Große Schrift
Kleine Schrift wie im Fließtext

So liest du das Ergebnis: Je höher der Wert, desto besser hebt sich der Text vom Hintergrund ab. Für normalen Text sollten es mindestens 4,5:1 sein, für große Überschriften reichen 3:1 - und ab 7:1 ist die Kombination auch für kleine Schrift und schwächere Augen top. Zum Vergleich: Schwarz auf Weiß hat 21:1. Fahre mit der Maus über die Plaketten für Details.

Kopiert!

Gut zu wissen: Farbcodes und Kontraste

Ob Website, Präsentation oder Vereinsflyer: Irgendwann braucht jeder einen Farbcode. Das Farb-Studio zeigt dir jede Farbe in allen gängigen Formaten - HEX (z. B. #057179), RGB, HSL und CMYK - zum Kopieren mit einem Klick. Dazu kommen hellere und dunklere Abstufungen, passende Farb-Kombinationen, eine Bildschirm-Pipette und die Möglichkeit, ein eigenes Bild hineinzuziehen und seine bis zu 10 Hauptfarben zu erhalten.

Der Kontrast-Check prüft, ob Text auf einer Hintergrundfarbe gut lesbar ist - wichtig für barrierefreie Websites und Dokumente. Alles läuft lokal in deinem Browser.

Was ist ein HEX-Farbcode?

Die kompakteste Schreibweise einer Bildschirmfarbe: eine Raute plus sechs Zeichen, je zwei für Rot, Grün und Blau - #ff0000 ist reines Rot. HEX-Codes werden überall im Web, in Design-Programmen und in Office-Anwendungen verstanden.

Wann ist ein Kontrast gut lesbar?

Als Faustregel gilt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für große Überschriften - so empfiehlt es der internationale Standard für Barrierefreiheit (WCAG). Der Kontrast-Check rechnet das für deine Farbkombination aus und zeigt dir sofort, ob sie besteht.

Funktioniert die Pipette in jedem Browser?

Die Bildschirm-Pipette, mit der du Farben direkt vom Monitor aufnimmst, funktioniert in Chrome, Edge und ähnlichen Browsern. Firefox und Safari unterstützen die Funktion noch nicht - dort blendet das Tool den Knopf automatisch aus, alle anderen Funktionen laufen normal.