# Farbaufhellung/Abdunklung Helligkeit von Farben anpassen und Variationen erstellen > Kanonische Seite: https://elysiatools.com/de/tools/color-lighten-darken - **Kategorie:** Design - **Schlagwörter:** farbe, aufhellen, abdunkeln, helligkeit, anpassen, tönung, schatten, farbanpassung, luminanz ## Überblick Mit dem Farbaufhellungs- und Abdunklungstool passen Sie die Helligkeit Ihrer Farben präzise an und generieren im Handumdrehen harmonische Farbpaletten für Ihre Designprojekte. ## Eingaben - **Grundfarbe** (color) - **Anpassungstyp** (select) - **Anpassungsbetrag (%)** (range): Anpassungsbetrag für Farbhelligkeit (-100% bis +100%) - **Verlaufsstufen** (number): Gilt nur wenn "Verlauf (volle Palette)" ausgewählt ist. Steuert wie viele Farben im Verlauf generiert werden (2-20 Stufen) - **Komplementärfarben Einbeziehen** (checkbox) - **Relative Sättigung Erhalten** (checkbox) ## Wann verwenden - Erstellung von konsistenten Hover-Effekten für Schaltflächen durch leichtes Abdunkeln einer Grundfarbe. - Generierung einer vollständigen Farbpalette für UI-Elemente basierend auf einer einzelnen Markenfarbe. - Anpassung von Farbtönen für Barrierefreiheit, um Kontraste in Texten oder Hintergründen zu optimieren. ## Funktionsweise - Wählen Sie Ihre Grundfarbe über den Farbwähler aus. - Bestimmen Sie den Anpassungstyp, wie Aufhellen, Abdunkeln oder die Erstellung eines kompletten Verlaufs. - Stellen Sie den Anpassungsbetrag in Prozent ein, um die Intensität der Änderung festzulegen. - Aktivieren Sie bei Bedarf zusätzliche Optionen wie Komplementärfarben oder die Beibehaltung der Sättigung. ## Anwendungsfälle - Erstellung von UI-Design-Systemen mit abgestuften Farbtönen für Buttons und Hintergründe. - Optimierung von Kontrastverhältnissen für eine bessere Lesbarkeit von Texten auf farbigen Flächen. - Schnelle Generierung von Schatten- und Highlight-Varianten für Icons und grafische Elemente. ## Häufig gestellte Fragen ### Kann ich mehrere Farbabstufungen gleichzeitig erstellen? Ja, wählen Sie dazu den Anpassungstyp 'Verlauf' und legen Sie die Anzahl der gewünschten Stufen fest. ### Was bewirkt die Option 'Relative Sättigung Erhalten'? Diese Funktion sorgt dafür, dass die Farbsättigung beim Ändern der Helligkeit proportional angepasst wird, um ein natürliches Aussehen zu bewahren. ### Wie genau kann ich die Helligkeit anpassen? Über den Schieberegler für den Anpassungsbetrag können Sie die Helligkeit in 5%-Schritten zwischen -100% und +100% präzise steuern. ### Werden auch Komplementärfarben generiert? Wenn Sie die entsprechende Checkbox aktivieren, berechnet das Tool automatisch die passenden Komplementärfarben zu Ihrer Grundfarbe. ### In welchem Format erhalte ich die Ergebnisse? Das Tool generiert die angepassten Farben direkt als HTML-Vorschau, die Sie für Ihre CSS- oder Design-Workflows kopieren können. ## Ähnliche Tools - [Farbkomplement](https://elysiatools.com/de/tools/color-complement): Komplementärfarben finden und harmonische Farbschemata mit triadischen, tetradischen und analogen Farbverhältnissen erstellen - [Farbton-Verschiebung](https://elysiatools.com/de/tools/color-hue-shifter): Farbton verschieben und Variationen mit Drehung im/zur Uhrzeiger erstellen - [Farbumkehrer](https://elysiatools.com/de/tools/color-inverter): Farben umkehren und negative Versionen mit RGB-, HSL- und Helligkeitsumkehrmethoden erstellen - [Farbsättigung/Entsättigung](https://elysiatools.com/de/tools/color-saturate-desaturate): Farbsättigung anpassen und Sättigungsvariationen erstellen - [Farbton-Generator](https://elysiatools.com/de/tools/color-shade): Generieren Sie dunklere Variationen einer Farbe durch Hinzufügen von Schwarz, um reiche Töne für Tiefe und Kontrast im Design zu schaffen - [Farbton-Generator](https://elysiatools.com/de/tools/color-tint): Generieren Sie hellere Variationen einer Farbe durch Hinzufügen von Weiß, wodurch helle und luftige Töne für frische Design-Ästhetik entstehen - [Neonfarben-Generator](https://elysiatools.com/de/tools/neon-colors): Generieren Sie lebendige, leuchtende Neonfarben mit hoher Sättigung und Helligkeit, die auffällige elektrische Lichteffekte erzeugen, perfekt für digitale Displays und modernes Design - [Analoge Farben](https://elysiatools.com/de/tools/color-analogous): Harmonische analoge Farbschemata mit benachbarten Farben auf dem Farbkreis generieren, die einheitliche und friedliche Kombinationen schaffen ## Beispiele - [Farbcode-Beispiele](https://elysiatools.com/de/samples/color-code): Sammlung von Farbcodes in verschiedenen Formaten (Hex, RGB, HSL, benannte Farben) für Validierungstests - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Android Kotlin Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-kotlin): Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung ## Verwandte Inhalte - [Werkzeuge für zugängliche Farbsysteme](https://elysiatools.com/de/hubs/color-design-tools): Erstellen Sie ein wiederverwendbares Farbsystem mit Farbtransformation, Harmonien, Kontrast- und Farbsehprüfungen sowie dokumentierten Tokens. - [Workflow fur Farbsysteme und CSS-Effekte](https://elysiatools.com/de/hubs/design-generate): Eine Palette ableiten, zugangliche Farbbeziehungen aufbauen, Tokens erzeugen und konsistente CSS-Effekte auf echte UI-Zustände anwenden.