カラーパレット生成ツール
ベースカラーを1色選ぶだけで、配色理論に基づいた調和の取れたカラーパレットを自動生成します。HEX/RGBはクリックでコピー、明度バリエーションやコントラスト判定も確認でき、すべての処理はブラウザ内で完結します。
色情報はサーバーに送信されません
配色スキーム
ベースカラー
生成パレット
色をクリックするとHEXコードをコピーできます
南京錠アイコンで色をロックすると、ランダム生成や配色変更でもその色が固定されます。
明度バリエーション（Tint / Shade）
ベースカラーを白で薄めたTintと黒で暗くしたShadeのバリエーションです。クリックでコピーできます。
パレットをエクスポート
生成中のパレットを CSS変数 / SCSS変数 / JSON / 配列 / HEXリスト の形式で書き出してコピーできます。デザインツールやコードにそのまま貼り付けられます。
使い方
1
ベースカラーを選ぶ
カラーピッカーまたはHEXコードでベースとなる色を入力します。ランダム生成ボタンでも色を決められます。
2
配色スキームを選択
補色・類似色・トライアド・スプリット補色・モノクロから配色理論を選ぶと、調和パレットが即座に生成されます。
3
コピーして活用
各色をクリックしてHEXをコピー、または「すべてコピー」でパレット全体をまとめて取得できます。
カラーパレット生成ツールとは
ベースとなる1色から、色相環（カラーホイール）に基づいた調和の取れた配色を自動生成するWebツールです。補色・類似色・トライアド・スプリットコンプリメンタリ・モノクロといった代表的な配色理論に対応し、各色のHEX/RGB値の確認・コピー、色のロック、明度バリエーション、白黒テキストとのコントラスト比の確認、CSS変数などへのエクスポートができます。すべての計算はお使いのブラウザ内で完結し、色情報がサーバーに送信されることは一切ありません。
機能・特徴
- 5つの配色理論補色・類似色・トライアド・スプリット補色・モノクロの調和パレットをワンクリックで生成。
- HEX/RGBコピー各色のHEX・RGB値を表示。クリックするだけでコードをクリップボードにコピーできます。
- 明度＆コントラストTint/Shadeの明度バリエーションと、白黒テキストとのコントラスト比を同時に確認できます。
- プライバシー保護すべての処理はブラウザ内で完結。色情報はサーバーに送信されません。
活用シーン
- Webサイト・LPのカラースキーム設計
- ロゴ・ブランドカラーの配色決定
- UIデザインのアクセントカラー選定
- スライド・資料の統一感ある配色作り
- イラスト・グラフィックの配色アイデア出し
よくある質問
カラーパレット生成ツールは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録やインストールは不要で、ブラウザを開くだけですぐにお使いいただけます。生成回数の制限もありません。
補色・類似色・トライアドの違いは何ですか？
補色は色相環で正反対（180度）に位置する色で強いコントラストを生みます。類似色は隣り合う（±30度前後）色でまとまりのある印象に、トライアドは色相環を3等分（120度間隔）した鮮やかでバランスの良い配色です。スプリット補色は補色の両隣を使い、コントラストを保ちつつ調和させた配色です。
HEXとRGBはどのようにコピーできますか？
生成された各色のカードをクリックすると、HEXコードがクリップボードにコピーされます。RGB値もカード内に表示されるので、デザインツールやCSSにそのまま貼り付けてご利用いただけます。
コントラスト表示は何の役に立ちますか？
各色の上に白文字・黒文字どちらが読みやすいかと、そのコントラスト比（WCAG基準）を表示します。文字色や背景色として使う際に、可読性・アクセシビリティを確保できているかの目安になります。
生成した色や入力した色は保存されますか？
いいえ、入力・生成された色情報はサーバーに送信・保存されません。すべての処理はお使いのブラウザ内（クライアントサイド）で完結するため、安心してご利用いただけます。
色のロック機能はどう使いますか？
各色カードの南京錠アイコンをクリックすると、その色がロックされます。ロックした色は「ランダム生成」ボタンを押したり配色スキームを切り替えても固定されたまま残るため、気に入った1色を起点に他の色だけを試行錯誤したいときに便利です。もう一度アイコンを押すとロックを解除できます。
作成したパレットをCSSやSCSSに書き出せますか？
はい。「パレットをエクスポート」から CSS変数（:root のカスタムプロパティ）、SCSS変数、JSON配列、JavaScript配列、HEXリストの形式を選んでコードを生成し、ワンクリックでコピーできます。生成したコードはそのままスタイルシートやコードに貼り付けて利用できます。