カラーパレット生成ツール

画像から色を抽出し、調和のとれたカラーパレットを生成します。アクセシビリティチェック付きで、単色、類似色、補色、トライアド、テトラアドのパレットを作成します。

画像をアップロード

ここに画像をドロップするか、クリックしてアップロード

またはファイルを選択

パレットをエクスポート

生成されたパレット

#081D2B
コントラスト: AAA Large
17.20:1
#195E8D
コントラスト: AA Normal / AAA Large
6.94:1
#3C9CDD
コントラスト: AA Normal / AAA Large
6.99:1
#9DCEEE
コントラスト: AAA Large
12.50:1
#FFFFFF
コントラスト: AAA Large
21.00:1
5

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

いくつかの簡単なステップで美しいカラーパレットを生成します:

  • 画像をアップロードして色を抽出するか、手動でベースカラーを選択します
  • パレットタイプ(単色、類似色、補色など)を選択します
  • 必要に応じて色数を調整します
  • 気に入った色を選択し、好みの形式でエクスポートします

パレットタイプの説明

単色(Monochromatic)

単一の色相の明度と彩度のバリエーションを使用します。まとまりのある調和のとれた外観を作成します。

類似色(Analogous)

色相環で隣接する色を使用します。穏やかで快適なデザインを作成します。

補色(Complementary)

色相環で互いに反対側の色を使用します。高いコントラストと視覚的な興味を作成します。

トライアド(Triadic)

色相環の周りに等間隔に配置された3つの色を使用します。鮮やかでありながらバランスの取れたパレットを作成します。

テトラアド(Tetradic)

2つの補色のペアに配置された4つの色を使用します。豊富な色の多様性を提供します。

アクセシビリティとコントラスト

当サイトのツールは、パレットがアクセシビリティ基準を満たしていることを確認するために、色のコントラスト比をチェックします:

  • AA 通常:通常のテキスト(16px+)で4.5:1のコントラスト比
  • AAA 通常:通常のテキスト(16px+)で7:1のコントラスト比
  • AA 大:大きなテキスト(18px+ または 14px+ 太字)で3:1のコントラスト比