DIvi color generator:

• Tints are lighter versions of the source color. Use them for backgrounds, cards, callouts, badges, and areas where you want a subtle hint of the brand color without making the section feel too heavy.
• Shades are darker versions of the source color. They are useful for hover states, active states, darker buttons, emphasized links, and text that needs more contrast against a lighter color from the same scale.
• Tones are muted, desaturated versions of the source color. They work well for borders, dividers, secondary text, form outlines, and UI details that should feel related to the brand without competing with the main color.
• Transparencies are alpha variants of the source color at different opacity levels. Use them for overlays, image scrims, shadows, glows, and layered background effects that should pick up the brand color instead of using flat black or white.

A few places these variations are especially useful:

• Hover and active states: Use a darker shade for buttons, links, tabs, or interactive cards.
• Soft backgrounds: Use tints for cards, callouts, pricing blocks, and feature sections.
• Box shadows: Use a transparency variant of the brand color instead of defaulting to black.
• Overlays and scrims: Use alpha variants over images or video backgrounds to keep text readable.
• Borders and dividers: Use tones when you want separation without using full-strength brand color.
• Disabled or inactive states: Use muted tones to communicate reduced emphasis while staying inside the brand palette.