カラーピッカー&カラーホイール
配色(カラーハーモニー)

画像からのカラーピッカー - HEX および RGB カラーコードを取得
ピクセルを選択して HEX、RGB、HSL 値を読み取るか、主要なパレットを JSON または CSS 変数としてエクスポートします。
画像をドロップします — 任意のピクセルをクリックしてコードを表示するか、パレット全体を抽出します
PNG、JPG、WEBP、GIF
カラーピッカー でできること
始める前に、主な機能を確認してください。
- 写真から任意の色を HEX、RGB、または HSL として選択します
- 画像から主要なカラーパレットを抽出する
- スクリーンショットまたはロゴからブランドカラーを取得する
- デザインのカラーコードをコピーする
- パレットをJSONまたはCSS変数としてエクスポートします。
- 参考写真から配色を構築する
設定リファレンス
9 設定
カラーピッカー で使用可能なコントロール。
- 処理モードプリセット
- 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色というちょうどよい数で、メインカラーやアクセントカラー、ニュートラルカラーまでカバーでき、デザインシステムの土台になります。
ECサイトの商品掲載
商品写真の背景色をストアのテーマに合わせましょう。スニーカーやドレスの写真から主要なアクセントカラーを抽出し、商品ページの目立たせたい部分のハイライトとして使えます。
インテリアやファッションのインスピレーション
気に入った部屋やコーディネートを撮影して、カラーパレットを抽出しましょう。既存の配色に合う塗料、ファブリック、アクセサリー選びに活用でき、視覚的なインスピレーションを使えるカラースウォッチに変えられます。
データビジュアライゼーション用カラースキーム
イメージしたい画像から、10〜16色のカテゴリ別パレットを生成できます(例:柔らかなチャートには水彩画、暖色から寒色へのグラデーションには夕焼けなど)。ありきたりな色を選ぶより、ずっと良い仕上がりになります。
ゲーム・UIアセットのワークフロー
スプライトアートやUIモックアップからインデックスカラーパレットを抽出し、ピクセルアートツールやゲームエンジンに取り込めます。パレットのJSONエクスポートはAsepriteやPhotoshop、ほとんどのアセットパイプラインと連携します。
公開前のWCAGコントラストチェック
単体のカラーピッカー&ホイールでテキストと背景の色の組み合わせを設定すると、白と黒に対するコントラスト比が即座に表示されるため、AA/AAAのアクセシビリティ不適合を本番環境に出す前に見つけられます。
カスタムの塗料・印刷カラーを調整
写真をまったく使わず、正確なHEX、RGB、HSLの値を入力するか、彩度/色相のコントロールをドラッグして、特定の塗料の配合、特色、ブランドカラーを正確に指定し、その最も近い色名を確認して、サプライヤーとのやり取りを楽にできます。
1枚の写真から複数箇所のカラースウォッチボードを作成
1枚の参考写真の複数の場所(空、ドレス、花など)をクリックすると、自動抽出された主要パレットに頼るのではなく、厳選した複数色のスウォッチセットを作成でき、クライアントのムードボード用に JSON や CSS としてエクスポートできます。
ブランドカラーの調和セットを瞬時に生成
ブランドの HEX コードを入力して、ソーシャル テンプレートまたは広告パレットでレビューするための補完、トライアディック、分割補完のスウォッチを計算します。
競合のスクリーンショットからデザイントークンパレットを抽出
写真の代わりに競合他社のウェブサイトやアプリのスクリーンショットをアップロードすると、主要パレット抽出機能がその正確な背景色、アクセント色、テキスト色をHEXコードとして取り出し、CSS変数としてエクスポートできます。カンプやピッチデッキ用に配色をリバースエンジニアリングする素早い方法です。
変換結果を一つずつ確認
すべての写真はスラッシュをそのまま通過し、反対側が完成して出てきます。


























