画像から主要なカラーパレットを瞬時に抽出。HEX・RGB・HSLスウォッチの生成、CSSやTailwindトークンの書き出し、WCAGアクセシビリティのコントラスト比検証までブラウザ上で完結します。
ここに画像をドラッグ＆ドロップ
またはクリックしてファイルを選択（PNG、JPG、WEBP、SVG対応）
画像から主要なカラーパレットを瞬時に高精度抽出。支配的なHEX、RGB、HSLスウォッチの生成、CSSカスタムプロパティやTailwindトークンの書き出し、WCAGアクセシビリティ基準のコントラスト比検証に完全対応。
画像から抽出する代表色の目標選定数です。心地よい住空間のインテリアコーディネート、大切な家族写真のアルバム整理、デジタルデザインシステムにおいて、5〜7色を選定することで、背景・ベース面・主役色（プライマリ）・アクセントカラー・高コントラストな文字色に至るまで、極めて調和の取れた美しい色彩バランスを実現できます。
色彩を分離・集約するための数学的クラスタリング手法です。「改良型メディアンカット（Modified Median Cut）」はRGB空間を再帰的に分割して繊細なアクセントカラーを漏れなく捕捉し、「K-Means法」はCIELAB空間におけるユークリッド距離に基づいて統計的な出現頻度を忠実に再現します。「彩度強調（Saturation Boost）」は高彩度ピクセルに指数関数的重み（S^1.5）を付与し、背景のくすんだテクスチャによる主役色の埋没を防ぎます。
均等色空間CIELAB上で、抽出されたスウォッチ間に求められる最小限の知覚的色距離です。2.0未満は人間の肉眼では識別が極めて困難であり、5.0〜12.0は自然で調和のとれた識別しやすい明瞭な差異を生み出します。15.0以上に設定すると同系色の重複を徹底排除し、メリハリのある明快なパレット構成を保てます。
ピクセル解析を実行するキャンバスの最大正規化サイズです。長辺を256pxにダウンサンプリングすることで、65,536個のサンプリングピクセルを16ミリ秒未満で高速走査。スマートフォンやPCの端末負荷・バッテリー消費を最小限に抑えつつ、数千万画素の写真本来の色彩分布や色調バランスを忠実に維持します。
半透明ピクセルを除外するか中立背景に合成するかを決定する不透明度の境界値です。しきい値を128（不透明度50%）に設定することで、透明PNGの輪郭部分、透かし（ウォーターマーク）、ドロップシャドウの境界ノイズに起因する不自然な漆黒（#000000）や濁った濁灰色のスウォッチ混入を確実に防止します。
一般的なRGBユークリッド距離（sqrt(ΔR² + ΔG² + ΔB²)）は、人間の視覚生理学と一致しません。人間の網膜錐体細胞は青や赤よりも緑の波長変化（約555nm）に極めて敏感だからです。CIELABやOKLABなどの知覚的均等色空間でクラスタリングを行うことで、濁った茶褐色のノイズアーティファクトを排除し、写真本来の生き生きとした彩度を人間の見た目通り忠実に再現できます。
屋外風景や日常のスナップ写真では、全ピクセルの60〜80%を曇り空、アスファルト、木陰、室内の壁などの低彩度領域が占めがちです。単純なピクセル出現頻度のみで計算すると、似通った灰色ばかりの退屈なパレットになってしまいます。ピクセルの投票重みに彩度の非線形指数（S^1.5）を乗算することで、ランナーの鮮烈なウェアや家族の食卓を彩るフラワーアレンジメントなど、写真の主役となる印象的な色彩を背景色と同等以上に際立たせることができます。
抽出した中間色スウォッチの上に、相対輝度を測定せず安易に純白（#FFFFFF）のテキストを配置してはいけません。WCAG 2.1基準では、標準本文で4.5:1以上、太字または18pt以上の大見出しで3.0:1以上のコントラスト比が義務付けられています。スウォッチの相対輝度（L）が0.18を超える場合、純白テキストはアクセシビリティ基準を満たせなくなります。目の疲労を防ぎ視認性を保つため、深みのあるダークスレート（#0F172A）の文字色を組み合わせましょう。
透過PNG画像を処理する際、レンダラーは完全透過ピクセルを「RGBA(0, 0, 0, 0)」として読み取ります。明確なアルファカットオフ処理を施さない場合、透過領域の広いアイコンやイラストでは、最も支配的な色として誤って漆黒（#000000）が抽出されてしまいます。アルファしきい値を128に設定するか、白背景マット（マット合成）上で処理することで、輪郭の黒ずみや不要な暗色スウォッチを完全に排除できます。
写真から抽出したカラーパレットを住まいのインテリアやプレゼン資料、Webデザインに展開する際は、視覚全体の約60%を穏やかな基調色（ベースカラー）、30%を構造を支える配合色（メインカラー）、10%を最も鮮やかな強調色（アクセントカラー）に配分します。この黄金比率は自然界の美しい景観バランスを模しており、視覚的な散漫さや目の疲れを防いで洗練された心地よい空間を作り出します。
知覚的色差（Delta-E）のしきい値を15.0または18.0に引き上げ、抽出エンジンをK-Means法から「改良型メディアンカット（Modified Median Cut）」に切り替えてください。肉眼で区別のつかない近接色が強制的に統合され、色相空間のより広範な領域から色を拾い上げるため、明暗や彩度の豊かなバリエーションが確実に得られます。
Webブラウザの同一生成元ポリシー（CORS）により、適切なアクセス許可ヘッダーのない外部サーバー上の画像に対してピクセル解析が遮断されることが原因です。解決するには、画像を一度PCやスマートフォンに保存してからファイル選択で読み込むか、ブラウザ上に直接ドラッグ＆ドロップするか、クリップボードから直接貼り付け（Ctrl+V / Cmd+V）を行ってください。ブラウザ内ローカル処理で安全に即座解析されます。
超高解像度カメラの撮影データには4,000万個以上のピクセルが含まれます。本ツールは解析時に256pxのサンプリンググリッドへ自動ダウンサンプリングを行いますが、モバイル端末で巨大ファイルをデコードする際に瞬間的な負荷が生じる場合があります。ブラウザ設定で「ハードウェアアクセラレーション」を有効にするか、極端に重い画像は事前にリサイズしてから読み込んでください。
近年のiPhone、iPad、広色域対応ディスプレイは「Display P3」の色空間で写真を表示しますが、標準的なカラーコード（HEX）は「sRGB」空間に制限されているためです。鮮烈なネオングリーンや深紅の夕景などの豊かな色彩を損なわないよう、パレット設定で広色域P3モードを有効にするか、CSSの「color(display-p3 r g b)」形式でカラー値を書き出し、画面本来の鮮やかな発色を再現してください。
画像をHTMLの<canvas>要素に描画し、getImageData()メソッドを用いてピクセルごとの生RGBAデータを取得します。その後、色度ヒストグラムを作成し、CIELAB色空間上で「改良型メディアンカット」や「K-Means法」などのクラスタリングアルゴリズムを適用して類似色をまとめ上げます。本ツールのような先進的なクライアントサイド処理ツールなら、外部サーバーにプライベートな写真を送信することなく、ブラウザ内で全演算を16ミリ秒未満で完了します。
視覚的にバランスの取れた色彩豊かなパレットを作成するには「改良型メディアンカット（MMC）」が業界の標準です。最も色幅の広い軸に沿って色の直方体（バウンディングボックス）を反復分割するため、広大な背景に埋もれがちな小さなアクセントカラーも確実に抽出できます。一方、写真全体の純粋な統計的占有率や階調の忠実性を最優先する場合は、5〜8個の重心（セントロイド）を設定した「K-Meansクラスタリング」が最適です。
最大の根本的相違は、RGBがディスプレイの物理的な発光強度を均一でない格子上で測るのに対し、CIELAB Delta-E（ΔE）は「人間の肉眼が感じる色の違い（知覚均等性）」を数値化している点です。標準RGBでは緑色の10ポイントの変化は青色の同等の変化よりも圧倒的に目立って知覚されるため、類似色の重複や濁りが生じやすくなります。CIELABは錐体細胞の視覚反応をモデル化しているため、数学的な距離がそのまま人間の受ける色彩の差異と合致し、より自然なパレットが得られます。
WCAG 2.1基準への適合を検証するには、各カラースウォッチの線形化RGB値から相対輝度公式「L = 0.2126*R_lin + 0.7152*G_lin + 0.0722*B_lin」を求め、背景との対比計算「(L_明 + 0.05) / (L_暗 + 0.05)」でコントラスト比を算出します。本文テキストでは4.5:1以上、18pt以上の大見出しでは3.0:1以上（厳格なAAA基準では7.0:1以上）の確保が必要です。基準を満たさない場合は、明度を微調整するか、文字色を深色スレート（#0F172A）と純白（#FFFFFF）の間で反転させて視認性を担保します。
理想的なカラーパレットは通常5〜6色で構成されます。全体の約60%を占める支配的なベースカラー（基調色）、30%を占める1〜2色のメインカラー（配合色）、10%の視線を集めるアクセントカラー（強調色）、そして高コントラストな2種類のテキスト用無彩色（明・暗）です。デザインやインテリアの現場で長年親しまれている「60-30-10の法則」に則ることで、視覚的な煩雑さを防ぎ、誰にとっても心地よくまとまりのある配色が完成します。
黄金比の寸法と黄金長方形の比率を瞬時に計算。φ（1.618）による調和分割、タイポグラフィのスケール設定、レスポンシブなレイアウトグリッドを生成します。
ニューモーフィズム（Soft UI）の凸面・凹面・インセット陰影を直感デザイン。光の照射角・ぼかし・コントラストをリアルタイムに微調整し、最適化されたCSS・Tailwind・SCSSコードを即座にコピーできます。
補色、類似色、三色配色、分裂補色などの調和パレットを瞬時に生成。リアルタイムなWCAGコントラスト比検証とCSS/Tailwindエクスポートに対応したブラウザ完結型配色ツール。
backdrop-filterのぼかし、透明度、ボーダー、陰影をリアルタイムに調整し、モダンなCSSグラスモーフィズムやすりガラスUIコードを即座に生成・コピーできます。
画質を落とさずにブラウザ上で画像を高速圧縮。JPG、PNG、WebPのファイル容量をサーバー送信ゼロで軽量化。目標KB逆算機能やZIP一括書き出しにも対応しています。
CSS linear、radial、conicグラデーションの完全な構文ガイド。二重位置カラーストップ、OKLCH色空間補間、放射形状制御、テキストマスク、Tailwind CSS / SVG連携まで網羅。