Design Tools
Color Wheel
🔒 ブラウザで動作
Interactive HSL colour wheel — click to pick a colour and see complementary, analogous, and triadic swatches.
このツールの使い方
- Click anywhere on the HSL wheel to pick a colour.
- The tool reads the hue, saturation, and lightness at that point.
- Read the complementary, analogous, and triadic swatches derived from your pick.
Click anywhere to pick a color
Click the color wheel to pick a color
よくある質問
- What do the wheel positions mean?
- Angle around the wheel is the hue (0–360°), distance from the centre is saturation, and the wheel works in the HSL model so picking a point reads off those values.
- What harmonies does it show?
- Complementary (the hue directly opposite), analogous (the neighbours just either side), and triadic (three hues evenly spaced 120° apart) — derived from your pick.
- Why are complementary colours opposite?
- Hues 180° apart sit at maximum contrast on the wheel, which is why pairing them makes each look more vivid against the other.
- Does the wheel send my colour anywhere?
- No. The hue maths and the harmony swatches are computed in your browser as you click.