# Color shade and tint generator

> Create labelled lightness scales from a base color.

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

Tool ID: color-shade-and-tint-generator. Requested language: lo. Description language: en. Complete guide translation: no; untranslated sections use English.

## 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 (en)

Create labelled lightness scales from a base color. Generate deterministic scales rather than another generic palette tool.

## Steps (en)

1. Enter the requested values in the settings panel.
2. Set base color, steps per direction.
3. Run color shade and tint generator, review the output, then use the available copy or download controls.

## Settings

- Base color (en; key: color; type: color)
- Steps per direction (en; key: steps; type: number); minimum: 2; maximum: 10

## Limitations (en)

Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.

## Privacy and connections (en)

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

## Questions (en)

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

### Where is my input processed?

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

### What are the input limits?

Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.

## Related tools

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