# Генератор оттенков цвета

> Создаёт подписанные шкалы светлоты от базового цвета.

[Open tool](https://www.toolcabana.com/ru/color-shade-and-tint-generator) · [Дизайн и CSS](https://www.toolcabana.com/ru/category/design-and-css)

Tool ID: color-shade-and-tint-generator. Requested language: ru. Description language: ru. 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 (ru)

Создаёт подписанные шкалы светлоты от базового цвета. Генерирует предсказуемые шкалы, а не очередной универсальный инструмент для палитр.

## Steps (ru)

1. Введите запрошенные значения в панели настроек.
2. Укажите базовый цвет и число шагов в каждом направлении.
3. Запустите «Генератор оттенков цвета», просмотрите результат и используйте доступные элементы копирования или скачивания.

## Settings

- Базовый цвет (ru; key: color; type: color)
- Шагов в каждом направлении (ru; key: steps; type: number); minimum: 2; maximum: 10

## Limitations (ru)

Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.

## Privacy and connections (ru)

Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.

## Questions (ru)

### 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.

### Где обрабатываются мои данные?

Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.

### Каковы ограничения входных данных?

Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.

## Related tools

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