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.

Hand-picking every hover, disabled, and background tint from a single brand color is tedious and easy to get inconsistent. Feed in one seed color and this tool derives a full tonal ramp instantly, along with a WCAG-aware suggestion for readable text on each shade.

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.

Note: entered colors and generated shades live only in the browser tab and reset on reload. Copy down any codes you want to keep before refreshing the page.

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.
• RGB and HSL conversion: internally, HEX is converted to RGB (red/green/blue channels, 0-255) for the linear interpolation, luminance, and contrast calculations. Entering colors directly in HSL notation is not supported.

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.
• Lining up several candidate brand colors side by side to decide which one to adopt as a corporate color.

quizFAQ

Can I enter a color as RGB or HSL instead of HEX?

The input field only accepts HEX color codes (#RRGGBB or #RGB). If you have a color in RGB or HSL, convert it to HEX with another tool first.

Which WCAG guideline is the generated text color based on?

For each shade, the relative luminance of both black and white text is calculated and whichever gives higher contrast against that background is shown. This is only a starting point — always verify against the specific WCAG AA (4.5:1) or AAA (7:1) threshold you need with a dedicated contrast checker.

Does the 500 shade match the color I entered exactly?

Yes. The 500 step is always the HEX color you entered, used as-is as the base tone. Shades 50-400 are interpolated toward white and 600-900 toward black, producing a gradient centered on 500.

Can I save a palette I've generated?

There's no save feature in the current version. Click any shade's code to copy it to the clipboard and paste it directly into your design tool or code.

When should I use Compare mode versus Shades mode?

Use Compare mode to line up several candidate brand colors side by side, and Shades mode when you want to inspect the full ramp of a single color in detail. Switch between them depending on what you're evaluating.

Is the color code I enter sent anywhere?

No. Shade generation and contrast calculations all run client-side in JavaScript, so the color codes you enter are never transmitted to an external server.