Dark-Mode-Palette
Dark Mode Palette
Baut aus einer Farbe eine Rampe von 50 bis 950 und spiegelt sie in eine dunkle, sodass jedes Token-Paar seinen Kontrast behält.
Leitet eine dunkle Skala aus einer hellen ab, indem sie sie spiegelt: Stufe 50 wird 950, 100 wird 900 und so weiter. Das ist die einzige Ableitung, die den *Vertrag* der Token-Namen bewahrt, sodass ein Paar, das im hellen Modus WCAG bestanden hat, im dunklen Modus mit demselben Verhältnis besteht und eine gegen die Skala geschriebene Komponente keine Änderung braucht. Das ist dieselbe Seite wie die Tönungs- und Schattierungsskala, auf dem dunklen Tab geöffnet.
Basisfarbe
Farbton und Chroma säen die Reihe; die Helligkeit entscheidet, welche Stufe als die von Ihnen gewählte markiert wird.
Reihe
Die Helligkeitsziele sind der Mittelwert von Tailwinds eigenen bunten Familien, aus dem installierten Paket gemessen statt hier festgelegt.
Dunkler Modus
Aus Stufe 50 wird 950, aus 100 wird 900, und so weiter. Die Token-Namen behalten ihre Bedeutung — 500 ist weiterhin der mittlere Ton — und eine gegen die Skala geschriebene Komponente braucht überhaupt keine Änderung.
Hell
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Dunkel
50
100
200
300
400
500
600
700
800
900
950
Warum spiegeln: Der Kontrast eines Token-Paars bleibt erhalten
- 50 auf 900: hell 8,93 · dunkel 12,73
- 100 auf 800: hell 6,68 · dunkel 7,19
- 200 auf 950: hell 11,16 · dunkel 7,19
Die Token-Namen behalten ihre Bedeutung, eine gegen die Skala geschriebene Komponente braucht also überhaupt keine Änderung.
Export
Sie suchen einen Satz Farbtöne statt der Reihe eines einzigen? Der Palettengenerator baut Harmonien. Um zu einer davon das nächste Tailwind-Token zu finden, misst die Suche nach der nächsten Farbe den Abstand in ΔE.
So funktioniert es
Geben Sie die Grundfarbe ein
Eine Farbe. Die helle Skala wird zuerst gebaut und die dunkle daraus abgeleitet, beide kommen also aus demselben Samen, statt getrennt gepflegt zu werden.
Wählen Sie die Strategie
Spiegeln ist die Voreinstellung und die mit dem Kontrastargument dahinter. Dunkler verschieben rückt stattdessen jede Stufe drei Positionen nach unten, was die Reihenfolge bewahrt, sodass ein Hell-nach-Dunkel-Verlauf sich nicht umkehrt, auf Kosten der dunkelsten Stufen. Spiegeln und dämpfen ist Spiegeln mit weiter heruntergezogenem Chroma.
Dämpfen Sie das Chroma für große Flächen
Gesättigte Farbe auf einer dunklen Fläche glüht und flimmert, und der Effekt wird schlimmer, je größer die Fläche ist. Das Chroma herunterzuziehen ist die konservative Wahl; lassen Sie es nahe 100 %, wenn die Skala nur für kleine Akzente und Text verwendet wird.
Lesen Sie das Nachweis-Panel
Mit eingeschaltetem Spiegeln gibt es das WCAG-Verhältnis dreier Token-Paare in beiden Modi nebeneinander aus. Das ist die Behauptung, vor Ihren Augen geprüft statt bloß aufgestellt.
Exportieren Sie beide Skalen auf einmal
Die CSS-Formen geben die helle Skala in `:root` aus und die dunkle in einem `prefers-color-scheme: dark`-Block, das ganze Theme ist also eine Einfügung.
Häufige Fragen
Kann ich die helle Palette einfügen, die ich schon habe?
Nicht als Satz. Diese Seite nimmt eine Farbe und baut beide Skalen daraus, eine bestehende Palette mit handabgestimmten Stufen überlebt es also nicht, eine Farbe nach der anderen hineingegeben zu werden – Sie bekämen elf regelmäßige Stufen, nicht Ihre elf. Wo die bestehende Palette mehr zählt als die Regelmäßigkeit, wandeln Sie sie Token für Token um und prüfen jedes Paar im Kontrastprüfer.
Bewahrt das Spiegeln den Kontrast exakt?
Annähernd, nicht exakt. Die Skala ist symmetrisch in der OKLCH-Helligkeit, und der WCAG-Kontrast wird auf der relativen Leuchtdichte berechnet, die keine lineare Funktion davon ist – die Verhältnisse kommen also nahe beieinander heraus statt identisch. Das Nachweis-Panel gibt beide Zahlen aus, damit Sie die Lücke für Ihre Farbe sehen, statt die Behauptung auf Treu und Glauben zu nehmen.
Sollte ich reines Schwarz als dunklen Hintergrund verwenden?
Gewöhnlich nicht. Reines Schwarz gegen hellen Text maximiert den Kontrast, und auf einem LCD macht die Überstrahlung, die das erzeugt, kleine Schrift schwerer lesbar, nicht leichter. Der dunkle Streifen hier wird aus diesem Grund auf einem sehr dunklen Grau gezeigt. Ein OLED-Telefon ist der eine Fall, in dem echtes Schwarz etwas Reales bringt, beim Stromverbrauch.
Warum ist das eine eigene Seite, getrennt von der Tönungs- und Schattierungsskala?
Ist es nicht – es ist dasselbe Werkzeug mit bereits eingeschaltetem dunklem Tab, weil „mach mir eine dunkle Palette“ und „mach mir eine Skala von 50 bis 950“ als verschiedene Fragen von verschiedenen Leuten ankommen. Alles auf der einen Seite ist auf der anderen.
Eingabe aus
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
Farbabstufungen
Tint & Shade Scale
Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.
CSS-Token-Extraktor
CSS Token Extractor
Zieht Farben, Abstände, Radien und Schriften aus einem Stylesheet und schlägt einen Satz Custom Properties vor.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Farbabstufungen
Tint & Shade Scale
Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
CSS-Token-Extraktor
CSS Token Extractor
Zieht Farben, Abstände, Radien und Schriften aus einem Stylesheet und schlägt einen Satz Custom Properties vor.
Palettengenerator
Palette Generator
Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.