Farbabstufungen
Erzeuge Abstufungen einer Farbe: hellere Stufen mit Weiß gemischt, dunklere mit Schwarz und gedämpfte Töne mit Grau. Wähle 5, 8 oder 10 Stufen von jeder Art und kopiere alle als CSS-Variablen. Kostenlos, in deinem Browser, und nichts wird gesendet.
So erzeugst du hellere und dunklere Farbstufen
- 1Gib deine Farbe ein oder wähle sie mit dem Farbwähler aus
- 2Wähle die Zahl der „Stufen“: 5, 8 oder 10
- 3Wähle unter „Mischen in“ sRGB oder OKLab
- 4Kopiere einzelne Farben oder klicke „Alles als CSS-Variablen kopieren“
- Reihen mit Aufhellungen, Schattierungen und Abtönungen
Was das Tool macht
- Drei Reihen auf einmal.Aufhellungen mit Weiß, Schattierungen mit Schwarz und Abtönungen mit Grau, alle aus derselben Farbe
- Gleichmäßige Stufen.Bei 10 Stufen läuft die Mischung von 9 % bis 91 %. Keine Stufe ist reines Weiß, Schwarz oder deine Farbe
- Nichts wird gesendet.Die Stufen werden von deinem Browser auf deinem eigenen Gerät berechnet
Was du tun kannst
- Von einer Farbe ausgehen, eingegeben als #hex, rgb(), hsl(), lab(), oklch(), CSS-Farbname oder Tailwind-Name
- 5, 8 oder 10 Aufhellungen, Schattierungen und Abtönungen bekommen, unter jeder ihr Anteil an Weiß, Schwarz oder Grau
- In „sRGB (wie die meisten Designprogramme)“ mischen, der Voreinstellung, oder in „OKLab (gleichmäßige Stufen fürs Auge)“
- Jede Stufe mit einem Klick als HEX kopieren
- Alle Stufen auf einmal als CSS-Variablen in einem :root-Block kopieren, benannt --tint-1, --shade-1, --tone-1 und so weiter
Gut zu wissen
- Abtönungen werden mit einem mittleren Grau gemischt, #808080
- sRGB gibt die Stufen, die auch die meisten Designprogramme geben. OKLab lässt die Stufen gleichmäßiger wirken
- Die Stufen sind keine Tailwind- oder Material-Skala. Dafür gibt es eigene Paletten-Generatoren für Tailwind und Material
Fragen
Was ist der Unterschied zwischen Aufhellung, Schattierung und Abtönung?
Eine Aufhellung ist eine Farbe mit Weiß gemischt, eine Schattierung eine Farbe mit Schwarz und eine Abtönung eine Farbe mit Grau. Das Tool macht alle drei aus deiner Farbe.
Wie bekomme ich hellere und dunklere Versionen einer HEX-Farbe?
Gib den HEX-Wert ein. Die Aufhellungen sind die helleren Versionen, die Schattierungen die dunkleren. Jede Stufe hat einen Kopierknopf.
Kann ich die Stufen als CSS-Variablen verwenden?
Ja. „Alles als CSS-Variablen kopieren“ kopiert einen :root-Block mit jeder Stufe, beim voreingestellten Blau etwa --tint-1: #3971ed;.
Werden meine Farben irgendwohin gesendet?
Nein. Alles wird von deinem Browser auf deinem eigenen Gerät berechnet. Mit deiner Farbe geht keine Anfrage hinaus.
Weitere Tools in „Web & Code“
Diese Seite gibt es nicht. Such unten oder zieh eine Datei hierher, um das passende Werkzeug zu finden.
Eine Website für jede Dateiaufgabe. Welche ist deine?
Schluss mit dem Hin und Her zwischen Konverter-Websites. Wähle eines von 410+ Tools oder ein Rezept, das mehrere aneinanderreiht.
- Dateien bleiben auf deinem Gerät
- Kein Wasserzeichen
- Funktioniert offline
Datei hierher ziehen
Eine eingefügte Datei geht auch.
oder such ein Tool
Eine App öffnen
Von „uff, diese Datei“ zu erledigt, in drei Schritten.
- Zieh sie rein oder wähl eine Aufgabe
Keine Datei? Such, was du brauchst. Dateien werden auf deinem Gerät verarbeitet, nicht zur Verarbeitung hochgeladen.
- Wähl, was du willst
Kleiner, ein anderes Format, unterschrieben, zusammengefügt. Ein Klick, ohne erst Einstellungen zu studieren.
- Mach ein Rezept daraus
Jede Woche dieselben drei Schritte? Reih sie einmal aneinander und lass beim nächsten Mal dasselbe Rezept laufen.
Ein freigegebener Werkzeugkasten für das ganze Team.
Ob im Büro, auf der Baustelle oder in der Agentur: Teams arbeiten den ganzen Tag mit vertraulichen Dateien. ToolRecipe gibt allen dieselben Werkzeuge und dieselben Rezepte, und die Dateien werden auf dem eigenen Computer jeder Person verarbeitet.
- Dateien werden auf dem Gerät der Mitarbeitenden verarbeitet
- Firmenrezepte, die alle gleich ausführen
- Ein Ort statt zehn Konverter-Seiten