配色ラボ
好きな色を1つ選ぶと、 2〜5色の基本配色から、6・7色の実用配色まで生成できます。 生成した色に近い色名や日本の伝統色も探せます。
配色を作る・見本から選ぶ・基本を学ぶ
このページは、好きな色から2〜7色を作れる配色ジェネレーターです。 すでにある配色見本を探したい場合や、配色の考え方から知りたい場合は、 下の目的別ページへ進めます。
配色方式から選ぶ
どんな雰囲気にしたいかで、使いやすい配色方式は変わります。 気になる方式を選ぶと、上の配色ラボへそのまま反映できます。
補色
色相環で反対側に位置する2色を組み合わせます。コントラストが強い配色です。
類似色
基準色の近くにある色相を組み合わせます。まとまりを作りやすい配色です。
分裂補色
補色そのものではなく、その両隣の色を組み合わせる3色配色です。
トライアド
色相環を約120度ずつ3分割した3色を使います。
テトラード（矩形）
色相環上の2組の補色を矩形状に組み合わせる4色配色です。
スクエア
色相環を約90度ずつ4分割する4色配色です。
6色・実用配色
主役・補助・明暗の支え・ニュートラル・アクセントを役割分担した6色配色です。
7色・実用配色
6色の実用配色に第二アクセントを加えた上級向け7色配色です。
同系色
色相を大きく変えず、明るさとクロマを変えてまとめる配色です。
明暗配色
同じ色相を中心に、暗い色から明るい色まで段階的に並べます。
迷ったら、目的から選ぶ
配色理論の名前を覚えていなくても大丈夫です。 「まとまり」「強調」「色数」の3つから考えると、 方式を選びやすくなります。
色数別に配色パターンを作る
2〜5色は基本配色として使いやすく、6・7色は役割を増やした上級向け配色です。 色数が増えるほど、すべてを同じ強さで使わず、主役・補助・背景・アクセントの役割を決めるとまとまりやすくなります。
最も広く使う色。多色配色では明るい補助色やニュートラルを背景へ回すと安定します。
ブランドやテーマの中心になる色。色数が増えても主役は1〜2色に絞ると見やすくなります。
CTAや強調に使う色。6・7色では第二アクセントも少量に抑えると役割がぶれません。
6色・7色は、色相環を均等に分割しただけの配色ではありません。 色しるべでは明るい補助色・暗い補助色・ニュートラル・アクセントを加え、 実際のWeb・資料・ブランド・UIで使いやすい構成として生成します。
配色を決めたら、6方向から確認する
2〜7色すべてで同じ監査を行えます。 「色が多いほど豪華」で終わらず、実際に使えるかまで確認できます。
配色を作るときの基本
自動生成された色は、そのまま全部を同じ面積で使う必要はありません。 実際のデザインでは、役割と使用量を決めるとまとまりやすくなります。
まず基準色を決める
ロゴ、ブランドカラー、好きな色など、 最初に主役となる1色を決めます。 色名でもHEXでも配色ラボに入力できます。
色に役割を持たせる
背景、本文、メインカラー、アクセントなど、 色ごとに役割を分けると使いやすくなります。
面積のバランスを見る
強い色は少量でも目立ちます。 配色の印象は色の組み合わせだけでなく、 使う面積によっても変わります。
配色から、さらに色を調べる
気になる色が見つかったら、 色図鑑や比較ツール、色文化へ進んで詳しく確認できます。
配色ラボについて
どの配色方式を選べばいいですか？
2色なら補色、3色ならトライアド、4色ならテトラードやスクエア、 5色なら類似色・同系色・明暗配色が使いやすいです。 6色・7色は、役割分担を前提にした「実用配色」から試すと分かりやすいです。
色名ではなくHEXからも配色を作れますか？
はい。 基準色には色しるべの登録色だけでなく、 #7F72B2 のようなHEXカラーコードも入力できます。
生成された色はそのままデザインに使えますか？
配色候補として利用できます。 ただし、文字と背景の組み合わせでは コントラストや可読性も別途確認してください。 用途や表示環境によって最適な使い方は変わります。
日本の伝統色に近い色も分かりますか？
はい。 配色ラボでは生成色ごとに、 色しるべへ登録されている近い色や 日本の伝統色を探せる設計になっています。
写真・画像の「この点の色」を調べる
写真の中で気になった色を基準色にしたいときに使えます。 画像をアップロードしてカーソルを合わせると、元画像のその1pxのHEX・RGB・HSLをリアルタイムで確認できます。ルーペと周辺平均にも対応しています。
2〜7色の配色を無料で作る
好きな色を指定して、2色・3色・4色以上の配色をその場で組み合わせられます。作ったカラーパレットは比較・保存・共有までつなげられます。
配色ジェネレーターについてよくある質問
無料で配色を作れますか？
はい。色しるべの配色ラボでは、2〜7色の組み合わせをブラウザ上で作れます。
3色の配色を作るにはどうすればいいですか？
3色を選び、主役・補助・アクセントの役割を意識するとまとまりやすくなります。3色配色の考え方は専用記事でも確認できます。
好きな色を指定してカラーパレットを作れますか？
はい。基準にしたい色を指定し、他の色を追加してカラーパレットを組めます。
画像からカラーパレットを作れますか？
はい。画像の主要色を色抽出ツールで取得し、その色を配色ラボへ引き継げます。
スマホでも使えますか？
はい。ブラウザ上で利用できます。画面幅に合わせて操作しやすい表示になります。
作った配色を保存できますか？
はい。マイカラーや案件パレットを使って、あとで再利用できる形で整理できます。
好きな色を並べて、配色をシミュレーションする
2色・3色・4色以上を実際に並べて、見た目のバランスを確認できます。色を決めてから配色を考えたいときにも、候補を比べながら使えます。
色覚多様性に配慮した配色の考え方を確認する
シミュレーション結果だけで合否を決めず、色だけに頼らない情報設計、コントラスト、文字・形・アイコンの併用まで一緒に確認します。
配色とは
配色とは、2色以上を目的に合わせて組み合わせ、 色の役割や使う面積まで含めて整えることです。 色相だけでなく、明るさ・鮮やかさ・使用量でも見え方は変わります。
赤・青・緑などの色み。補色・類似色・トライアドなどの組み合わせに関わります。
色の明るさ。文字と背景の読みやすさや、モノクロにしたときの識別にも影響します。
色の鮮やかさ。高彩度色が多いほど強く見えやすく、低彩度色は落ち着きやすくなります。
同じ3色でも、背景・主役・アクセントの使用量を変えると印象は大きく変わります。
すぐ試せる配色パターン例
色しるべの配色エンジンで実際に生成した見本です。 気になる組み合わせは、そのまま上の配色ラボへ読み込んで調整できます。
青 × トライアド
トライアドで 自動生成した配色です。
赤 × 分裂補色
分裂補色で 自動生成した配色です。
緑 × 類似色
類似色で 自動生成した配色です。
ベージュ × 同系色
同系色で 自動生成した配色です。
紫 × 補色
補色で 自動生成した配色です。
オレンジ × 明暗配色
明暗配色で 自動生成した配色です。
青 × テトラード
テトラード（矩形）で 自動生成した配色です。
緑 × 6色実用配色
6色・実用配色で 自動生成した配色です。
紫 × 7色実用配色
7色・実用配色で 自動生成した配色です。
配色を「読む・見る・作る」でつなげる
考え方を理解したら、2〜5色の実例や補色を確認し、そのまま配色ラボで試せます。
配色を作ったあとの6つのチェック
用途、文字、色覚、明度、印刷、実装を1つずつ切り替えて確認できます。 必要な項目だけ見れば、長いページを何度もスクロールする必要はありません。
同じ配色を、用途ごとの「役割」に当てはめて見る
Web UI、ブランド・ロゴ、資料・グラフ、印刷レイアウトで、背景・主役・補助・アクセントの使い方を見比べられます。 配色の正解を決めるものではなく、実際に使い始めるための役割分担例です。
ここでは主役色・補助色・アクセント色と、最も明るい色・暗い色を使って例を作っています。ロゴ規定、ブランド設計、印刷条件、アクセシビリティ要件がある場合はそちらを優先してください。
この配色を背景・文字に使ったときの読みやすさ
生成した各色を背景にして、白・黒文字と配色内の色を文字として使った場合のコントラストを一括確認します。 通常本文4.5:1、大きな文字3:1、AAA本文7:1を区別して表示します。
背景画像、グラデーション、透明度、細いフォントなどを使う場合は、実際の表示でも追加確認してください。
配色全体を、色覚タイプ別に比較する
配色を作ると、生成された2〜7色をP型・D型・T型の参考シミュレーションでも並べます。 各条件で最も近づく色の組み合わせとΔE00を確認できます。
ΔE00が大きくても、色だけに意味や状態を依存させる設計は避けてください。 文字、アイコン、形、線種、模様などの手掛かりを併用することが重要です。
色をなくして「明るさの差」だけで配色を見る
配色から色相を取り除き、各色の相対輝度を保ったグレースケールで比較します。 色に頼らなくても違いが残るかを、色面とコントラスト比で確認できます。
3:1以上でも、色そのものの識別が意味を持つ場面では文字・記号・形・模様など別の手掛かりが必要です。 この監査だけでアクセシビリティの合否を決めるものではありません。
画面用RGBと、印刷用CMYK参考値を並べる
配色をsRGBの色面・RGB数値・CMYK参考換算に分けて確認できます。 CMYKはICCプロファイルを使わない一般的な数値換算で、実際の印刷色そのものを再現するものではありません。
CMYKは用紙・インキ・印刷機・印刷条件に依存します。正確な色変換やソフトプルーフには、出力先に合ったICCプロファイルが必要です。
この配色を、そのままCSS・デザイントークンへ
色番号だけでなく、primary・secondary・accent・surface・on-primary などの意味を持つトークンへ変換します。 CSS Custom Properties と JSON を、そのまま制作環境へコピーできます。
ブランド規定や既存デザインシステムがある場合は、primary / accent / surface の割り当てをプロジェクト側のルールに合わせて調整してください。