カラーピッカー&カラーホイール

最も近い色名: dodgerblue
白背景 3.31:1(AA Large) · 黒背景 6.35:1(AA)

配色(カラーハーモニー)

補色
類似色
トライアド(三色配色)
スプリットコンプリメンタリー
テトラード(四色配色)
モノクロマティック(単色配色)
カラーピッカーの結果プレビュー

画像からのカラーピッカー - HEX および RGB カラーコードを取得

ピクセルを選択して HEX、RGB、HSL 値を読み取るか、主要なパレットを JSON または CSS 変数としてエクスポートします。

画像をドロップします — 任意のピクセルをクリックしてコードを表示するか、パレット全体を抽出します

PNG、JPG、WEBP、GIF

カラーピッカー でできること

始める前に、主な機能を確認してください。

  • 写真から任意の色を HEX、RGB、または HSL として選択します
  • 画像から主要なカラーパレットを抽出する
  • スクリーンショットまたはロゴからブランドカラーを取得する
  • デザインのカラーコードをコピーする
  • パレットをJSONまたはCSS変数としてエクスポートします。
  • 参考写真から配色を構築する

設定リファレンス

カラーピッカー で使用可能なコントロール。

処理モードプリセット
1件ずつ処理するか、Premium の一括処理モードに切り替えて複数の入力に同じ設定を適用できます。対応する入力形式はツールによって異なります。オプション: 1枚の画像一括処理

カラーピッカー&カラーホイール

ランダムワンクリック
ワンクリックでランダムな新しい色に切り替わり、すぐに発想のヒントが得られます。HEX・RGB・HSLの値と調和パレットも、まとめて更新されます。
彩度と明度スライダーレンジ: 0–100%
四角形の中でマーカーをドラッグして、色の鮮やかさ(左右方向)と、明るさ(上下方向)を設定します。
色相スライダーレンジ: 0–360 · デフォルト: 211
虹色のバーをスライドして基本の色相を選びます。赤から黄、緑、青、マゼンタへと変化し、再び赤に戻ります。
HEXテキスト入力
HEXコード、rgb()やhsl()の表記、CSSの色名など、任意の色の値を入力または貼り付けると、その色にそのまま移動できます。
RGB数値入力レンジ: 0–255
デザイン仕様のRGB値をぴったり再現したいときに、赤・緑・青の各チャンネルを0〜255で個別に設定できます。
HSL数値入力レンジ: 0–360
色相(0–360)と、彩度・明度(0–100)を数値で調整します — 色相を変えずに、色を少し明るくしたり落ち着かせたりしたいときに便利です。

主要なパレット

サイズドロップダウン
アップロードした画像から抽出する主要色の数を選びます(初期値8)。すっきりしたブランドパレットには少なめを、アクセントの色味まで拾いたいときは多めを選びましょう。オプション: 58101624
選択した色カラーピッカー
アップロードした写真の好きな場所をクリックまたはタップすると、その位置のピクセルをそのまま抽出します。選ぶたびにHEX、RGB、HSLの値付きのスウォッチが追加され、1つずつでもまとめても削除できます。
無料で利用可能 · 登録不要 · 透かしなしアップロードは転送中に暗号化されます保持ポリシーに基づいて削除されました

よくある質問

カラーピッカーでできること

ビジネス、クリエイター、日常業務など、実際の問題を毎日解決します。自分に合ったユースケースを見つけて始めましょう。

クリエイター向け

ブランドアイデンティティ監査

既存のロゴやマーケティング素材から正確な HEX 値を取り出し、スタイルガイドに反映できます。ポジショニング資料やピッチ用に、競合のブランドカラーに合わせることも可能です。

クリエイター向け

Web デザインのパレット作成

写真やムードボードから主要な色を抽出し、CSS変数として書き出してスタイルシートに貼り付けられます。5〜8色というちょうどよい数で、メインカラーやアクセントカラー、ニュートラルカラーまでカバーでき、デザインシステムの土台になります。

Eコマース向け

ECサイトの商品掲載

商品写真の背景色をストアのテーマに合わせましょう。スニーカーやドレスの写真から主要なアクセントカラーを抽出し、商品ページの目立たせたい部分のハイライトとして使えます。

個人利用

インテリアやファッションのインスピレーション

気に入った部屋やコーディネートを撮影して、カラーパレットを抽出しましょう。既存の配色に合う塗料、ファブリック、アクセサリー選びに活用でき、視覚的なインスピレーションを使えるカラースウォッチに変えられます。

開発者向け

データビジュアライゼーション用カラースキーム

イメージしたい画像から、10〜16色のカテゴリ別パレットを生成できます(例:柔らかなチャートには水彩画、暖色から寒色へのグラデーションには夕焼けなど)。ありきたりな色を選ぶより、ずっと良い仕上がりになります。

クリエイター向け

ゲーム・UIアセットのワークフロー

スプライトアートやUIモックアップからインデックスカラーパレットを抽出し、ピクセルアートツールやゲームエンジンに取り込めます。パレットのJSONエクスポートはAsepriteやPhotoshop、ほとんどのアセットパイプラインと連携します。

開発者向け

公開前のWCAGコントラストチェック

単体のカラーピッカー&ホイールでテキストと背景の色の組み合わせを設定すると、白と黒に対するコントラスト比が即座に表示されるため、AA/AAAのアクセシビリティ不適合を本番環境に出す前に見つけられます。

クリエイター向け

カスタムの塗料・印刷カラーを調整

写真をまったく使わず、正確なHEX、RGB、HSLの値を入力するか、彩度/色相のコントロールをドラッグして、特定の塗料の配合、特色、ブランドカラーを正確に指定し、その最も近い色名を確認して、サプライヤーとのやり取りを楽にできます。

クリエイター向け

1枚の写真から複数箇所のカラースウォッチボードを作成

1枚の参考写真の複数の場所(空、ドレス、花など)をクリックすると、自動抽出された主要パレットに頼るのではなく、厳選した複数色のスウォッチセットを作成でき、クライアントのムードボード用に JSON や CSS としてエクスポートできます。

マーケティング

ブランドカラーの調和セットを瞬時に生成

ブランドの HEX コードを入力して、ソーシャル テンプレートまたは広告パレットでレビューするための補完、トライアディック、分割補完のスウォッチを計算します。

Web・SEO

競合のスクリーンショットからデザイントークンパレットを抽出

写真の代わりに競合他社のウェブサイトやアプリのスクリーンショットをアップロードすると、主要パレット抽出機能がその正確な背景色、アクセント色、テキスト色をHEXコードとして取り出し、CSS変数としてエクスポートできます。カンプやピッチデッキ用に配色をリバースエンジニアリングする素早い方法です。

変換結果を一つずつ確認

すべての写真はスラッシュをそのまま通過し、反対側が完成して出てきます。