Farbschema-Generator

Unterstützt die Erstellung verschiedener Farbschemata, Farbauswahl aus Bildern sowie die Generierung von CSS-Verläufen und Schatteneffekten – einzeln oder im Stapel.

Fehler melden

Browser-Ausführungsmodus: Ihre Daten werden in Ihrem Browser verarbeitet und nicht auf den Server hochgeladen.

Geschwindigkeit und Stabilität: Die Verarbeitungsgeschwindigkeit hängt von Ihrem Gerät und Browser ab. Für große Stapelaufgaben kann die Desktop-Version stabiler sein.

Tool wird geladen, bitte warten...

Wenn das Online-Tool nicht lädt oder läuft, versuchen Sie das Desktop-Tool. https://tools.yikeaigc.com/

Tool-Nutzung

Zur alten Version zurückkehren

Einfarbmodus

Farben stapelweise wählen

1Grundfarbe wählen

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Farbschema wählen

Farbanzahl:

Sättigung: 0%

Helligkeit: 0%

3Farbschema

4CSS-Verlauf

Verlaufstyp:

Winkel: 90°

5Schatteneffekt

Weichzeichner: 20px

Ausdehnung: 0px

Deckkraft: 40%

Vorschau

6Farben aus Bild extrahieren

Zum Hochladen klicken oder Bild hierher ziehen

Unterstützt JPG, PNG, GIF, WebP

1Mehrere Bilder hochladen

Zum Hochladen klicken oder mehrere Bilder hierher ziehen

Mehrfachauswahl möglich, Hauptfarben werden je Bild automatisch extrahiert

Farben pro Bild:

Farbschema:

In die Zwischenablage kopiert

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Anleitung

Anleitung zur Software-Nutzung

Grundfarbe auswählen:Wählen Sie eine Grundfarbe mit dem Farbwähler aus oder geben Sie direkt einen HEX-Farbwert ein (z. B. #4f46e5). Sie können auch auf die Schaltfläche „Zufällige Farbe“ klicken, um Inspiration zu erhalten. Das Tool zeigt RGB- und HSL-Farbwerte in Echtzeit an.
Farbschema auswählen:
- Monochromes Farbschema:Gleicher Farbton, Variationen durch Anpassung von Sättigung und Helligkeit
- Analoges Farbschema:Benachbarte Farben auf dem Farbkreis, natürlich und harmonisch
- Komplementäres Farbschema:Zwei gegenüberliegende Farben auf dem Farbkreis, starker Kontrast
- Geteilte Komplementärfarben:Die Grundfarbe und die Farben auf beiden Seiten ihrer Komplementärfarbe
- Triadisches Farbschema:Drei gleichmäßig auf dem Farbkreis verteilte Farben
- Quadratisches Farbschema:Vier gleichmäßig verteilte Farben
- Tetradisches Farbschema:Zwei Paare von Komplementärfarben mit klarer Abstufung
Parameter anpassen:
- Anzahl der Farben:Wählen Sie aus, ob 3, 5, 7 oder 9 Farben generiert werden sollen
- Sättigung anpassen:Ziehen Sie den Schieberegler, um die Gesamtsättigung zu erhöhen oder zu verringern
- Helligkeit anpassen:Ziehen Sie den Schieberegler, um die Gesamthelligkeit zu erhöhen oder zu verringern
CSS-Verlauf generieren:Wählen Sie einen linearen oder radialen Verlaufstyp aus und passen Sie den Winkelparameter an, um direkt verwendbaren CSS-Verlaufscode zu generieren.
Schatteneffekt generieren:Passen Sie Unschärferadius, Ausbreitungsradius und Transparenzparameter an, um CSS-Code für einen Schatten auf Basis der aktuellen Grundfarbe zu generieren.
Farben aus einem Bild extrahieren:Nach dem Hochladen eines Bildes extrahiert das Tool automatisch die Hauptfarbtöne. Sie können auf eine beliebige Stelle im Bild klicken, um eine Farbe präzise aufzunehmen und die extrahierte Farbe als Grundfarbe zu verwenden.
Batch-Farbaufnahmemodus:Wechseln Sie zur Registerkarte „Batch-Farbaufnahme“, laden Sie mehrere Bilder hoch, legen Sie die Anzahl der pro Bild zu extrahierenden Farben und den Erweiterungsmodus für das Farbschema fest, klicken Sie auf „Batch-Extraktion starten“ und laden Sie nach Abschluss eine ZIP-Datei mit allen Ergebnissen herunter.
Kopieren und exportieren:Klicken Sie auf eine beliebige Farbkarte, um den Farbwert zu kopieren. Klicken Sie auf die Schaltfläche „Farbschema exportieren“, um eine JSON-Datei mit vollständigen Farbschema-Informationen herunterzuladen.

Häufige Fragen

Antwort:Monochrome Farbschemata eignen sich für schlichte, elegante Designs; analoge Farben eignen sich für Naturthemen und Verlaufshintergründe; Komplementärfarben eignen sich für auffällige Designs mit starkem Kontrast; triadische Farben eignen sich für lebendige Kinderprodukte und künstlerische Arbeiten; quadratische und tetradische Farbschemata eignen sich für komplexe Benutzeroberflächen und Datenvisualisierungen. Wählen Sie das passende Schema entsprechend Ihrem Designziel.

Antwort: Laden Sie im Bereich „Farben aus Bild extrahieren“ ein Bild hoch. Das Tool analysiert es automatisch und extrahiert 8 Hauptfarbtöne. Sie können auf eine extrahierte Farbe klicken, um sie auszuwählen, und anschließend auf die Schaltfläche „Ausgewählte Farbe als Grundfarbe verwenden“ klicken, um auf Basis dieser Farbe ein vollständiges Farbschema zu erstellen.

Antwort: Klicken Sie im Bereich des Verlaufscodes auf die Schaltfläche „Kopieren“ und fügen Sie den Code in Ihre CSS-Datei ein. Wenden Sie ihn anschließend auf das Element an, das einen Verlaufs-Hintergrund erhalten soll. Es werden lineare und radiale Verläufe unterstützt; bei linearen Verläufen kann die Winkelrichtung angepasst werden.

Antwort: Die nach Abschluss der Batch-Verarbeitung heruntergeladene ZIP-Datei enthält drei Dateien: palette-summary.json (JSON-Zusammenfassung aller Farbschemadaten), palettes.css (direkt verwendbare CSS-Variablendefinitionen), preview.html (visuelle Vorschauseite). So lassen sich die extrahierten Farbschemata bequem in verschiedenen Szenarien verwenden.

Antwort: Sättigung steuert die Intensität einer Farbe: Eine höhere Sättigung macht Farben lebendiger, eine niedrigere macht sie weicher und grauer; Helligkeit steuert, wie hell oder dunkel eine Farbe ist: Eine höhere Helligkeit macht Farben heller, eine niedrigere macht sie dunkler. Durch Anpassen dieser beiden Parameter lässt sich die gesamte Farbwirkung fein abstimmen.

Antwort: Unterstützt werden gängige Bildformate wie JPG, JPEG, PNG, GIF, WebP usw. Es wird empfohlen, Bilder mit kräftigen Farben und hohem Kontrast zu verwenden, um genauere Ergebnisse bei der Extraktion der Hauptfarben zu erzielen. Die Bildverarbeitung erfolgt vollständig lokal und wird nicht auf den Server hochgeladen.

Antwort: Klicken Sie einfach direkt auf eine beliebige Farbkarte oder ein Farbfeld; der entsprechende HEX-Farbwert wird automatisch in die Zwischenablage kopiert, und am unteren Rand der Seite wird der Hinweis „In die Zwischenablage kopiert“ angezeigt. In den Batch-Ergebnissen können Sie ebenfalls auf den Farbbalken klicken, um den entsprechenden Farbwert zu kopieren.