Color Shades Generator
Turn one base HEX color into a Tailwind-style 50-950 shade scale, mixing toward white and black, each step with a swatch and copyable HEX.
Color Shades Generator — Enter a single base color in HEX and instantly get an 11-step shade scale (50, 100, 200 … 900, 950) built by mixing your color toward white for the light steps and toward black for the dark ones — the same numbering Tailwind CSS uses. Every step shows its swatch and HEX value with a one-click copy button. Everything runs entirely in your browser; no color is ever sent to a server.
What is Color Shades Generator?
The Color Shades Generator is a free online tool that turns one base HEX color into a complete tint-and-shade scale, numbered 50, 100, 200 through 900 and 950 just like Tailwind CSS color tokens. It builds the ramp by linearly mixing your base color toward white for the lighter steps (50-400) and toward black for the darker steps (600-950), keeping 500 as the base color itself. Designers and front-end developers use it to generate a consistent color scale for a design system, set up CSS custom properties or Tailwind theme colors, and pick accessible light/dark variants of a brand color. Each step is shown as a swatch beside its HEX value with a one-click copy button.
How to use Color Shades Generator
- Type a base color in the Base color (HEX) field using #rrggbb or #rgb format, or click the large color picker swatch to choose one visually.
- The 50-950 scale updates instantly: light tints (50-400) are mixed toward white, 500 is your base color, and dark shades (600-950) are mixed toward black.
- Read each row to see the step number (50 … 950), its color swatch, and its HEX value side by side.
- Click the copy button at the end of any row to copy that step's HEX value to your clipboard.
- Copy the base color's HEX with the copy button next to the input field whenever you only need step 500.
Examples
Lightest step (50) from a blue base
Input
#4f86f7
Output
#f6f9ff
Darkest step (950) from the same base
Input
#4f86f7
Output
#0b1323
Building Tailwind theme colors
Enter your brand color, then copy steps 50 through 950 one by one into a Tailwind theme color (e.g. colors.brand) or into CSS custom properties, giving you a ready-made light-to-dark scale that matches Tailwind's default shade numbering.
Frequently asked questions
- What color formats can I enter?
- The base color is entered as a HEX value in either #rrggbb (six digits) or #rgb (three-digit shorthand). If the value is not a valid HEX color, an 'Invalid HEX color' message appears and no scale is generated. Every step in the output is shown as a #rrggbb HEX value.
- How are the shades calculated?
- Each step is a linear mix between your base color and pure white or pure black. Steps 50-400 are mixed toward white by decreasing amounts, step 500 is the base color unchanged, and steps 600-950 are mixed toward black by increasing amounts. The numbering matches Tailwind CSS color scales.
- Why is step 500 sometimes not exactly my base color's number?
- Step 500 is always your exact base color. The tool does not re-center your color onto a perceptual lightness curve, so if your input is very light or very dark the lighter or darker half of the scale will have less range — pick a mid-tone base for the most even ramp.
- Can I pick a color visually instead of typing HEX?
- Yes. Click the large swatch with the built-in color picker to choose a color; the HEX field updates automatically and the whole 50-950 scale recalculates instantly as you change it.
- Is my color data uploaded anywhere?
- No. Everything runs entirely in your browser using local color math — no color value is ever sent to a server, so it works offline and keeps your palette private.
Related tools
Code to Image
Turn a code snippet into a polished, syntax-highlighted PNG card in your browser, with a theme, gradient or transparent background, and padding — no upload.
Color Contrast Checker
Check the WCAG contrast ratio between a foreground and background HEX color and see whether it passes AA and AAA for both normal and large text.
CSS Box-Shadow Generator
Build a multi-layer CSS box-shadow with offset, blur, spread, color and inset controls, see a live preview, and copy the ready-to-use property.
CSS Gradient Generator
Build a linear, radial or conic CSS gradient with custom color stops and an angle, preview the result live, and copy the ready-to-paste background rule.