Ein JavaScript Tool um Informationen zu einer Farbe, Shades und Harmoniefarben anzuzeigen.
Find a file
2025-08-28 12:41:49 +02:00
colorcontrast.html inital colorcontrast.html 2025-08-28 12:41:49 +02:00
index.html Update index.html 2024-11-27 22:44:27 +01:00
logo.png Update logo.png 2024-11-27 22:40:18 +01:00
README.md README.md aktualisiert 2025-08-28 12:40:56 +02:00

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

Demo ansehen

Installation

  1. Repository klonen

    git clone https://github.com/DeinBenutzername/farbinfo-anzeige.git
    
  2. In das Projektverzeichnis wechseln

    cd farbinfo-anzeige
    
  3. Anwendung starten

    • Öffne die index.html Datei in deinem bevorzugten Webbrowser.

Verwendung

  1. 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
    • Sie können auch das Eingabefeld leer lassen, um automatisch den Inhalt Ihrer Zwischenablage zu verwenden.

  2. Anzeigen klicken:

    • Drücken Sie die Eingabetaste oder klicken Sie auf den Button Anzeigen, um die Farbinformationen zu generieren.
  3. 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.