画像カラーパレット抽出
使い方
PNG、JPEG、WebP、AVIF画像をアップロードすると、ブラウザ内で主要色の近似値を最大8色抽出し、色コードをコピーまたは保存できます。
お気に入りの写真やイラストから、調和のとれた美しいカラーパレット(配色)を自動抽出するデザインツールです。メインカラーやアクセントカラーを瞬時に特定し、HEXやRGBのカラーコードをワンクリックでコピーできます。
💡 かんたん3ステップ利用ガイド
参考にしたい風景写真やグラフィックを画面内にドロップします。
色空間解析により、画像内で最も調和している主要な色パレットが一覧表示されます。
色見本をクリックするだけで「#019B98」などのコードがコピーでき、デザイン作業に直結します。
利用場面
写真、イラスト、画面キャプチャから配色の参考を素早くまとめるときに使えます。
計算・処理方法
画像を最大96 × 96ピクセルに縮小して標本化し、アルファ値128未満の画素を除外します。RGBを量子化し、出現数と鮮やかさで並べて最大8色を残します。
具体例
室内写真を読み込み、壁や家具に近いHEX値をコピーするか、HEX、RGB、HSL、CSS変数を含むテキストファイルを保存します。
制限とデータ処理
画像を縮小して色階調を量子化し、アルファ値128未満の画素を除外するため、グラデーション、透明部分、小面積の色は統合または省略される場合があります。デコードできない画像や上限超過の画像からは色票を作成せず、EXIFなどの画像メタデータも色票には含めません。読込中の独立したキャンセルボタンはなく、別のファイルを選ぶと古い結果を無視します。
画像のデコード、標本化、色票の抽出、テキストファイルの作成は現在のブラウザ内で完了します。画像や抽出値をGoGo Toolsのバックエンドへ送信しません。
カラーパレット抽出・K-MeansクラスタリングとWCAGコントラスト完全ガイド
1. K-Meansクラスタリングによる代表色の自動抽出
画像内の数百万色のピクセルデータを3次元色空間上でクラスタリングし、最も支配的なメインカラーやアクセントカラーを自動抽出するアルゴリズムを解説します。
2. HEX・RGB・HSL・CIELAB表色系の特徴
Webデザイン標準のHEX/RGB表記から、直感的な調色が可能なHSL、人間の視覚特性に最も近い国際照明委員会(CIE)のLab規格まで網羅しています。
3. W3C WCAG 2.1 カラーアクセシビリティ基準
文字と背景色のコントラスト比が4.5:1以上(Level AA規格)を満たしているかを検証し、誰にとっても見やすいユニバーサルデザインを支援します。
Feedback
このツールへのフィードバック
ツールの提案や不具合報告を送れます。
よくある質問
画像カラーパレット抽出:どの画像を使用できますか?
20 MB以下かつ3,200万画素以下のPNG、JPEG、WebP、AVIF画像を使用できます。抽出数は常に最大8色で、色数を指定する設定はありません。
画像カラーパレット抽出:どの色データを確認できますか?
主要色の近似値を最大8色表示し、HEX値を個別にコピーできます。保存するテキストファイルにはRGB、HSL、CSS変数も含まれます。
画像カラーパレット抽出:一部の色が表示されないのはなぜですか?
画像を縮小して色階調を量子化し、アルファ値128未満の画素を除外するため、グラデーション、透明部分、小面積の色は統合または省略される場合があります。デコードできない画像や上限超過の画像からは色票を作成せず、EXIFなどの画像メタデータも色票には含めません。読込中の独立したキャンセルボタンはなく、別のファイルを選ぶと古い結果を無視します。
画像カラーパレット抽出:画像や色票は送信されますか?
画像のデコード、標本化、色票の抽出、テキストファイルの作成は現在のブラウザ内で完了します。画像や抽出値をGoGo Toolsのバックエンドへ送信しません。