🎨

カラーパレット 生成

ベースカラーから美しいカラーパレットを生成します。CSS、HEX、JSON としてエクスポートできます。

デザインツール ローカルで実行 データは送信されません
パレット HSL 補色 デザイン
ベースカラー
パレットタイプ
件数（単色のみ）: 5
5
エクスポート形式
パレットプレビュー
エクスポート

カラーパレット 生成とは？

ベースカラーから美しいカラーパレットを生成します。補色、類似色、三色配色、単色配色から選択し、CSS、HEX、JSON としてエクスポートできます。

カラーパレット 生成の使い方

  1. ベースにする色を選択してください。
  2. 補色、類似色、モノクロなどのパレットスタイルを選択してください。
  3. 生成されたスウォッチを確認し、必要に応じてベースカラーを調整してください。
  4. デザインシステムやモックアップで再利用するHEX値をコピーしてください。

関連ツール

🎨
カラーピッカー ツール
HEX、RGB、HSL、CMYK 間で色を変換します
 🌈
CSS グラデーション 生成
ライブプレビュー付きでCSSの線形・放射状グラデーションを作成
 ⚖️
WCAG コントラスト チェック
アクセシビリティのために WCAG AA および AAA の色コントラスト比を確認します
カラーパレットを理解する ▾
例
入力 ベースの青色から補色パレットを生成する例：
出力 補色はカラーホイール上で正反対に位置し、高コントラストで鮮やかな組み合わせを生み出します。
一般的な使用例
  • ベースのブランドカラーからUIカラーシステムを構築
  • チャートやイラスト用の補助アクセントカラーを生成
  • デザインに引き継ぐ前にパレットの方向性を検討
  • SNS投稿やスライド用のカラーセットをすばやく作成
よくある質問
適切なハーモニータイプの選び方は？

補色は大胆でコントラストの強いデザインに使用します。類似色は柔らかくまとまりのあるUIテーマに使用します。3つのバランスの取れたアクセントカラーが必要な場合はトライアドを使用します。シンプルさと上品さを優先する場合はモノクロマティックを使用します。

パレットはアクセシビリティのためのコントラストをチェックしますか？

このツールはカラーハーモニーの生成に特化しています。WCAGコントラストチェックには、このサイトのContrast CheckerまたはWCAG AA Checkerツールを使用してください。

パレットをFigmaやCSSにエクスポートできますか？

はい — CSSエクスポート形式を使用すると、そのまま貼り付けられるCSSカスタムプロパティを取得できます。またはHEX値を個別にコピーして、任意のデザインツールに貼り付けられます。

モノクロマティックの数スライダーは何に使いますか？

モノクロマティックタイプを使用する場合、生成されるティントとシェードの数を制御できます（3–10）。これにより、作業に使える細かいグレースケールまたは着色スケールが得られます。