Enter any hex color and get a complete palette of lighter tints, darker shades, and muted tones — instantly. Built for designers who need a full color scale, not just one value. Copy any shade in Hex, RGB, or HSL, or export the whole palette as CSS variables, JSON, or a Tailwind config.
Most shade generators give you a simple dark-to-light gradient and stop there. This one goes further because real design work needs more options than just "darker" and "lighter."
Shades (mix with black), Tints (mix with white), Tones (mix with gray), Monochromatic (HSL lightness scale), Pastel (high lightness, low saturation), and Vivid (pumped saturation). Each mode produces a fundamentally different character of palette from the same base color.
Choose between 5, 7, 9, 10, 12, 15, or 20 steps. Need a minimal 5-color system? Done. Need a Tailwind-style 11-stop scale for a full design system? That too. The step count changes both the strip and the card grid simultaneously.
Every shade card has quick-copy buttons for Hex, RGB, and HSL. Click the large swatch strip at the top to copy the hex of any color on hover. You never need to open a separate panel just to copy a value.
Export your entire palette as CSS custom properties (--color-100 to --color-900), a JSON object, a Tailwind CSS color config, or a SCSS map. These exports are production-ready — copy, paste, and go.
Jump-start from popular design starting points — classic blues, brand reds, warm oranges, forest greens, and more. Each preset is a carefully chosen base that generates a beautiful full-range palette without needing to pick your own starting point.
Below the generated palette, a three-card panel shows your base color, the lightest generated shade, and the darkest shade — each with their Hex, RGB, and HSL values and individual copy buttons. Useful when you need to reference endpoint values quickly.
The whole process takes about 30 seconds. Here's a step-by-step walkthrough so you understand what each option does.
Type a hex code directly into the input field, or click the colored swatch to open your browser's native color picker. You can also hit the Random button to start from an unexpected color — sometimes that's the fastest way to explore.
Choose Shades for darker variations, Tints for lighter, Tones for muted versions, or Monochromatic for an HSL-based scale. If you're building a design system, Monochromatic usually produces the most versatile result. If you want soft background colors, try Pastel.
10 steps is a good default — it matches common design system scales like Tailwind and Material. Use 5 or 7 for simpler projects. Use 15 or 20 when you need very fine-grained control between shades, like for a large data visualization color ramp.
Hover over the strip to see hex values. Click any card's copy buttons for Hex, RGB, or HSL. The strip at the top is the quickest way to grab a hex — hover any cell and it shows the code, click to copy.
For CSS: click "CSS Variables" to get a :root-ready block. For React/Next.js: click "JSON". For Tailwind CSS: click "Tailwind Config" for a drop-in color definition. All exports are numbered consistently, so you can swap modes and reuse the same variable names.
The preset grid at the bottom of the tool shows 25+ ready-made starting colors. Click any one to instantly load it as your base and regenerate the palette. This is the fastest way to compare how different base colors look across the same shade mode.
These three terms get mixed up constantly. Here's what each one actually looks like for the same base color, so the difference is concrete rather than just theoretical.
Each step adds more white. The hue stays the same but the color becomes progressively lighter and more pastel-like. At 100% white, you reach pure white. Useful for background colors, subtle fills, and light mode surfaces.
Each step adds more black. The hue stays the same but the color becomes progressively darker and richer. At 100% black, you reach pure black. Useful for depth, pressed states, text on colored backgrounds, and dark mode accents.
Each step adds more gray (50% black + 50% white). The color becomes more muted and earthy without changing dramatically in lightness. Tones often feel more sophisticated and natural than the pure saturated original. Great for body text, muted backgrounds, and aged aesthetics.
Rather than mixing with white or black, this adjusts the HSL lightness value directly. The result is perceptually more consistent — each step looks like an equal visual jump. This is how Tailwind CSS and most modern design systems generate their color scales.
Pick any professional design system — Tailwind, Material Design, Ant Design, Chakra UI, Radix — and one of the first things you'll notice is that every color in the palette comes in a range of shades. Not just one blue, but ten blues arranged from nearly-white to nearly-black. This isn't decoration. It's one of the most practical decisions in building a usable UI.
The reason is simple: different UI elements need colors that are related but not identical. Your primary button and your button's hover state need to be visually distinct. Your card background and your page background need to feel connected but separable. Your disabled text and your active text need to come from the same color family while communicating their different states clearly. A single color value can't do all of that. A range of shades can.
Tailwind CSS introduced a lot of people to the 50–950 color scale. Each of their built-in colors (like Blue, Red, or Green) comes in 11 steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The number loosely corresponds to lightness — 50 is nearly white, 500 is the "base" color, and 950 is nearly black.
What makes this scale particularly well-designed is that each step looks like roughly the same visual distance from the one before it. This isn't automatic when you just mix with black or white in equal proportions — human color perception isn't linear, so mathematically equal steps often look uneven visually. The Tailwind team spent considerable effort tuning their scales to look perceptually consistent, which is part of why they became a default template for design system thinking.
The Monochromatic mode in this generator uses the same HSL-lightness approach that underlies most well-made design system scales. If you want something that feels similar to a Tailwind scale for your custom color, that's the mode to use.
The right mode depends on what you're building:
Pastel palettes have gotten a lot of attention in design trends over the past few years, particularly in consumer apps and wellness products. The appeal is real — high-lightness, low-saturation colors feel soft, approachable, and modern without the visual tension of highly saturated colors. They're also significantly easier to build accessible backgrounds with, since light pastels pair well with dark text and easily clear WCAG contrast thresholds.
The Pastel mode in this generator takes your base color and shifts both the lightness up and the saturation down. The result is a range of soft, approachable versions of your color — from barely-there to definitely-pink (or whatever hue you started with). These work particularly well for backgrounds, chips, and tags in modern UI design.
The most time-consuming part of using a shade generator is usually getting the output into your project. This tool aims to make that zero-friction. The CSS Variables export gives you a block you can drop into your :root immediately:
--color-100: #dbeafe; --color-200: #bfdbfe; /* ...and so on */
The Tailwind Config export gives you an object you can paste directly into tailwind.config.js under theme.extend.colors. The numbering matches Tailwind's own convention (50, 100, 200 … 900, 950) so your custom color scale integrates seamlessly with existing Tailwind utilities. The SCSS Map export gives you a $color-map variable with all your shades, useful in preprocessor-heavy workflows.
One of the trickiest challenges in building a dark mode is that you can't just invert your light mode palette. Colors behave differently on dark backgrounds — they look brighter, more saturated, and can cause eye strain if used at full intensity. A proper dark mode needs its own set of shades optimized for dark surfaces.
A common approach: for your primary action color (like a brand blue), use the 400 shade in dark mode where you'd use the 600 shade in light mode. The lighter shade on the dark background creates similar visual weight to the darker shade on the light background. This is why having a full shade scale matters so much — without it, you're guessing.
The Vivid mode in this generator is particularly useful for dark mode accent colors. It pumps up the saturation while keeping lightness at a manageable level, producing colors that read clearly on dark surfaces without being eye-straining.
The need for a color scale comes up in more places than you'd expect. Here's where this tool gets used in real practice.
Generating the full 9-step color scale for a new brand color that will live alongside existing system colors. The Tailwind export makes this especially smooth.
Finding the right lighter shade of a primary color to use on dark backgrounds, where the original full-saturation color would be too intense or hard on the eyes.
Building interactive state variations — default, hover, active, focus, disabled — by picking different shades from a consistent scale rather than guessing on arbitrary darker or lighter values.
Creating sequential color scales for charts and heatmaps where each step needs to represent a meaningful increase in value. A 10 or 15 step monochromatic scale works well for this.
Expanding a single brand color into a full palette. A client hands you one hex code from a logo and you need to build out a complete set of usable lighter and darker variations.
iOS and Android design guidelines both recommend using color palettes with multiple lightness levels. Generating a proper scale ensures your app's UI feels polished across all contexts and lighting conditions.
Things I've learned from actually building design systems that make the difference between a palette that works and one that looks slightly off.
Most people assume their primary brand color should sit at step 500 (the middle of a 10-step scale). But this only works if your brand color is a mid-lightness value. A very dark navy blue placed at step 500 produces a scale where most of the top half is nearly black and unusable. Try adjusting your input color's lightness before generating so that the base lands visually in the middle of the range.
For any color scale, you'll typically use:
Test the combinations you'll actually use — not every pair, just the realistic ones — through a contrast checker before finalizing.
Pure tint and shade mixing (adding white or black) can produce scales that look inconsistent because human color perception is non-linear. The Monochromatic mode adjusts HSL lightness values directly, which typically produces more visually even steps. If your generated scale looks lopsided — lots of detail at one end and jumps at the other — try switching to Monochromatic mode.
It's tempting to generate a 15-step scale because it looks comprehensive. But if your project only has 3 UI components that use color, a 5-step scale is completely sufficient and much easier to maintain. A palette with too many steps is like a kitchen with too many knives — impressive, but most of them never get used and they just make decisions harder.
The default CSS export uses numeric names like --color-100. These work fine but consider adding semantic aliases for key values in your actual codebase:
--blue-bg: var(--blue-50)--blue-border: var(--blue-200)--blue-text: var(--blue-700)Semantic aliases let you change the underlying shade values without hunting through your codebase.
If you're building a warm gray or cool gray neutral palette, start from a very lightly saturated color (a barely-blue or barely-orange base) and use Tones mode. The desaturation effect of gray-mixing reduces the saturation further, giving you a set of neutrals that have subtle warmth or coolness without being obviously colored. This is how most sophisticated neutral palettes in professional design systems are made.
The questions people actually search for when working with color palettes — answered directly.
hsl(220, 90%, 50%), a lighter version is hsl(220, 90%, 70%). In CSS Level 4, you can also use the color-mix() function: color-mix(in srgb, #3B82F6, white 40%) mixes your color with 40% white. This tool generates exact hex values for lighter versions so you can paste them directly without needing to do the math yourself.{ '50': '#eff6ff', '100': '#dbeafe', '200': '#bfdbfe', ... '950': '#172554' }. Paste this into your tailwind.config.js file under theme.extend.colors.yourColorName. The numbering matches Tailwind's own convention, so utility classes like bg-blue-500 will work the same way with your custom color.