カラーピッカー
任意の色を選び、Hex / RGB / HSL / OKLCH をシェードやハーモニー付きでコピー。
今すぐ試す画像から色を抽出
写真、ロゴ、スクリーンショットをアップロードすると、すぐにカラーパレットが得られます。HEX・RGB・HSL・OKLCHのコードをそのままコピー可能。処理はすべてブラウザ内で行われます。
またはここにドラッグ＆ドロップ
JPEG、PNG、WebP、SVG形式で、最大40 MBまで
手元に画像がない場合は、サンプルで試してみましょう：
カラーモード
色を抽出する画像をアップロード
画像からカラーパレットを抽出する方法
画像カラーピッカーは写真を解析し、その中で最も多く使われている色を自動で抽出して、プロジェクトですぐ使えるパレットを作成します。写真、スクリーンショット、ブランドのロゴを使える色のセットに変える、最も手早い方法です。
探している色がすでに決まっているときに使うカラーピッカーや、ゼロから配色を探る色相環と違い、このツールは実際の画像から始めます。自分の画像、クライアントの画像、パレットにしたいあらゆるビジュアル参考資料が対象です。
端末から画像をアップロードしてください。ツールはお使いのブラウザ内で解析し、サーバーには一切送信しません。主要な色をHex・RGB・HSL・OKLCHで返し、コピーやエクスポートができます。メインの色から配色やトーンのバリエーションを作成したり、アクセシビリティのコントラストを確認したりすることも、Matizlyの他のツールと同様に可能です。
実際の画像を出発点にしたいあらゆる場面で役立ちます。商品写真との統一感を保つ、参考画像からパレットを組み立てる、写真で見た色の組み合わせを再現する、といった用途です。
使い方
1. 画像をアップロード
写真、スクリーンショット、ロゴを枠内にドラッグするか、「画像をアップロード」を押します。最大40MBのJPEG・PNG・WebP・SVGに対応し、スマホのギャラリーやカメラからも使えます。
2. パレットのスタイルを選ぶ
「カラーモード」で優先する色を決めます：鮮やか、明るい、くすんだ、深い、暗い。色の数を変えたり、画像上の点を動かしたりできます。
3. コピーまたはエクスポート
各コードをHEX・RGB・HSL・OKLCHでコピーしたり、パレットをCSS・Tailwind・Figmaにエクスポートしたり、色相環で開いてさらに調整したりできます。
画像から色を抽出する用途
ロゴからブランドパレット
ロゴの正確な色を取得し、Web、SNS、印刷物で同じ色を使えます。
写真に合うWebサイト
商品写真やヘッダー画像の色を取り出し、ボタン、背景、テキストに使えます。
写真やアート作品からのインスピレーション
気に入った風景、絵画、イラストを、デザインにすぐ使えるパレットに変えられます。
SNSでの統一感
参考画像をもとに、すべての投稿で同じ色の雰囲気を保てます。
画像はブラウザの外に出ません
解析はお使いの端末内で行われます。画像はサーバーにアップロードされず、保存もされません。プライベートな写真やクライアントの素材も安心して使えます。
だから高速です。画像のアップロードやサーバーでの処理を待つ必要がありません。
よくある質問
端末から画像をアップロードしてください。ツールが自動で解析し、主要な色のパレットをHex・RGB・HSL・OKLCHのコード付きで生成します。
いいえ。解析はすべてブラウザ内で直接行われます。画像がサーバーに送信・保存されることはありません。
初期設定では、画像を最もよく表す色でパレットを生成します。抽出する色の数を調整して、シンプルなパレットにも詳細なパレットにもできます。
端末からPNG、JPG、WEBP、SVGファイルをアップロードできます。SVGに埋め込みHTMLが含まれる場合、その部分は無視され、図形と色のみが解析されます。
はい。パレットを抽出した後、任意の色をベースに選ぶと、類似色・補色・トライアドなどの配色を自動で生成できます。
商品写真からパレットを作る、参考画像の色の組み合わせを再現する、既存のビジュアル素材から統一感のある色のセットを作る、といった用途に役立ちます。
画像上の点を気になる場所までドラッグしてください。色がHEX・RGB・HSL・OKLCHのコードとともに即座に更新されます。
はい。ロゴをSVGか高解像度のPNGでアップロードし、色の数をロゴの色数に合わせて調整してください。
はい。ギャラリーから写真を選ぶか、カメラで撮影して、パソコンと同じように色を抽出できます。