カラーパレット
Image Palette Extractor

✨ 特徴

  • 画像から主要な色を自動抽出。写真の空気感重視とUI・ロゴ解析の2つのモードに対応
  • HEX・RGB・HSLをワンクリックコピー。Tailwind CSS設定ファイルも自動生成
  • UIプレビューで背景・文字・ボタン色として実際の見え方をその場で確認
  • アップロード不要・完全ブラウザ内処理・外部送信なし

🪄 こんなときに使えるよ！

写真からの配色抽出

風景や製品写真から雰囲気に合ったカラーパレットを瞬時に生成できます。

ブランドカラーの確認

ロゴや参考画像からブランドカラーを抽出し、HEX値をすぐにコピー。

Webデザインへの活用

UIプレビューで実際の配色を確認しながら、CSSやTailwind用コードを生成。

カラーコード変換

HEX・RGB・HSL形式を相互変換して、開発や設計作業に活用できます。

🔒 プライバシー

このツールはすべてブラウザ内で動作します。アップロードした画像は外部サーバーに送信されません。

❓ よくある質問

どんな画像形式に対応していますか？

JPEG、PNG、WebP、GIF、BMP、SVGなど、ブラウザが表示できる主要な画像形式に対応しています。

抽出できる色数は変えられますか？

はい。最大16色まで抽出する色数を自由に設定できます。

Tailwind CSSのコードを生成できますか？

はい。抽出したパレットからTailwind CSS設定ファイル（tailwind.config.js）用のコードを自動生成できます。

画像はサーバーに送信されますか？

いいえ。すべての処理はブラウザ内で完結し、画像データが外部サーバーに送信されることは一切ありません。
画像を待機中
画像はブラウザ内だけで処理 · どこにも送信されません
画像をドラッグ＆ドロップ
クリックでファイル選択、またはこの画面に直接ペースト。すべてブラウザ内で解析します。
クリックで選択 ⌘ / Ctrl + V で貼り付け
JPEGPNGWEBPGIFSVG
読み込んだ画像のプレビュー
#000000
—
抽出モードAlgorithm
抽出する色数Swatches
6色
パレット Palette
0 色
color.omikuji.dev 連携
// 画像を読み込むとコードが生成されます
Aurora 製品価格会社
New release
あなたの配色を、
そのまま試す。
抽出したパレットを背景・文字・ボタンに割り当てて、実際のUIでの見え方をその場で確認できます。
配色プレビュー
ドラッグ＆ドロップで色を適用
役割を選んでパレットの色をクリック、または色カードをここへドラッグ。
背景—
文字—
ボタン—
tools.omikuji.dev
Median Cut / K-Means による色抽出 · 完全クライアントサイド
ここにドロップして解析
画像はアップロードされません