Design Tools
Color Shade Generator
🔒 ブラウザで動作
Generate 10 progressively darker shades from any hex color. Click to copy individual hex values, or export as CSS custom properties or a JavaScript array.
このツールの使い方
- Enter a base hex colour.
- The tool darkens it in ten progressive steps toward black.
- Copy individual shades, or export the set as CSS variables or a JS array.
Shade values
よくある質問
- How are the shades produced?
- The base colour is mixed toward black in ten progressive steps, so each shade is darker than the last while keeping the same hue.
- What is the difference between a shade and a tint?
- A shade darkens a colour by adding black; a tint lightens it by adding white. This tool makes shades — use the tint tool for the lighter direction.
- What can I export?
- Individual hex values by clicking, or the whole set at once as CSS custom properties or a JavaScript array for use in code.
- Is my colour sent anywhere to generate shades?
- No. The shade maths runs in your browser from the hex you enter.