Ein JavaScript Tool um Informationen zu einer Farbe, Shades und Harmoniefarben anzuzeigen.
| colorcontrast.html | ||
| index.html | ||
| logo.png | ||
| README.md | ||
JS Color Analysis
Eine interaktive Webanwendung zur Anzeige von Farbinformationen und Farbpaletten basierend auf Benutzereingaben oder zufälligen Pastellfarben.
Funktionen
- Farbinformation: Zeigt HEX-, RGB- und HSL-Werte der eingegebenen Farbe an.
- Ansichtbeispiele: Demonstriert die Farbe als Text- und Hintergrundfarbe.
- Shades, Tints und Tones: Generiert dunklere (Shades), hellere (Tints) und entsättigte (Tones) Variationen der Farbe.
- Harmonische Farben: Zeigt harmonische Farben wie Komplementär-, Analog-, Triadisch- und Tetradisch-Farben an.
- Interaktive Slider: Passen Sie die Winkel für harmonische Farben an, um verschiedene Farbkombinationen zu erkunden.
- Monochromatische Farben: Generiert eine Palette von monochromatischen Farben.
- Kopieren in die Zwischenablage: Klicken Sie auf eine Farbfläche, um den HEX-Wert in die Zwischenablage zu kopieren.
- Zufällige Pastellfarben: Beim Laden werden zufällige Pastellfarben angezeigt, um die Erkundung zu beginnen.
Demo
Installation
-
Repository klonen
git clone https://github.com/DeinBenutzername/farbinfo-anzeige.git -
In das Projektverzeichnis wechseln
cd farbinfo-anzeige -
Anwendung starten
- Öffne die
index.htmlDatei in deinem bevorzugten Webbrowser.
- Öffne die
Verwendung
-
Farbe eingeben:
-
Geben Sie einen Farbwert in das Eingabefeld ein. Unterstützte Formate sind:
- HEX:
#ff0000,ff0000,#f00,f00 - RGB:
rgb(255,0,0) - Kommagetrennt:
255,0,0
- HEX:
-
Sie können auch das Eingabefeld leer lassen, um automatisch den Inhalt Ihrer Zwischenablage zu verwenden.
-
-
Anzeigen klicken:
- Drücken Sie die Eingabetaste oder klicken Sie auf den Button Anzeigen, um die Farbinformationen zu generieren.
-
Ergebnisse erkunden:
- Farbinformationen: Sehen Sie sich die detaillierten Informationen der eingegebenen Farbe an.
- Ansichtbeispiele: Erfahren Sie, wie die Farbe als Text- und Hintergrundfarbe wirkt.
- Shades, Tints und Tones: Erkunden Sie verschiedene Variationen der Farbe.
- Harmonische Farben: Nutzen Sie die Slider, um verschiedene harmonische Farben basierend auf unterschiedlichen Winkeln zu sehen.
- Monochromatische Farben: Sehen Sie eine Palette von Farben mit unterschiedlichen Helligkeitswerten.
- Farbwerte kopieren: Klicken Sie auf eine Farbfläche, um den HEX-Wert in die Zwischenablage zu kopieren.
Browser-Unterstützung
Bitte beachte, dass der Zugriff auf die Zwischenablage in einigen Browsern nur über HTTPS und mit entsprechenden Berechtigungen möglich ist. Stelle sicher, dass du die Anwendung über einen Webserver aufrufst oder die entsprechenden Browserberechtigungen erteilst.