Zum Inhalt springen

Online-Farbwerkzeuge

Farbwähler, Paletten und Farbcodes an einem Ort

Wähle eine beliebige Farbe und kopiere ihren HEX-, RGB-, HSL- oder OKLCH-Code, erstelle Paletten mit Farbharmonien, extrahiere Farben aus einem Foto und prüfe den WCAG-Kontrast.

Kostenlos und ohne Anmeldung. Alles läuft in deinem Browser: Deine Bilder verlassen nie dein Gerät.

Farbwähler öffnenAlle Werkzeuge ansehen

Alles, was du für die Arbeit mit Farbe brauchst

Über 900 fertige Paletten

Filtere nach Farbe oder Stil (Pastell, Vintage, Neon …), speichere deine Favoriten und öffne jede Palette im Farbkreis, um sie anzupassen.

Paletten entdecken

Von der ersten Farbe bis zum fertigen Code

HEX
#E4572E
RGB
rgb(228, 87, 46)
HSL
hsl(14, 77%, 54%)
OKLCH
oklch(0.6372 0.1838 36.48)
CMYK
C0 M62 Y80 K11

1. Farbcodes in allen Formaten

Dieselbe Farbe wird je nach Einsatzort anders geschrieben. Teste hier direkt eine Farbe und kopiere das Format, das du brauchst.

HEX für das Web

Das gängigste Format in CSS und Designwerkzeugen: sechs Stellen nach der Raute.

RGB und HSL zum Anpassen

RGB trennt Rot, Grün und Blau von 0 bis 255. HSL arbeitet mit Farbton, Sättigung und Helligkeit, sodass sich Varianten ganz leicht erstellen lassen.

OKLCH für moderne Skalen

Das neueste CSS-Format: Helligkeitsänderungen werden gleichmäßig wahrgenommen, ideal für Farbskalen.

HEX in RGB umrechnenRGB in HEX umrechnen

2. Kombinationen, die funktionieren

Eine gute Palette ist keine Glückssache: Sie beruht auf den Beziehungen zwischen den Tönen im Farbkreis.

Farbharmonien

Analog für ruhige Ergebnisse, komplementär für Kontrast und triadisch für lebendige Designs.

Mischungen und Verläufe

Mische zwei Farben, um den Zwischenton zu finden, oder erstelle lineare, radiale und konische CSS-Verläufe.

Tailwind- und Material-Farben

Sieh dir die offiziellen Skalen an und teste sie in echten UI-Komponenten.

Farbkreis öffnenVerlauf erstellen

3. Gestalte für alle

Rund 8 % der Männer haben eine Form von Farbenblindheit, und viele Bildschirme werden mit Spiegelungen betrachtet. Farbe zu prüfen gehört zum Gestalten.

WCAG-Kontrast

Berechne das Verhältnis zwischen Text und Hintergrund und prüfe die Stufen AA und AAA für normalen und großen Text.

Farbenblindheit-Simulator

Sieh deine Palette so, wie Menschen mit Protanopie, Deuteranopie, Tritanopie oder Achromatopsie sie sehen.

Kontrast prüfenFarbenblindheit simulieren

Alle Werkzeuge von Matizly

12 kostenlose Werkzeuge, die in deinem Browser laufen und dir den Code zum Einfügen liefern.

  • FarbwählerWähle eine Farbe und kopiere Hex, RGB, HSL oder OKLCH mit Schattierungen.
  • FarbkreisEntdecke Harmonien auf einem interaktiven Rad und baue ausgewogene Paletten.
  • BildfarbenExtrahiere Farben aus Bildern und baue Paletten aus einem Foto.
  • FarbmixerMische zwei Farben und erhalte das Zwischenergebnis zum Kopieren.
  • CSS-VerläufeErstelle lineare, radiale oder kegelförmige CSS-Verläufe mit Live-Vorschau.
  • FarbpalettenEntdecke fertige Paletten und speichere Favoriten auf diesem Gerät.
  • FarbnamenDurchsuche HTML/CSS-Farbnamen und kopiere Hex, RGB und HSL sofort.
  • Tailwind-FarbenDurchsuche Tailwind-CSS- und Material-Design-Farbtabellen.
  • UI-FarbenTeste Tailwind-Farbfamilien an echten UI-Komponenten.
  • WCAG-KontrastPrüfe den WCAG-Kontrast zwischen Text und Hintergrund für barrierefreie UI.
  • FarbenblindheitSimuliere, wie deine Farben bei verschiedenen Farbsehschwächen wirken.
  • Hex ↔ RGBWandle Hex sofort in RGB um – für CSS, Design und Handoff.

Farbcodes nach Familie

Der Code eines typischen Tons jeder Farbe und Hunderte Paletten, die darauf aufbauen.

Alle 148 benannten HTML-Farben ansehen

Häufige Fragen

Öffne den Farbwähler oder gib die Farbe auf dieser Seite im Feld „Teste eine Farbe“ ein (zum Beispiel #E4572E, rgb(228, 87, 46) oder tomato), und du siehst ihren HEX-, RGB-, HSL-, OKLCH- und CMYK-Code. Liegt die Farbe in einem Foto, nutze den Bild-Farbwähler.

Beide beschreiben dieselbe Farbe. HEX nutzt sechs Hexadezimalziffern (#E4572E), RGB drei Zahlen von 0 bis 255 (rgb(228, 87, 46)). Du kannst verlustfrei zwischen beiden umrechnen.

Gehe von einer Grundfarbe aus und wende im Farbkreis eine Harmonie an: analog, komplementär, triadisch … Du kannst auch fertige Paletten durchstöbern oder eine aus einem Foto extrahieren.

Nein. Alle Werkzeuge von Matizly laufen direkt in deinem Browser, ohne Anmeldung.

Nein. Die gesamte Verarbeitung, auch die Bildanalyse, findet in deinem Browser statt. Wir senden und speichern nichts.

Ja. Aus dem Farbkreis und dem Farbwähler kannst du Tailwind-CSS-Variablen und Figma-Objekte exportieren oder einfach die Codes kopieren.

Ja. Der Kontrastprüfer berechnet das WCAG-Verhältnis zwischen zwei Farben und sagt dir, ob AA und AAA erfüllt sind.

Fang an, mit Farbe zu arbeiten

Alle Werkzeuge sind kostenlos und laufen in deinem Browser.

Paletten entdeckenFarbwähler öffnen