Color Shades Generator (Darker Variations)
Pick a base color and get 10 progressively darker shades — useful for hover states, dark-mode color tokens, depth in UI layers. Each shade has hex, RGB, HSL ready to copy.
How to use the Color Shades Generator (Darker Variations)
Pick a base color. Output shows 10 progressively darker variations, each clickable to copy.
Building darker shades of a color
A single brand color is rarely enough in a UI. Hover and pressed states usually want a slightly darker version, dark-mode surfaces stack subtly darker layers, and shadows read as darker tones of the base. Eyeballing “a bit darker” gives inconsistent, muddy results.
Pick a base color and this produces ten progressively darker shades, each with hex, RGB, and HSL ready to copy. For lighter variations instead, use the tints generator; for a full Tailwind-style 50–900 scale in one pass, the monochromatic palette.
Common use cases
- Hover and pressed states — derive a darker shade for interactive feedback.
- Dark-mode layers — stack subtly darker surfaces for depth.
- Shadows and borders — pick a darker tone of the base for edges.
- Brand variants — extend one brand color into a usable range.
- Design tokens — generate darker steps for a color scale.