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

画像から色を抽出、または調和する配色を作成。

数秒でプロ品質のパレットを

すべてのビジュアルアイデンティティはパレットから始まります。道は2つ：求める雰囲気をすでに持つ画像から出発して（写真・ムードボード・スクリーンショット）支配的な色を抽出するか、ブランドの1色から出発して色彩理論に基づく調和を構築するか。

60-30-10の法則：約60％を主色、30％を副色、10％をアクセントに。文字と背景のコントラストは当サイトのWCAGチェッカーでも確認を。

画像からどうやって色を抽出するの？

ブラウザ内で実行されるk-meansクラスタリングで抽出します。ピクセルを近い色の6つのグループに分類し、各グループの中心がパレットの色になります。画像に占める割合順に並びます。

補色とは何ですか？

色相環で正反対（180°）に位置する色です。このペアは最も強いコントラストを生み、背景に対してCTAボタンを際立たせるのに最適です。

類似色とトライアドはいつ使う？

類似色（±30°）は柔らかく統一感のある雰囲気を作り、背景に最適。トライアド（120°間隔の3色）は生き生きとしたバランスを提供します：1つを主役に、2つをアクセントに。

CSSエクスポートの使い方は？

生成されるブロックには:rootに貼るCSS変数（--color-1、--color-2…）とTailwind設定の同等品が含まれます。役割に応じて変数名を変える（--primary、--accent…）とコードが読みやすくなります。

画像はどこかに送信されますか？

いいえ。k-means分析は画像のサムネイル上でブラウザ内で完結します。大きな写真でも何も送信されません。