Shade Scale Generator

ProNew

Generate an 11-step scale (50 to 950) from one base color, see each step with its hex and the text color that reads on it, click a step to copy it, and copy the whole scale as CSS variables. Use this when a theme needs a ramp of one hue.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

initial

name

Guide and examples

When to use it

You build a design token set and need consistent light and dark steps from one brand color.

Do not use it when: This scales lightness in HSL, which is quick and predictable. For perceptually even scales use OKLCH tooling.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`initial`	`string`	`#0f766e`	The base color.
`name`	`string`	`brand`	Prefix for the variable names.

shadeScale(base) and scaleToCss(name, scale) are exported.

Accessibility

The scale is a labelled list of buttons; each button's name carries the variable name and the hex ("Copy brand-500, #14b8a6"), and the visible label has the same information. Text on each step is black or white by luminance.
Copy results are announced in a polite status. An unreadable base color is an alert.
Colors are shown as values, so no information depends on seeing the color.

Testing

The pattern ships with a Testing Library test (shade-scale-generator.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

You build a design token set and need consistent light and dark steps from one brand color.

Do not use it when: This scales lightness in HSL, which is quick and predictable. For perceptually even scales use OKLCH tooling.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`initial`	`string`	`#0f766e`	The base color.
`name`	`string`	`brand`	Prefix for the variable names.

shadeScale(base) and scaleToCss(name, scale) are exported.

Accessibility

The scale is a labelled list of buttons; each button's name carries the variable name and the hex ("Copy brand-500, #14b8a6"), and the visible label has the same information. Text on each step is black or white by luminance.
Copy results are announced in a polite status. An unreadable base color is an alert.
Colors are shown as values, so no information depends on seeing the color.

Testing

The pattern ships with a Testing Library test (shade-scale-generator.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.