Color Shades Generator
Input any hex color and instantly generate 10 shades (50-950) in Tailwind CSS style — view swatches, click to copy, and export configs.
How to use Color Shades Generator
- Enter a hex color or use the color picker.
- View the generated 10-shade scale from 50 to 950.
- Click individual swatches to copy hex codes, or use the export buttons for a full config.
What is Color Shades Generator?
Creating consistent color scales is essential for design systems. This tool takes any base hex color and generates a full set of 10 shades from 50 (lightest) to 950 (darkest), following the Tailwind CSS color scale convention.
Each shade is displayed as a color swatch with its hex code. Click any swatch to copy the hex to your clipboard. Export the full palette as hex values, CSS custom properties, or a ready-to-use Tailwind CSS configuration object.
FAQ
- How are the shades calculated?
- Shades are calculated by mixing the base color with white (for lighter shades 50-400) and black (for darker shades 600-950), with perceptually balanced interpolation.
- Can I use this for my design system?
- Yes — the Tailwind config export is ready to paste into your tailwind.config.js for custom brand colors.
People also use
- Color Mixer🖼️ Image Tools
Mix two colors with configurable gradient steps. See the gradient preview and copy CSS linear-gradient code. Free online color blender.
- AI Color Palette Generator🖼️ Image Tools
Generate harmonious color palettes using color theory. Complementary, analogous, triadic, tetradic, monochromatic schemes. Lock, copy, and export.
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.