Tint-und-Shade-Generator

Das ist ein Tint-und-Shade-Generator. Aus einem HEX mischt er zu Weiß und zu Schwarz, oder läuft HSL-Helligkeit, Chroma und Farbton.

Klicken Sie einen Wert zum Kopieren

Beispiele — klicken Sie ein Feld

Mehrere Farben auf einmal umwandeln. Eine pro Zeile, oder Kommas wie #3B82F6, #FF573380. Beispiel einfügen füllt drei Zeilen und die Tabelle darunter.

Tint-und-Shade-Generator

Das ist ein Tint-und-Shade-Generator. Er mischt ein HEX zu Weiß oder Schwarz für Hover und Rahmen.

So verwenden Sie es

  1. Fügen Sie HEX, rgb() oder hsl() ein, wählen Sie eine Farbe, Zufall, ein Beispiel (#3B82F6, #171B45, #0074D9, #0F766E) oder ein Pixel, wenn der Browser es erlaubt.
  2. Die Achse Mischung (Weiß / Schwarz) ist der Start. Helligkeit, Chroma und Farbton halten die übrigen HSL-Kanäle fest. Schritt 5 %, 10 %, 20 % oder 25 % setzt die Stops; Benutzerdefiniert nutzt 2–20 Teilungen.
  3. Die volle Skala hat Shades links, die Basis in der Mitte, Tints rechts. HEX steht unter dem Block. Ein Klick kopiert das HEX und aktualisiert die Chips.
  4. Der Tokenname (brand) füllt --brand-tint-10 und ein Tailwind-Schnipsel. Ergebnis kopieren kopiert das CSS. Beispiel zeigen lädt #3B82F6 bei 10 % Mischung.
  5. Stapel nimmt mehrere HEX. Das Beispiel lädt #3B82F6, #171B45 und #0074D9. Jede Zeile zeigt Basis, mittleren Tint und mittleren Shade.

Hinweise

Die Mischung ist lineares sRGB zu #FFFFFF oder #000000. 50 % Tint von #3B82F6 ist dieses Blau zu 50 % auf Weiß. Helligkeit / Chroma / Farbton nutzen HSL, nicht OKLCH. Ungültiges HEX zeigt einen Fehler. Alles löschen leert die Rampen. Verwandt: HEX to Tailwind, Deckkraft, HEX to RGBA.

Wofür Sie es brauchen

  • Hover, gedrückt und Rahmen aus einem Marken-HEX.
  • Eine 10-%-Rampe für Tokens 100–900.
  • Gedämpfte Flächen durch weniger Chroma.
  • Begleitfarben durch Drehen des Farbtons.

Fragen

Ist 50 % Tint dasselbe wie 50 % Deckkraft auf Weiß?

Auf der Mischachse ja: die Farbe zu 50 % auf #FFFFFF.

Ist 10 % Tailwind 50–950?

Neun Stops je Seite plus die Basis. Es sind Mischprozente, kein OKLCH. Für eine Standardklasse nutzen Sie HEX to Tailwind.

Mehrere Farben auf einmal?

Ja. Eine pro Zeile oder Kommas außerhalb von Klammern. rgb(22, 163, 74) bleibt ein Eintrag.