Farbe wählen, Code kopieren, weiterarbeiten

Farbwähler, Verlauf-Editor und Bild-Pipette auf einer Seite. Kein Konto, keine Installation, kein Warten — wähle einen Ton und kopiere ihn als HEX, RGB, HSL oder HSV.

%
Farbseite öffnen

Farbcodes

HEX#0F37FF
RGBrgb(15, 55, 255)
HSLhsl(230°, 100%, 52.94%)
HSVhsv(230°, 94.12%, 100%)
CMYKcmyk(94.12%, 78.43%, 0%, 0%)
XYZxyz(19.61, 10.05, 95.5)
LABlab(37.93, 62.96, -98.45)
LCHlch(37.93, 116.86, 302.6°)

Trendfarben

Alle Trendfarben ansehen
#A5E3FE
#8E1025
#65E76F
#046B8B
#C37B3C
#C02148
#B5A9D0
#F29C8C
#2C3F44
#F04777
#3B89B0
#7CD0B2

Was drin ist

Pipette

Nimm Farben aus einem hochgeladenen Bild auf — oder von allem auf dem Bildschirm, wo der Browser es unterstützt. Datei auf die Seite ziehen, Pixel anklicken, Werte ablesen.

Formatumrechnung

Wechsle sofort zwischen HEX, RGB, HSL, HSV, CMYK, XYZ, LAB und LCH und kopiere jeden Wert direkt in CSS oder dein Designprogramm.

Verlauf-Editor

Stopps hinzufügen und auf der Leiste verschieben, zwischen linear und radial wechseln, Winkel und Deckkraft setzen, fertiges CSS kopieren.

Farbhistorie

Jede Farbe und jeder Verlauf bleibt in deinem Browser erhalten, damit du später darauf zurückkommen oder sie in einem anderen Projekt wiederverwenden kannst.

Harmonien und Varianten

Jede Farbseite zeigt Tints, Shades und sechs Harmonieschemata — und macht aus jedem davon mit einem Klick einen Verlauf.

Kostenlos und privat

Keine Bezahlschranke und kein Tracking dessen, was du auswählst. Hochgeladene Bilder werden im Browser gelesen und nirgendwohin gesendet.

Für wen es ist

Designer und Produktteams
Beim Entwerfen einer Oberfläche oder Markenpalette, beim Ausprobieren von Kombinationen und beim Kopieren des exakten CSS für einen Verlauf.
Illustration und Kunst
Zum Aufnehmen von Farben aus Fotos und Gemälden mit der Pipette und zum Planen weicher Verläufe im Verlauf-Editor.
Frontend-Entwicklung
Für einheitliche Farbwerte über ein Projekt hinweg und zum Auslesen von Werten aus einem bestehenden Design.
Wer Barrierefreiheit prüft
Zum Vergleichen einer Farbe über mehrere Modelle hinweg und zum Nachjustieren, bis der Kontrastwert die geforderte Schwelle erreicht.

So funktioniert es

  1. 1

    Farbe wählen

    Klicke irgendwo in die Sättigungsfläche und feile dann mit den Reglern für Farbton und Alpha nach. HEX, RGB und HSV aktualisieren sich mit.

  2. 2

    Aus einem Bild aufnehmen

    Zieh ein Bild auf die Seite oder wähle eine Datei, dann klicke auf das gewünschte Pixel. Die Codes erscheinen sofort.

  3. 3

    Verlauf bauen

    Klicke auf die Leiste, um einen Stopp hinzuzufügen, und zieh ihn an seine Position. Wechsle zwischen linear und radial und stelle den Winkel ein.

  4. 4

    Kopieren und weiterverwenden

    Kopiere den Wert oder die komplette CSS-Deklaration. Alles, was du auswählst, landet automatisch in deiner Historie.

Häufige Fragen

Ein kleines Werkzeug, das nicht im Weg steht

Angefangen hat es als internes Hilfsmittel: Wir wollten eine Farbe greifen, anpassen und weitermachen, ohne vorher ein schweres Designprogramm zu öffnen. Es ist bewusst eine einzige Seite, bewusst schnell, und es bleibt kostenlos.

Browser-Erweiterungen

Lieber Farben direkt von besuchten Seiten aufnehmen? Die Erweiterungen für Chrome und Edge legen eine Pipette in deine Symbolleiste, führen eine eigene Historie und öffnen dieses Werkzeug mit einem Klick.

Chrome Web Store öffnenMicrosoft Edge Add-ons öffnen