カラースキームジェネレーター
このツールとは カラースキームジェネレーター
カラースキームジェネレーターは、色彩理論を使って1つのベースカラーから調和のとれたパレットを生成するツールです。任意の色を選ぶと、5種類の配色スキームがすぐに得られます。補色（カラーホイールの反対側）、類似色（30度以内の隣接色）、三角配色（120度間隔の3色）、スプリット補色（ベースカラーと補色の両隣2色）、四角配色（90度間隔の4色）です。各スウォッチにはhexコードが表示され、CSSやデザインツールにそのまま使えます。
使い方
- カラーピッカーをクリックするか、入力欄にhexコードを入力します。
- 入力欄の下に生成された5種類の配色スキームを確認します。
- 任意のカラースウォッチをクリックしてhexコードをコピーします。
- 共有ボタンで現在の色をURLリンクとして保存できます。
こんなときに便利
ブランドカラー#2563EBに合うアクセントカラーを探していますか。hexコードを入力して三角配色を開くと、アラート用にぴったりのウォームオレンジ#EB6325がすぐに得られ、クリックしてコピーできます。そのままFigmaやTailwindの設定に貼り付けてアラートボタンに使え、リンクを共有すれば同僚も同じパレットをそのまま確認できます。
よくある質問
補色配色とは何ですか？
補色はカラーホイール上で正反対に位置する色同士で、180度離れています。高いコントラストが視覚的なインパクトを生み出し、一方の色がもう一方を引き立てます。ベースカラーの背景にCTAボタンを配置する際に効果的です。
類似色配色とは何ですか？
類似色はカラーホイール上でベースの色相から約30度以内に隣接する色です。同系の色調を持ち自然に調和するため、自然をモチーフにしたデザインや落ち着いた統一感のある配色に多く使われます。
三角配色とは何ですか？
三角配色はカラーホイール上で120度ずつ均等に離れた3色を選びます。バランスよく鮮やかで、3色それぞれが同等の視覚的存在感を持ちます。
スプリット補色と補色の違いは何ですか？
補色の1色を使う代わりに、スプリット補色は補色の両隣にある2色（ベースから150度と210度）を使います。補色と同様のコントラストを保ちながら、より多彩な色使いと穏やかな印象が得られます。
入力した色を保持したままリンクを共有できますか？
はい。色を選ぶとURLが自動的に更新されます。アドレスバーのURLをコピーするか、共有ボタンを使うと、同じ色とパレットが表示された状態でリンクを共有できます。