This free tint and shade generator turns one brand color into a full tonal scale. Pick a base color, set how many tints and shades you want, and export a numbered color scale as theme.json settings or CSS custom properties. Every step is named like a design token, so it drops straight into a WordPress block theme.
How to Use This Tint and Shade Generator
Building a tonal scale by hand means mixing each step toward white or black, converting hex codes, and checking contrast one pair at a time. This tool does all of it in four steps:
- Pick a base color. Use the picker, type a hex value, or start from one of the Strakture presets.
- Set tints and shades. Choose how many lighter tints and darker shades to generate, then use the spread control to decide how far each end reaches toward white and black.
- Name your tokens. Give the scale a prefix like
brandoraccent. Each step is numbered from 50 (lightest) to 950 (darkest), the same pattern popular design systems use. - Export. Copy or download a theme.json color palette, or grab the CSS custom properties. Click any step in the scale to copy its hex value on its own.
What Is a Tint and What Is a Shade?
A tint is a color mixed with white, which makes it lighter and softer. A shade is a color mixed with black, which makes it darker and deeper. Start from a single brand color and you can build a whole family of related tones: light tints for backgrounds and subtle fills, the base color for primary actions, and dark shades for text and hover states. Because every tone shares the same underlying hue, the result reads as one coherent system rather than a set of unrelated colors.
Why Numbered Tonal Scales Matter
Modern design systems rarely define a color as a single value. Instead they define a scale, with each step numbered so designers and developers can refer to brand-500 or brand-900 and know exactly which tone they mean. This tool follows that convention, numbering the lightest step 50 and the darkest 950, with the base color sitting near the middle. Numbered scales make a color system predictable: you always know that a higher number is darker, and you can swap the base color later without renaming a single token.
theme.json Palette vs CSS Custom Properties
WordPress block themes define color in two layers. The palette layer lives in theme.json under settings.color.palette and controls the colors shown in the block editor. WordPress core then turns each palette entry into a CSS custom property such as --wp--preset--color--brand-500. This tool exports both. Use the theme.json download when you are building or editing a block theme, and use the CSS variables when you are adding colors to a child theme or a custom stylesheet.
What is the difference between a tint and a shade?
A tint is a color mixed with white, which makes it lighter. A shade is a color mixed with black, which makes it darker. Mixing a color with gray instead produces a tone. This generator focuses on tints and shades because they are the two ends most useful for building a background-to-text color scale in a WordPress theme.
How many tints and shades should a color scale have?
Most design systems use a scale of roughly 10 or 11 steps, numbered from 50 to 950. That gives you enough light tints for backgrounds, a clear base color, and several dark shades for text and hover states. This tool lets you set the number of tints and shades separately so you can match the scale your project needs.
Will the exported scale work with any WordPress theme?
The theme.json export works with any block theme running WordPress 6.0 or later. Classic themes can still use the CSS custom properties export by pasting the variables into a stylesheet. The variables follow the same --wp--preset--color-- naming that block themes already use, so they slot in without extra mapping.
What do the numbers like 500 or 900 mean?
The numbers are token weights borrowed from design systems. Lower numbers are lighter tints and higher numbers are darker shades, with the base color sitting near 500 in the middle. The numbering makes the scale predictable and lets you reference a specific tone by name in your theme.
Built by Strakture. Pair this with our WordPress color palette generator, and read our guides to WordPress design tokens and WordPress design systems to put the scale to work.