画像をドラッグ＆ドロップ
またはクリックしてファイルを選択（JPEG / PNG / WebP / GIF）
135°
🎨 カラーストップ
通常テキスト（16px）のプレビューです。この文字が読みやすいかどうかを確認できます。
大きいテキスト（24px）
-
コントラスト比
WCAG 2.1 判定
⭐ お気に入りカラー
お気に入りはまだありません
💡 活用ガイド
🌐 Webデザイン
- 写真からブランドカラーを抽出してサイトカラーに活用
- 配色理論でバランスの取れたカラースキームを構築
- WCAGコントラスト基準を満たす配色チェック
🎨 グラフィックデザイン
- 参考画像から配色パレットを一瞬で生成
- 補色・類似色などの理論に基づいた配色提案
- グラデーションのCSS/SVGコードを即取得
📊 プレゼン・資料作成
- 企業ロゴの画像からコーポレートカラーを抽出
- 見やすい文字色と背景色の組み合わせを自動判定
- 統一感のあるカラーパレットを素早く生成
📱 アプリ・UI開発
- ダークモード・ライトモード用のカラーペアを検証
- アクセシビリティ（WCAG AA/AAA）準拠を確認
- グラデーションボタンやバナーのCSS出力
🎓 豆知識
🎨 配色理論の歴史
色彩理論の基礎は18世紀、ニュートンが光のスペクトルを発見したことに遡ります。その後、ゲーテやイッテンが色の調和理論を体系化し、現代の配色ルール（補色、類似色、トライアドなど）が確立されました。
👁️ WCAGとは
WCAGはW3Cが策定した「Web Content Accessibility Guidelines（ウェブコンテンツ・アクセシビリティ・ガイドライン）」の略称です。コントラスト比は通常テキストで4.5:1以上（AA）、大きいテキストで3:1以上が推奨されています。
🌈 Median Cutアルゴリズム
画像の主要色を抽出するMedian Cut法は、色空間を再帰的に二分割して代表色を求めるアルゴリズムです。1979年にPaul Heckbertが提案し、GIFの減色処理にも使われています。k-meansより高速で決定的な結果が得られます。
💎 Pro Tips
01
60-30-10ルール
メインカラー60%、セカンダリ30%、アクセント10%の比率で配色すると、バランスの良いデザインになります。配色生成タブで各色を選びましょう。
02
コントラストは最優先
美しい配色でも、テキストが読めなければ意味がありません。必ずコントラストチェッカーでWCAG AA以上を確認してからデザインに適用しましょう。
03
写真から配色を学ぶ
プロの写真やアート作品から色を抽出すると、自然で調和の取れた配色が得られます。画像抽出タブで気に入った画像の配色を分析してみましょう。
❓ よくある質問
画像からの色抽出はどのような仕組みですか？
Median Cut（中央値分割）アルゴリズムを使用しています。画像を200×200にダウンサンプルした後、RGB色空間を再帰的に分割して代表色を算出します。すべてブラウザ上で処理されるため、画像がサーバーに送信されることはありません。
配色理論の6つのルールの違いは？
補色（色相環の反対）はコントラスト重視、類似色（隣り合う色）は調和重視、トライアド（3等分）はバランスの良い配色です。目的に応じてルールを使い分けることで、意図した印象のデザインが作れます。
WCAGのAA基準とAAA基準の違いは？
AA基準はコントラスト比4.5:1以上（大きいテキストは3:1）、AAA基準は7:1以上（大きいテキストは4.5:1）です。一般的にはAA基準をクリアすれば十分ですが、官公庁サイトなどではAAA基準が求められることもあります。
グラデーションのCSSコードはそのまま使えますか？
はい、生成されるCSSコードはそのままスタイルシートにコピー＆ペーストで使用できます。linear-gradientとradial-gradientの両方に対応しており、すべてのモダンブラウザで動作します。
お気に入りに保存した色はどこに保存されますか？
お気に入りカラーはブラウザのlocalStorageに保存されます。同じブラウザであれば次回アクセス時にも復元されますが、ブラウザのデータを削除すると消えるため、重要な配色はメモに控えておくことをおすすめします。