カラーパレット抽出
カラーパレット抽出は、画像から主要な配色（代表色）を自動で抽出し、カラーパレットを作成できるツールです。写真やデザイン画像をアップロードすると、画像全体を解析して代表的な色を最大 12 色まで取り出し、それぞれの占有率（画像内で各色が占める割合）とあわせて一覧表示します。
画像をここにドラッグ
または
PNG / JPG / WebP / GIF / BMP / SVG に対応（最大 20MB）。.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg
関連ツール
カラーピッカー
画像から色をスポイトで抽出し、カラーコードを取得できるツール。ルーペで拡大しながらピクセル単位で色を調べられ、HEX / RGB / HSL 切替やパレットのエクスポートに対応。無料・登録不要で、ブラウザだけで完結します。
- デザイン・配色
- 業務効率化
配色パレット生成
ベースカラーを1色選ぶだけで、補色・類似色・トライアドなど配色理論に基づくカラーパレットを自動生成する無料の配色ジェネレーター。CSS変数・Tailwind・SCSS・JSON形式でエクスポートでき、コントラストの目安も確認できます。ブラウザだけで完結します。
- ジェネレーター
- デザイン・配色
カラーコード変換
HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。
- コンバーター
- デザイン・配色
コントラストチェッカー
前景色（文字色）と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準への合否判定に加え、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。
- チェッカー
- デザイン・配色
- アクセシビリティ
CSSグラデーション生成
色や方向、カラーストップをGUIで操作してCSSグラデーションを自動生成する無料ツール。線形・放射・円錐（conic）グラデーションに対応し、不透明度の調整やCSS変数・Tailwind・SCSS形式での出力、共有URLにも対応。コピペですぐ使え、ブラウザだけで完結します。
- ジェネレーター
- 開発
- デザイン・配色
CSSシャドウ生成
box-shadowジェネレーターで、CSSの影（box-shadow・drop-shadow）をスライダー操作でリアルタイムに生成。複数レイヤーやinset（内側）、ニューモーフィズム・ロングシャドウ・グローのプリセットに対応し、CSS・CSS変数・Tailwind・SCSSで出力できます。共有URLにも対応し、ブラウザだけで完結します。
- ジェネレーター
- デザイン・配色
カラーパレット抽出ツールとは？
カラーパレット抽出は、画像から主要な配色（代表色）を自動で抽出し、カラーパレットを作成できるツールです。写真やデザイン画像をアップロードすると、画像全体を解析して代表的な色を最大 12 色まで取り出し、それぞれの占有率（画像内で各色が占める割合）とあわせて一覧表示します。
抽出した色は HEX（#RRGGBB）・RGB・HSL の 3 形式で切り替えて確認でき、ワンクリックでコピーできます。抽出する色数は 4〜12 色から選べ、作成したパレットは JSON・CSS 変数・SCSS・Tailwind の各形式でまとめて書き出せるため、Web サイトやデザインのスタイルガイドにそのまま取り込めます。さらに、抽出方針は「主要色重視・バランス・差し色重視」の抽出モードから選べ、面積の小さい差し色をどこまで残すかを切り替えられます。
1 ピクセルずつ色を取得する「カラーピッカー」とは異なり、本ツールは画像全体から配色のバランスを代表する色を生成します。アップロードした画像はサーバーに送信されず、配色の抽出処理はすべてお使いのブラウザ内で完結します。無料・登録不要で利用できます。
使い方
- 配色を抽出したい画像をドラッグ＆ドロップするか、ファイルを選択してアップロードします。
- 画像全体から代表色が自動的に抽出され、占有率（割合）とともにパレットとして表示されます。
- 「抽出モード」を主要色重視・バランス・差し色重視から選びます。差し色重視にすると、面積が小さくても鮮やかな差し色を残しやすくなります。
- 「抽出する色数」を 4〜12 色から選ぶと、その数で配色を抽出し直します。
- カラーコードの表示形式を HEX / RGB / HSL から切り替え、必要な色をクリックでコピーします。
- 「パレットを書き出し」で JSON・CSS 変数・SCSS・Tailwind の形式を選び、まとめてコピーします。
利用シーン
- 写真やデザイン画像から配色を決めたい Web デザイナー・フロントエンドエンジニア。抽出した代表色を CSS 変数や Tailwind 設定としてそのまま実装できます。
- 参考サイトやイメージ画像のスクリーンショットから、配色のバランスを分析したい UI/UX デザイナー。
- 商品写真やブランド素材から主要な色（ベースカラー・アクセントカラー）を拾い、配色ガイドを作りたいブランディング担当者。
- イラストや写真の全体的な色味を、代表色で手早く把握したいイラストレーター・カメラマン。
- 資料やスライドの配色を、参考画像に合わせてすばやく揃えたいビジネスユーザー。
注意点
- 代表色は median-cut 法による色の量子化で算出します。同じ画像でも抽出する色数を変えると、各色の値や占有率は変化します。
- 知覚的に近い色（色差の小さい色）は 1 つに統合されるため、実際に表示される色数は選んだ色数より少なくなることがあります。
- 抽出モードで「主要色重視・バランス・差し色重視」を切り替えられます。差し色重視は面積が小さくても鮮やかな色を残しやすく、主要色重視は大きな面積の色を優先します。
- 抽出処理を高速化するため、画像は内部で縮小してから解析します。占有率はおおよその目安としてご利用ください。
- 色は sRGB 色空間で扱います。広色域（Display P3 など）の画像は sRGB に変換された値で表示されます。
- 透明度の高い（ほぼ透明な）ピクセルは、代表色の対象から除外されます。
- 1 ピクセル単位で色を取得したい場合は「カラーピッカー」をご利用ください。本ツールは画像全体の代表色を生成する用途に向いています。