本文へスキップ
SPCXTools

カラーパレットジェネレーター

色を1つ選ぶだけで、色彩理論に基づいた調和の取れた5色のカラーパレットを作成します。

ローカルで動作 — ファイルは端末から出ません

ツールを読み込み中…

カラーパレットジェネレーターの使い方

  1. 1カラーピッカーでベースカラーを選ぶか、HEX/RGB/HSL値を入力、またはランダムをクリックします。
  2. 2補色、類似色、トライアドなどのカラースキームを選択します。
  3. 3スウォッチ（色見本）をクリックしてHEXコードをコピーします。
  4. 4パレット全体をCSSカスタムプロパティまたはJSONとしてコピーします。

1つの色からカラーパレットを作成

ウェブサイト、アプリ、プレゼン資料、ロゴ、ポスターなどのデザインにおいて、相性の良い配色を選ぶのは最も難しい作業の1つです。色彩理論には色相環に基づいた確実な配色ルールがあり、このカラーパレット生成ツールはそれを自動的に適用します。お好みの色やブランドカラーを1色選び、配色パターンを指定するだけで、プロジェクトにすぐコピーできる調和の取れた5色のパレットが完成します。

機能

  • 7つの配色パターン: 補色、類似色、トライアド、スプリット・コンプリメンタリー、テトラード、モノクロマティック、シェード。
  • 自由な基準色: HEX、RGB、HSL、CSSカラー名での指定、またはランダムな色の選択が可能です。
  • クリックでコピー: 各カラーチップをクリックするだけで色コードをコピーできます。
  • エクスポート: CSSカスタムプロパティまたはJSON配列として出力できます。
  • 読みやすいラベル: 背景色とのコントラストに合わせて、文字色が白黒に自動で切り替わります。

どの配色パターンを選ぶべき？

配色パターン 印象 おすすめの用途
補色 大胆、高コントラスト CTAボタン、スポーツ、セールス
類似色 落ち着き、調和 自然、ウェルネス、背景
トライアド 活発、バランス 子供向け製品、イラスト
スプリット・コンプリメンタリー 鮮やかだが強すぎない 強いアクセントが1つ必要なウェブサイト
テトラード リッチ、カラフル インフォグラフィック、グラフ
モノクロマティック エレガント、ミニマル 企業サイト、ポートフォリオ
シェード 体系的 デザインシステム、UIのステータス

カラーパレットからデザインへ

カラーパレットが決まったら、カラーコントラストチェッカーで背景とテキストの読みやすさを確認し、カラーコンバーターでRGB、HSL、印刷用CMYKに変換してみましょう。さらに、CSSグラデーションジェネレーターを使えば、2色を組み合わせた滑らかな背景を作成できます。

よくある質問

補色配色とは何ですか？
補色は色相環で向かい合う色（青とオレンジなど）です。強いコントラストにより、アクセントやCTA（コールトゥアクション）を目立たせるのに適しています。1色をメインカラーとし、補色はアクセントとして控えめに使うのが効果的です。
類似色、トライアド、テトラードの違いは何ですか？
類似色は色相環で隣り合う色で、落ち着きとまとまりがあります。トライアドは120度間隔の3色で、鮮やかかつバランスの取れた配色です。テトラード（スクエア）は90度間隔の4色を使う最もカラフルな配色で、通常は1色をメインカラーとして際立たせるのが最適です。
ウェブサイトで5色のカラーパレットをどう使えばよいですか？
一般的なアプローチは「60-30-10の法則」です。約60%をニュートラルな背景色、30%をメインカラー、10%をアクセントカラーにします。最も暗い色はテキストに使用し、テキストと背景の組み合わせは必ずコントラストチェッカーで確認しましょう。
ブランドカラーから作成できますか？
はい。ブランドカラーのHEXコードをベースカラーに入力すると、それを基準に配色が作成されます。ロゴやウェブサイトのスクリーンショットから色を取得する場合は、画像カラーピッカーをご利用ください。
色はどのように計算されていますか？
ベースカラーをHSL（色相、彩度、明度）に変換しています。配色は色相環の一定の角度で色相を回転させて生成します。一方、モノクロマティック（単色）やシェードは、色相を保ったまま明度を変化させています。

関連ツール

カラーコントラストチェッカーテキストが十分に読みやすいか確認し、WCAG基準をクリアする最も近い色を取得します。カラーコンバーターあらゆるカラーコードをHEX、RGB、HSL、HSV、CMYK間で変換し、コントラスト比もチェックできます。画像カラーピッカー画像上の任意の場所をクリックして、正確なHEX、RGB、HSLカラーコードと、画像の主要カラーパレットを取得します。CSSグラデーションジェネレーターグラデーション背景を直感的にデザインしてCSSをコピー。線形・放射状・円錐に対応しています。Box Shadow ジェネレーターリアルタイムのプレビューを見ながら、ソフト、シャープ、多重、インセットなどの影を微調整し、CSSをコピーできます。色覚シミュレーター色覚特性を持つ人の視点で画像をプレビューし、デザインのアクセシビリティを確保しましょう。