CSS Terminology
Shade Scale
A progression of darker variations of a base color, created by mixing the color with black or reducing its lightness value.
Understanding Shade Scale
Code Examples
Using Shade Scale in TWColors
Our tools help you work with shade scale effectively. Try our color tools to see how shade scale affects your designs.
Explore our tools →Related Terms
Learn More
Creating Custom Color Palettes in Tailwind CSS
Step-by-step guide to adding custom brand colors and generating complete shade palettes in Tailwind.
Color Naming Conventions for Scalable Design Systems
Best practices for organizing and naming colors in design systems using Tailwind CSS.
Design Tokens for Colors in Tailwind CSS
Structure your Tailwind colors as design tokens for consistency across web, mobile, and design tools.
Building a Custom Neutral Palette in Tailwind CSS
Replace Tailwind's default grays with a custom neutral palette tuned to your brand temperature.
Try Our Color Tools
Apply your knowledge of shade scale with our free tools.
Explore Tools