# Farbabstufungs-Generator

> Erstelle beschriftete Helligkeitsskalen aus einer Basisfarbe.

[Open tool](https://www.toolcabana.com/de/color-shade-and-tint-generator) · [Design und CSS](https://www.toolcabana.com/de/category/design-and-css)

Tool ID: color-shade-and-tint-generator. Requested language: de. Description language: de. Complete guide translation: yes.

## Overview (en)

Color shade and tint generator builds a labeled lightness scale from one base color: tints blended toward white, the base itself, and shades blended toward black. Choose 2 to 10 steps per direction for up to 21 colors, each listed with its HEX code in a table and shown as a swatch with black or white text chosen by luminance.

## Supported tasks (de)

Erstelle beschriftete Helligkeitsskalen aus einer Basisfarbe. Erzeuge deterministische Skalen statt eines weiteren generischen Paletten-Tools.

## Steps (de)

1. Gib die angeforderten Werte im Einstellungsbereich ein.
2. Lege die Basisfarbe und die Schritte pro Richtung fest.
3. Führe den Farbabstufungs-Generator aus, prüfe die Ausgabe und verwende dann die verfügbaren Bedienelemente zum Kopieren oder Herunterladen.

## Settings

- Basisfarbe (de; key: color; type: color)
- Schritte pro Richtung (de; key: steps; type: number); minimum: 2; maximum: 10

## Limitations (de)

Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.

## Privacy and connections (de)

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

## Questions (de)

### How are tints and shades calculated?

Each RGB channel is blended linearly. Tint i moves the color i/(steps + 1) of the way toward white, and Shade i moves it the same fraction toward black, so pure white and black are never reached. The same input always gives the same scale.

### How many colors does the shade and tint generator produce?

Twice the steps per direction, plus the base. With the default of 5 steps you get Tint 5 to Tint 1, Base and Shade 1 to Shade 5, eleven colors in total; the maximum of 10 steps gives 21.

### Can I export the color scale?

The results table holds Label and HEX columns and copies as tab-separated text, so it pastes into spreadsheets or design notes. You can then rename labels such as Tint 3 to your own token names.

### Wo wird meine Eingabe verarbeitet?

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

### Welche Eingabelimits gelten?

Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/de/css-clamp-calculator)
- [CSS grid layout generator](https://www.toolcabana.com/de/css-grid-layout-generator)
- [CSS flexbox playground](https://www.toolcabana.com/de/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/de/css-cubic-bezier-editor)