Color Shades Generator

Design

Generate a full spectrum of shades for any color. This tool is perfect for creating design systems and component libraries.

Pick a Base Color: Use the color picker to select your starting color, or enter a HEX code.
View Generated Shades: A palette of 10 shades, from light to dark, will be automatically generated.
Copy a Shade: Click on any color swatch to copy its HEX code to your clipboard.

Base Color

50#EBF3FE

100#D8E6FD

200#B1CDFB

300#89B4FA

400#629BF8

500#3B82F6

600#3575DD

700#2F68C5

800#295BAC

900#234E94

950#1E417B

Loading Ad...

Related Tools

Explore other tools in the Design category.

Visualize and generate CSS border-radius.

Generate CSS box shadows visually.

Convert between HEX, RGB, and HSL values.

Generate color palettes from a single color.

Preview CSS animations and get the code to use them.

Create the popular glassmorphism effect for your UI elements.