Color Shades & Tints Generator
Enter a base color to get tint, shade, and tone scales plus a ready-to-use 50–900 palette ramp.
:root {
--color-50: #f3f6fc;
--color-100: #e2e9f8;
--color-200: #bed0f9;
--color-300: #8faff5;
--color-400: #608df0;
--color-500: #2563eb;
--color-600: #1453dc;
--color-700: #1145b6;
--color-800: #0d3691;
--color-900: #0a286b;
--tint-1: #2563eb;
--tint-2: #3b73ed;
--tint-3: #5182ef;
--tint-4: #6692f1;
--tint-5: #7ca1f3;
--tint-6: #92b1f5;
--tint-7: #a8c1f7;
--tint-8: #bed0f9;
--tint-9: #d3e0fb;
--tint-10: #e9effd;
--shade-1: #2563eb;
--shade-2: #2159d4;
--shade-3: #1e4fbc;
--shade-4: #1a45a5;
--shade-5: #163b8d;
--shade-6: #133276;
--shade-7: #0f285e;
--shade-8: #0b1e47;
--shade-9: #07142f;
--shade-10: #040a18;
--tone-1: #2563eb;
--tone-2: #2e66e0;
--tone-3: #3769d6;
--tone-4: #406ccb;
--tone-5: #496fc0;
--tone-6: #5372b6;
--tone-7: #5c74ab;
--tone-8: #6577a0;
--tone-9: #6e7a95;
--tone-10: #777d8b;
}Click any swatch to copy its HEX value. Everything runs locally in your browser.
How it works
- Pick a base color with the color picker or type a HEX value like #2563eb.
- Click any swatch in the tint, shade, tone, or 50–900 rows to copy its HEX code.
- Switch to the CSS, Tailwind, or JSON tab and copy the whole palette as code.
Frequently asked questions
- What is the difference between tints, shades, and tones?
- A tint is the base color mixed with white, a shade is the base mixed with black, and a tone is the base mixed with neutral gray. Tints raise lightness, shades lower it, and tones reduce saturation while keeping lightness roughly stable, which is useful for muted UI states.
- How is the Tailwind-style 50–900 ramp generated?
- The tool converts your base color to HSL, keeps its hue and saturation, and maps each step to a curved lightness target from about 97% at 50 down to 23% at 900. Your exact base color is slotted into the step whose lightness it matches most closely, so the ramp stays anchored to your brand color.
- Do my colors get uploaded anywhere?
- No. Every calculation runs in JavaScript inside your browser tab and the page makes no network requests with your data. You can generate and copy palettes offline once the page has loaded.
- Which HEX formats does the input accept?
- You can type 3-digit shorthand like #1af or full 6-digit values like #11aaff, with or without the leading hash. Invalid input is ignored and the last valid color stays active, so the scales never break while you type.
- How do I use the exported palette in a real project?
- The CSS tab gives you custom properties you can paste into a :root block, the Tailwind tab gives a colors object for tailwind.config.js under any name you choose, and the JSON tab suits design tokens or scripts. All three exports contain the same values, so you can switch stacks without regenerating.
About this tool
This generator turns a single base color into complete, ready-to-use color scales. It produces three classic 10-step rows — tints toward white, shades toward black, and tones toward gray — plus a modern 50–900 ramp in the style used by Tailwind CSS, Material, and most design systems. Every swatch is labeled with its HEX value and copies to the clipboard with one click, so moving colors into Figma, CSS, or code takes seconds.
All of the math happens locally in your browser. Tints, shades, and tones are computed by linear interpolation in RGB space between your base color and white, black, or mid-gray, in even 10% increments. The 50–900 ramp works differently: the base color is converted to HSL, its hue and saturation are preserved, and each step is assigned a tuned lightness target so light steps stay soft and dark steps keep depth instead of collapsing to near-black. Because nothing is uploaded, brand colors under NDA never leave your machine.
Typical uses include building a full brand palette from one approved color, creating hover and active states (a shade one or two steps darker usually reads as pressed), picking accessible text-on-background pairs from opposite ends of the ramp, and generating muted tone variants for disabled controls or subtle backgrounds. Front-end developers can paste the Tailwind snippet straight into a config file and immediately use classes like bg-brand-100 or text-brand-700.
A few practical tips: start from a base color with moderate saturation, since extremely saturated inputs can make the light 50–100 steps look neon; check contrast between your chosen text and background steps with a WCAG checker before shipping; and prefer the ramp over raw tints for UI work, because its curved lightness distribution spaces the steps more evenly than straight-line mixing.