Color Shades - Free Online | ToolXHub
Use Color Shades online for free, no download required. ToolXHub 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 (for example,#3B82F6), and the tool automatically generates a color level series of 50-900 (similar to the 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 dominant color.
Generation algorithm: In the HSL color space, keep the hue (H) unchanged and adjust the brightness (L) and saturation (S). Bright steps reduce saturation and increase brightness, while dark steps increase saturation and decrease brightness to ensure uniform vision.
Suitable for designing colors for 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 output as a CSS variable, Tailwind configuration, or SON.
Color level generator that automatically generates multiple level variants from light to deep based on the main color for UI design and color matching reference.