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.
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.
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 guarantees all seven colors stay 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.
