Chromaverse
Beschreibung
Die Chromaverse ist eine ausgeklügelte Webanwendung, mit der Benutzer Farbpaletten basierend auf HEX-Werten, zufälligen Eingaben oder stimmungsbasierten Beschreibungen erstellen und vergleichen können. Benutzer können mehrere Paletten generieren, individuelle Farbdetails anzeigen, die Paletten herunterladen und sie in einer Seite an Seite vergleichen. Das Design ist elegant und professionell und bietet Schwebeffekte, Farbvorschau und erweiterte Download -Funktionen sowohl für Farbpaletten als auch für Gradienten.
Merkmale
- Mehrere HEX -Eingaben : Benutzer können mehrere HEX -Werte eingeben, die von Kommas getrennt sind, um individuelle Farbmuster und einen Gradienten zu generieren.
- Automatische Erkennung von Farben : Geben Sie eine beliebige Text- oder Stimmungsbeschreibung ein, und das System versucht, relevante Hex-Werte zu extrahieren oder Farben basierend auf der Eingabe zu erzeugen.
- Circle Color Display : Jede erzeugte Farbe wird in einem kreisförmigen Swatch zur besseren Visualisierung angezeigt.
- Gradientengenerierung : Ein Gradient aller erzeugten Farben wird automatisch bereitgestellt.
- Farbdownload : Laden Sie die gesamte Palette oder den generierten Gradienten als PNG -Bild herunter.
- Hex -Wertanzeige : Zeigen Sie einzelne Hex -Werte für jede Farbe in der Palette mit einer "Kopier" -Taste an, um den Hex -Code einfach zu kopieren.
- Schwebeffekte : Verbesserte Schwebeffekte machen die einzelnen Farben beim Überschwingen und verbessern die Benutzererfahrung.
- Farbauswahl : Es ist ein Farb-Picker-Tool verfügbar, mit dem Benutzer Farben manuell auswählen und ihre Hex-Werte in Echtzeit anzeigen können.
- Mehrere Paletten : Erzeugen Sie mehrere Paletten nacheinander. Jede Palette hat die Möglichkeit, sie zu löschen, mit einer Warnmeldung zur Bestätigung.
- Vergleichen Sie Paletten : Fügen Sie Paletten zu einer "Vergleichsliste" hinzu, um verschiedene Farbkombinationen in einer Seite an Seite visuell zu vergleichen.
- Alle Paletten entfernen und löschen : Benutzer können einzelne Paletten aus der Vergleichsliste entfernen oder alle Paletten mit einer Warnungsbestätigung vor dem Löschen löschen.
- Download Compare List : Laden Sie alle Paletten in der Vergleichsliste als einzelnes PNG -Bild herunter.
- Professionelles Styling : Fortgeschrittenes UI -Design mit modernen CSS -Techniken wie Glassmorphismus, reibungslosen Übergängen und Responsive Design sorgt dafür, dass die App poliert und professionell aussieht.
Wie man benutzt
- Geben Sie Hex -Werte ein : Im Feld Eingabe können Sie eine oder mehrere von Kommas getrennte Hex -Werte eingeben. Geben Sie optional Textbeschreibungen oder -stimmungen ein, und das System erstellt automatisch und generiert Farben für Sie.
- Palette generieren : Klicken Sie auf die Schaltfläche "Generieren", um eine Farbpalette zu erstellen. Farben werden als kreisförmige Farbfelder angezeigt, und es wird auch ein Gradient aller Farben gezeigt.
- Bewegen Sie sich über Farben : Bewegen Sie Ihre Maus über die einzelnen Farben, um verbesserte Vorschau zu sehen und die jeweiligen Hex -Codes anzusehen.
- Download -Optionen : Verwenden Sie die bereitgestellten Schaltflächen, um entweder die generierte Farbpalette oder den Gradienten als PNG -Datei herunterzuladen.
- HEX -Werte kopieren : Kopieren Sie einzelne Hex -Codes mit der Schaltfläche "Kopieren" neben jeder Farbe.
- Hinzufügen, um die Liste zu vergleichen : Klicken Sie auf "Zum Vergleichen von Liste hinzufügen", um die generierte Palette in einen Vergleichsabschnitt zu verschieben.
- Vergleichen und löschen Sie Paletten : Zeigen und Vergleichen Sie mehrere Paletten, entfernen Sie einzelne Paletten oder löschen Sie alle mit einer Bestätigungswarnung.
- Download Compare List : Laden Sie nach dem Vergleich von Paletten sie alle als ein einzelnes PNG -Bild als zukünftige Referenz herunter.
Installationsanweisungen
Klonen Sie das Repository :
git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator
Öffnen Sie index.html in Ihrem Browser:
Dateistruktur
color-palette-generator/
├── index.html # Main HTML file
├── style.css # CSS file for styling the UI
├── script.js # JavaScript file for functionality
Codeübersicht
Html
- Das HTML bietet die Struktur für Eingabefeld, Schaltflächen, Farbanzeigen, Vergleichslisten und Downloadoptionen.
- Es verwendet
<input> , <button> , <div> und <canvas> Elemente, um die Benutzeroberfläche zu strukturieren und mit JavaScript für die Funktionalität zu interagieren.
CSS
- Das CSS enthält fortschrittliche Stile für Schwebeffekte, Glassmorphismus, Unterstützung für den dunklen Modus, reaktionsschnelles Design und andere moderne UI -Elemente.
- Die Farben werden mit CSS -Variablen gesteuert, wodurch es einfach ist, zwischen hellen und dunklen Modi zu wechseln.
JavaScript
- JavaScript wird verwendet, um Farbpaletten aus der Benutzereingabe zu generieren, die Hex -Wert -Extraktion zu verarbeiten, die Vergleichsliste zu verwalten, das Herunterladen von Bildern zu ermöglichen und Interaktivität wie Schwebeffekte und Warnungen hinzuzufügen.
- Der Code nutzt Leinwand zum Rendern von Bildern zum Download- und Zwischenablettungs -API zum Kopieren von Hex -Werten.
Technologien verwendet
- HTML5 : Bietet die Struktur für die Anwendung.
- CSS3 : Verantwortlich für reaktionsschnelles Design, Schwebeffekte und den modernen Glasmorphenstil.
- JavaScript : Griff Logik für die Erzeugung von Paletten, das Extrahieren von Farben, das Herunterladen von Bildern und die Interaktivität.
- Canvas -API : Wird verwendet, um herunterladbare PNG -Bilder von Farbpaletten und Gradienten zu generieren.
Lizenz
Dieses Projekt ist unter der MIT -Lizenz lizenziert. Weitere Informationen finden Sie in der Lizenzdatei.
