Color Scale Generator
Generate color scales from a base color — light-to-dark ramps, tints, shades, and saturation scales with hex, RGB, HSL output.
About this tool
Color Scale Generator builds a range of shades from a single base color — think of it as creating a design-token palette in seconds. Pick a hex color, choose your step count (3–15 shades) and algorithm, and you get a full light-to-dark ramp with hex, RGB, and HSL values for each stop.
Example: picking #3B82F6 (Tailwind blue-500) with Light → Dark at 11 steps gives you #EBF5FF (50), #BFDBFE (100), …, #3B82F6 (500), …, #1E3A8A (900). The Perceptual Luminance algorithm uses OKLCH for visually even steps — the perceived brightness difference between each shade is consistent.
Useful when building a design system, creating hover/active states for buttons, generating Tailwind custom color palettes, or building gradient stops for data visualizations.
FAQ
Which algorithm should I use? ›
<strong>Light → Dark</strong> keeps hue and saturation fixed and evenly spaces lightness — best for most UI palettes. <strong>Tints/Shades</strong> linearly mix the base color with white or black, producing slightly desaturated stops. <strong>Perceptual Luminance</strong> uses OKLCH for visually uniform steps — shades appear evenly spaced to the human eye, which is important for data visualizations and heatmaps.
How do I use this with Tailwind CSS? ›
Click <strong>Copy Tailwind</strong> to get a JavaScript object with 50–950 keys that you can paste directly into <code>tailwind.config.js</code> under <code>theme.extend.colors</code>. Pick a name like "brand" and the utility classes <code>bg-brand-500</code>, <code>text-brand-200</code>, etc. become available.
What is the difference between this and the Color Harmony tool? ›
Color Scale Generator creates a single-hue ramp (light → dark variations of one color). <a href="/color-harmony">Color Harmony</a> generates coordinated palettes using color theory relationships — complementary, analogous, triadic, and so on. Use this tool when you already have a brand color and need its light/dark variants; use Color Harmony when you need a set of distinct accent colors that work together.
Can I export the scale as CSS custom properties? ›
Yes — click <strong>Copy CSS</strong> for <code>:root { --color-010: ...; --color-020: ...; }</code> ready to paste into your stylesheet. The <strong>Copy SCSS</strong> button exports <code>$color-010</code> variables instead.