Last deploy: 2026-03-21 16:20 JST · c97e6ef

配色ジェネレーター

ベースカラーから調和するカラーパレットを自動生成します

ベースカラーを選択

#

ハーモニーモード

生成パレット

プレビュー

見出しテキスト

本文テキストのサンプルです。この配色パターンが実際のWebデザインでどのように見えるかを確認できます。

色覚多様性チェック

パレットがP型・D型色覚でどのように見えるか確認できます

通常

P型 (Protanopia)

D型 (Deuteranopia)

エクスポート

  

配色理論の基礎

配色(カラーハーモニー)とは、複数の色を組み合わせて視覚的に調和のとれた印象を作る技法です。 色相環(カラーホイール)上の色の位置関係を利用することで、科学的根拠に基づいた美しい配色を簡単に生成できます。

色相環とハーモニーパターン

色相環は赤・黄・青を基本とした12色(または360度)の円環で、色の関係性を視覚的に示したものです。 このツールでは、以下の6つのハーモニーパターンに対応しています。

  • 補色(Complementary) — 色相環の対角にある2色。コントラストが強く、目を引くデザインに最適
  • 類似色(Analogous) — 色相環上で隣り合う3色。統一感があり、落ち着いた印象を与えます
  • トライアド(Triadic) — 色相環を3等分した3色。バランスがよく、活気のあるデザインに向いています
  • スプリット補色 — 補色の両隣2色を使うパターン。補色よりやや穏やかなコントラストが得られます
  • テトラード(Square) — 色相環を4等分した4色。多色使いながら均整のとれたパレットです
  • モノクロマティック — 1色の明度・彩度を変化させた配色。統一感が最も高く、洗練された印象を演出します

Webデザインの配色のコツ

Webデザインで配色を決める際は、60-30-10ルールが定番です。 背景色に60%、サブカラーに30%、アクセントカラーに10%の割合で使うことで、自然とバランスのよいデザインになります。

また、アクセシビリティの観点から、テキストと背景のコントラスト比はWCAG 2.1の基準(4.5:1以上)を意識することが大切です。 このツールの色覚多様性チェック機能を使えば、色覚の違いによる見え方の差も確認できます。