Pick any color and get 7 shades of the same hue instantly. Copy HEX and RGB codes with one click.
NinjaFunction's Color Shades Generator produces 7 shades (three darker, the base, three lighter) from any color you pick. Each shade shows its HEX and RGB value with a one-click Copy button. Copy the entire palette as CSS variables with a single click. Everything runs locally in your browser.
:root block into your stylesheet in one step.A color shade is a darker or lighter version of a base color. By keeping the hue and saturation constant and varying only the lightness, you get a consistent palette — this is exactly how design systems like Tailwind CSS, Material Design and Bootstrap build their color scales.
A HEX color is a 6-digit code representing red, green and blue channels in hexadecimal (e.g. #1C5C52). It's the most common format in CSS and design tools.
RGB expresses colors as three decimal values from 0 to 255, one per channel. Useful for programmatic color manipulation in JavaScript and canvas rendering.
Seven steps (three darker, the base, three lighter) give enough range for hover states, borders, backgrounds and text without overwhelming the eye. Adjust the base and the entire scale shifts with it.
| Term | How it is made | Effect |
|---|---|---|
| Shade | Add black | Darker, deeper colour |
| Tint | Add white | Lighter, softer colour |
| Tone | Add grey | Muted, less intense colour |
Copy the palette as CSS variables and paste it into your stylesheet, named --shade-1 (darkest) to --shade-7 (lightest). Then use var(--shade-6), for example, wherever you need that colour. If the brand colour ever changes, you update the variables in one place and the whole site follows.
Your color is converted to HSL (Hue, Saturation, Lightness). We keep the hue and saturation the same and shift only the lightness by −40, −25, −12, 0, +12, +25 and +40. This keeps all seven colors in the same family.
Similar in spirit, but Tailwind uses hand-tuned per-hue values. Ours is algorithmic and works for any input color.
No. All conversion happens locally in your browser. Your color choices never leave your device.
Lightness cannot go below 0% or above 100%. If your colour is already very light, say 70% lightness, adding 40 would pass 100%, so that shade becomes white. Very dark colours do the same at the black end. Start from a mid-tone colour for seven distinct shades.
Each shade shows its HEX and RGB values, and you can copy either with one click. You can also copy the whole palette as CSS variables named --shade-1 (darkest) to --shade-7 (lightest).