Color Shades - Free Online | FunToolX
Use Color Shades online for free, no download required. FunToolX offers hundreds of fun online tools.
Color Shades Generator
Pick a color and generate a gradient of tints and shades. Click any swatch to copy its HEX code.
About this tool
Color Shades is a free online color tool. Generate tints, shades, complementary and analogous colors. Handy for designers, artists, and developers. It runs entirely in your browser — no download or sign-up needed.
Enter a basic color (such as #3B82F6), and the tool automatically generates a color level series of 50-900 (similar to Tailwind CSS color system). 50 is the shallowest and 900 is the deepest. Each color level is obtained by adjusting brightness and saturation based on the main color.
Generation algorithm: In the HSL color space, keep the hue (H) unchanged and adjust the brightness (L) and saturation (S). Light steps reduce saturation and increase brightness, while dark steps increase saturation and reduce brightness to ensure uniform vision.
Suitable for designing colors in different states such as hover state, pressed state, and disabled state of UI components. It is also used to generate theme color systems and color sequences for data visualization. Can be exported as CSS variables, Tailwind configurations, or JSON.
Color level generator, which automatically generates multiple level variants from light to deep based on a main color for UI design and color matching reference.