Pro-Paletten-Extraktor — Palette in HEX, HSL, OKLCH, CMYK

Pro-Paletten-Extraktor — Farbpaletten für Designer und Frontend-Profis

Legen Sie ein beliebiges Bild ab und extrahieren Sie eine hochwertige Farbpalette mit 3 bis 16 dominanten Farben — mit allen Codes, die Sie brauchen: HEX, RGB, HSL, OKLCH und CMYK. Sortieren Sie nach Dominanz, Helligkeit oder Farbton, sehen Sie eine Prozentleiste der Präsenz jeder Farbe im Bild, zeigen Sie optional die Komplementärfarbe jedes Musters, und exportieren Sie Ihre Palette als CSS-Variablen, SCSS-Variablen, Tailwind-Konfigurationsschnipsel, JSON, einfache Hex-Liste oder als herunterladbares PNG-Bild.

Fünf Farbcodes pro Muster

Klicken Sie auf einen Code, um ihn zu kopieren. HEX ist am häufigsten im Web; RGB ist der rohe 8-Bit-Wert; HSL ist Farbton / Sättigung / Helligkeit, ideal für Tönungen und Schattierungen; OKLCH ist der moderne, perzeptuell uniforme Farbraum, der von CSS Color Level 4 unterstützt wird — perfekt für barrierefreie und harmonische Paletten; CMYK ist die Annäherung für Druckdesign (subtraktives Modell).

Sechs Exportformate

CSS-Variablen (:root { --color-1: ... }), SCSS-Variablen ($color-1, $color-2…), Tailwind-Schnipsel zum Einfügen unter extend.colors, JSON mit allen Codes und dem Dominanzprozentsatz, einfache Hex-Liste und ein herunterladbares PNG-Paletten-Bild in 1200×600 mit HEX- und RGB-Beschriftungen unter jedem Muster — ideal zum Teilen auf Dribbble oder in Designspezifikationen.

Sortiermodi & Harmonien

Dominanz: Farben mit der höchsten Präsenz zuerst — die fotografische Palette. Helligkeit: von der hellsten zur dunkelsten — nützlich für UI-Werteskalen. Farbton: in chromatischer Reihenfolge Rot → Orange → Gelb → Grün → Blau → Violett — nützlich für Regenbogenmuster und Verlaufsinspiration. Der Komplementär-Toggle zeigt ein kleines Dreieck des gegenüberliegenden Farbtons in der Ecke jedes Chips — perfekt, um Akzentfarben-Möglichkeiten zu erkennen.

Tipps

Für beste Ergebnisse verwenden Sie ein klares, gut beleuchtetes Foto mit starken visuellen Themen. Erhöhen Sie die Anzahl der Farben, wenn das Bild abwechslungsreich ist; verringern Sie sie für eine fokussierte „logoreife“ Palette. Die Dominanzleiste wird BERECHNET, NACHDEM das Bild auf etwa 200×200 herunterskaliert wurde (für Geschwindigkeit), und gruppiert Pixel in Clustern mit dem Median-Cut-Algorithmus — die gleiche Methode wie bei der klassischen Bildquantisierung.

Datenschutz

Dieses Tool läuft zu 100% in Ihrem Browser. Ihr Bild wird über die FileReader-API in den Browser-Speicher geladen und niemals an einen Server gesendet. Keine KI, kein externer Dienst, keine Bibliothek zum Herunterladen — nur reine JavaScript-Mathematik auf den Bildpixeln. Nichts wird gespeichert; beim Schließen des Tabs ist alles weg.

Einfache und schnelle Suche? Probieren Sie den Bildfarben-Extraktor aus.