画像カラー抽出器
任意の画像から主要な色とパレットを抽出します。
どんな画像も使えるカラーパレットに
概要
画像カラー抽出ツールは画像を分析し、主要な色をすぐ使えるコード(HEX・RGB・HSL)として返します — デザイン・ブランディング向けです。色を一つずつスポイトで拾うのは遅く、画像の雰囲気を定義する色を見逃しがちです。このツールは画像全体をサンプリングして代表パレットにまとめ、アップロードなしでブラウザ内で処理するため、未公開の製品写真や非公開のブランド資産も端末に留まります。
使い方（ステップ）
- 1
画像を置く
写真・ロゴ・スクリーンショット・イラストすべて使えます。高解像度ほど代表性の高いパレットになります。
- 2
パレットを確認
主要色とアクセント色がHEX・RGB・HSL値とともに表示されます。
- 3
必要なコードをコピー
スウォッチをクリックしてコードをコピーし、CSS・デザインツール・ブランドガイドに貼り付けます。
仕組み
画像をキャンバスに描画し、生のRGBピクセルとして読み取ります。クラスタリングアルゴリズムが数百万のピクセルを出現頻度で重み付けした代表色にまとめ、主要パレットとアクセント色を生成します。各スウォッチはそのままコピーできるHEX・RGB・HSL値で表示されます。すべての処理がピクセルデータにローカルで行われるため、元画像は送信されません。
こんなときに使う
選んだ写真と調和するウェブ・スライドのテーマ構成。ロゴから正確なブランドカラーを抽出。イラストやUIモックアップ用の調和パレット作成。インスピレーション写真からのムードボード生成。製品写真から読みやすいテキスト・背景の組み合わせ選定。画像のトーンに合わせたCSSグラデーションやチャートの色。
よくある質問
同じ色を書く3つの方法です。HEX(#3b82f6)は簡潔でCSSやデザインツールで一般的。RGBは赤/緑/青チャンネルを並べます。HSL(色相・彩度・明度)は手で濃淡を作るのに最も簡単です。