infoOverview

Picking a single brand color is easy; turning it into a consistent 10-step shade scale for buttons, hover states, and backgrounds by hand is tedious and easy to get wrong. This tool takes one or more HEX colors and instantly expands each into a Material Design-style shade ramp (50–900), so you get a usable, accessible palette in seconds instead of eyeballing tints and shades in a design app. Switch to Compare mode to line up several base colors side by side, or use Shades mode to inspect the full ramp for a single color.

checklistHow to Use

1. 1Choose the Compare or Shades mode.
2. 2Enter one or more HEX colors (e.g., #3490DC) — use the Color Count slider to add fields when comparing several colors at once.
3. 3Click the "Generate" button.
4. 4Click any swatch in the Result card to copy its code — or use the "Copy as CSS variables" option to grab the entire ramp as ready-to-paste custom properties.

menu_bookSpecifications & Glossary

• Compare mode: Lines up multiple base colors as parallel rows, each expanded into its own 50–900 ramp. Useful for checking whether two brand colors stay visually distinct once they're both lightened or darkened, not just at full saturation.
• Shades mode: Expands one color into its complete 50–900 ramp in a single detailed view — the mode to reach for once you've settled on a base color and need every step for a design token file or theme config.
• Shade steps: The 50–900 numbering (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) follows the Material Design tonal scale convention — lower numbers are lighter, higher numbers are darker, and 500 is treated as the "true" color.
• Shade generation algorithm: Your input color becomes the 500 step, the anchor of the ramp. Everything lighter (50–400) is a linear blend toward white; everything darker (600–900) is a linear blend toward black — step 50 is 90% white, step 900 is 60% black. This mirrors how Material Design tonal palettes are built, so the result drops straight into a design system without further tweaking.
• WCAG contrast ratio: Choosing black or white text on a colored background by eye is unreliable, especially in the mid-range shades. This tool computes relative luminance for each shade (L = 0.2126R + 0.7152G + 0.0722B) and automatically picks whichever text color clears the higher contrast ratio under WCAG 2.x guidelines, so every generated shade stays legible without a separate accessibility check.
• HEX color codes: Accepts both shorthand (#RGB) and full (#RRGGBB) notation, and the leading # is optional either way — paste a value straight from a CSS file or a design tool without reformatting it first.

lightbulbUse Cases

• Bootstrapping a Material Design tonal palette, or a Tailwind-style color scale, from a single seed color.
• Turning a single brand color into a full shade ramp without manually tinting and shading it in a design tool.
• Auditing a palette for WCAG-compliant text contrast before shipping it in a design system.
• Heads up if you're mapping output onto Tailwind CSS: Tailwind v3+ uses an 11-step scale (50–950), one step deeper than this tool's 10-step Material-style ramp (50–900). If your config needs a 950 swatch, treat the generated 900 as a starting point and darken it manually rather than assuming a direct one-to-one match.