Kostenlose Online-Design-Tools

Farb- und Design-Werkzeuge für Designer und Entwickler. Wähle Farben mit HEX/RGB/HSL/CMYK-Umrechnungen, erzeuge CSS-Verläufe, prüfe WCAG-Kontrastverhältnisse für Barrierefreiheit, erstelle Farbpaletten und miss auf dem Bildschirm.

Warum Online-Design-Tools nutzen?

Schnelle Farbentscheidungen, Barrierefreiheits-Checks und das Erzeugen von Verläufen sind ständige Aufgaben in Design und Frontend-Entwicklung. Mit Browser-Tools kannst du ein Kontrastverhältnis prüfen oder einen Verlauf erzeugen, ohne Figma, Photoshop oder eine separate Desktop-App zu öffnen. Unsere Design-Tools sind sofort verfügbar, präzise und immer kostenlos.

Barrierefreiheit und WCAG-Konformität

Die Web Content Accessibility Guidelines (WCAG) verlangen ein Mindestkontrastverhältnis zwischen Text- und Hintergrundfarbe: 4,5:1 für normalen Text und 3:1 für großen Text auf AA-Stufe. Unser Kontrastprüfer liefert sofort ein Bestanden/Nicht-bestanden-Ergebnis für alle WCAG-AA- und -AAA-Kriterien. Barrierefreie Produkte zu bauen ist nicht optional — der Kontrastprüfer erleichtert die Konformitätsprüfung schon während des Designs, nicht erst danach.

Referenz der Farbformate

HEX (#RRGGBB)

Das häufigste Format im Webdesign. Wird in CSS, HTML und Design-Tools verwendet. Leicht direkt in Code zu kopieren. Beispiel: #0070f3

RGB (R, G, B)

Gibt die Kanäle Rot, Grün und Blau von 0–255 an. In CSS als rgb(0, 112, 243). Gut, um Farbvarianten programmatisch zu erzeugen.

HSL (H, S%, L%)

Farbton (0–360°), Sättigung (0–100%), Helligkeit (0–100%). Am intuitivsten für Menschen. Hellere oder dunklere Varianten einer Farbe sind in HSL leicht zu erstellen. In CSS als hsl(211, 100%, 48%).

CMYK (C%, M%, Y%, K%)

Wird im Druckdesign verwendet. Kanäle Cyan, Magenta, Gelb und Key (Schwarz). Konvertiere deine Bildschirmfarbe in das nächste CMYK-Äquivalent zur Druckvorbereitung.

Häufig gestellte Fragen

Welches Kontrastverhältnis brauche ich für Barrierefreiheit?

WCAG AA — die von den meisten Barrierefreiheitsgesetzen geforderte Stufe — verlangt 4,5:1 für normalen Text und 3:1 für großen Text (18 pt/24 px normal oder 14 pt fett). AAA erhöht dies auf 7:1 und 4,5:1. Der Kontrastprüfer zeigt alle vier Schwellen gleichzeitig.

Welches Farbformat sollte ich in CSS verwenden?

Nutze HEX für statische Markenfarben, RGBA wenn du Transparenz brauchst, und HSL beim Erzeugen von Abstufungen oder Themes. Alle drei beschreiben dieselben Farben — der Farbwähler zeigt HEX, RGB, HSL und CMYK jeder Farbe gleichzeitig.

Sind die Design-Tools kostenlos?

Ja. Jedes Farb- und Design-Tool ist völlig kostenlos, ohne Konto oder Anmeldung. Sie laufen in deinem Browser als schnelle Alternative zum Öffnen von Figma, Photoshop oder einer Desktop-App für kurze Aufgaben.

Kann ich zwischen HEX, RGB, HSL und CMYK umrechnen?

Ja. Der Farbwähler wandelt jede gewählte Farbe gleichzeitig in alle vier Formate um, erzeugt eine Abstufungsreihe und zeigt das WCAG-Kontrastverhältnis gegenüber weißem und schwarzem Hintergrund.