Material Color Generator

Material Design, Google's design system, includes a carefully crafted colour system where every primary colour is accompanied by a full palette of 10 shade levels (numbered 50, 100, 200, ..., 900) and optionally 4 accent shades (A100, A200, A400, A700). The shade scale is not a simple linear interpolation of lightness — it is designed so that the 500 level is the 'pure' brand colour, the lighter levels (50-400) are not simply the brand colour mixed with white but are deliberately adjusted for visual balance, and the darker levels (600-900) are similarly tuned for depth and readability. The accent colours are higher-saturation variants intended for floating action buttons, selection controls, and other interactive elements that need to pop against the primary palette. This tool approximates the Material Design colour scale from any input hex colour. The generation algorithm takes the base colour's HSL values and adjusts lightness and saturation across the shade levels: - **Level 500 (base):** The input colour exactly as provided. - **Lighter shades (50-400):** Lightness is interpolated from the base L upward toward 100 (white), with a slight desaturation so that very light shades do not look unnaturally vivid. The interpolation is not linear — 50 is significantly lighter than 400, and the step sizes vary to match the perceptual distribution of the official Material palettes. - **Darker shades (600-900):** Lightness is interpolated downward from the base L toward 0 (black), with maintained or slightly increased saturation to prevent muddy dark colours. Again, the step distribution is non-linear — 900 is significantly darker than 600. - **Accent shades (A100-A700):** These are higher-saturation variants of the base hue. A100 is the lightest accent (high lightness, moderate saturation), A200 and A400 increase in saturation, and A700 is a deep, highly saturated dark accent — all sharing the same hue. The tool is not an exact reproduction of Google's internal palette-generation algorithm (which is proprietary and tuned by human designers), but it produces visually sensible, usable results that follow the same structural principles. Every swatch is a clickable `<button>` that copies its hex code on click. CSS variable names are shown below each swatch in the format `--md-primary-50`, `--md-primary-100`, ..., `--md-primary-900`, `--md-primary-a100`, etc., so you can copy-paste them directly into a stylesheet or design-token file.