ベース
HEX
#4F46E5Palette Generator
ベースカラーを選ぶと、UI やブランディング向けのパレットをすぐに作成できます。
使い方
- HEX 値を入力するか（例: #4F46E5）、カラーピッカーを使います。
- 「パレットを生成」を押して配色を生成します。
- 各カードから HEX 値をコピーできます。
6 桁の HEX を使用してください（例: #2563EB）。
生成されたパレット
選択したベースカラーからバランス良く作成された色です。
補色
HEX
#DDE548類似色 (-30°)
HEX
#488FE5類似色 (+30°)
HEX
#9E48E5明るいバリエーション 1
HEX
#726BEA明るいバリエーション 2
HEX
#8D87EE明るいバリエーション 3
HEX
#A7A3F2暗いバリエーション 1
HEX
#3F38B7暗いバリエーション 2
HEX
#332E95暗いバリエーション 3
HEX
#282373実務で使える配色の出発点
このツールで短時間に配色案を作り、実際のUIで軽く検証しましょう。
このツールを使う場面
- ブランドの基準色から最初の配色を作りたいとき。
- 明暗や補色の候補をすぐ比較したいとき。
- LPや小規模リデザインの方向性を決めたいとき。
クイックステップ
- ベースHEXを入力してパレット生成。
- 実際に使う4〜6色だけ選んでコピー。
- 簡単なモックで確認してから本番へ適用。
よくある失敗
- 生成色を多く使いすぎる。
- 文字と背景のコントラスト確認をしない。
- ホバーやアクティブ状態を試さずに決める。
関連Palette Generatorガイド
配色設計、アクセント選定、公開前テストを短い実践ガイドで確認できます。