FIRST CH TOOLS LOCAL PROCESSING — 画像はサーバーに送信されません EN

FIRST CH TOOLS / デザイン / 45 PALETTE EXTRACTOR

画像からカラーパレット抽出

参考サイトのスクリーンショットや支給されたロゴから、主要な色を最大8色まで取り出します。HEX / RGB / OKLCH をそのままコピーでき、白文字・黒文字とのコントラスト比も並べて確認できます。画像はお使いの端末から出ません。

ここに画像をドラッグ&ドロップ またはクリックしてファイルを選択（PNG / JPEG / WebP / GIF / AVIF / SVG・貼り付けも可）

How to Use

  1. 画像を入れるスクリーンショットや写真をドラッグ&ドロップ、クリックで選択、または ⌘/Ctrl+V で貼り付け。
  2. 色数を決める2〜8色から選ぶとその場で抽出し直します。背景の白や影の黒が邪魔なときはチェックを入れたままにしてください。
  3. コピーする色ごとに HEX / RGB / OKLCH をコピーするか、CSSカスタムプロパティ・JSONでまとめて受け取れます。

About This Tool

画像を面積が25,600画素になるまで縮小してCanvasに描き、そこからメディアンカット法で色を分類します。RGB空間の箱を「画素数×いちばん幅のある成分」が大きい順に半分ずつ割っていき、最後に残った箱の平均色を代表色とする方法です。写真のように色が連続している画像でも、支給ロゴのように数色しかない画像でも同じ手順で扱えます。並び順は占有率が大きい順で、帯の幅もその比率に合わせています。

「ほぼ白・ほぼ黒の画素を無視する」を入れると、無彩色に近くて極端に明るい（または暗い）画素を数えません。白い用紙・白背景のスクリーンショット・影がほとんどを占める写真から、ブランドカラーだけを拾いたいときに使います。外した結果として色が1つも残らない場合はチェックを外してください。

OKLCH は明度（L）・彩度（C）・色相（H）を人の見え方に沿って表す新しい記法で、同じ色相のまま明るさだけ動かす調整に向いています。1色ぶんの変換や明度パレットは Colorコード変換、拾った色を並べてグラデーションにするなら CSSグラデーションジェネレーター が対になります。各色に添えた白文字・黒文字とのコントラスト比は WCAG 2.1 の式で、本文に使うなら 4.5:1 以上が目安です（詳細な判定は コントラスト比チェッカー へ）。

画像の読み込みも量子化もブラウザ内で行い、サーバーへは送信しません。設定はURLパラメータでも渡せます（画像の選択は手元で行います）。例: /palette/?n=8&skip=0。

Other Tools