Webサイトをデザインするとき、「メインカラーは決まったけれど、他の色をどう組み合わせよう？」と悩むことはありませんか？

そんなときに便利なのが、ブラウザ上で使える「Kigen Color Generator　https://kigen.design/color」です。

使い方はとてもシンプル。ベースとなる1色を選ぶだけで、その色をもとに明るさや濃さの異なるカラーバリエーションを自動で生成してくれます。50〜950までの段階的な色が並ぶため、Webサイトの背景やボタン、見出し、ホバー時の色など、用途に合わせた色を検討しやすくなっています。

特に便利なのが、生成した色をHEXだけでなく、RGB・HSL・OKLCHなどの形式で確認できること。CSSやTailwind、デザイントークンとして出力することもできるため、デザインだけでなく、その後の実装まで意識して使えるツールです。

Webディレクターにとっても、配色を考える際の「たたき台」を作るツールとして活用できます。例えば、クライアントから「この青を使いたい」と指定されたとき、その1色からどんな濃淡を作れるのかをすぐに確認できます。

もちろん、生成された色をそのまま採用する必要はありません。ブランドイメージや視認性、文字とのコントラストなどを確認しながら調整することが大切です。

「色を決める」という作業をゼロから考えるのではなく、まずツールで候補を出して、そこから人が選んでいく。そんな使い方をすると、配色にかかる時間を減らしながら、デザインの検討を効率よく進められそうです。