画像から色を選ぶ
画像カラーピッカー
画像カラーピッカーは、画像内でクリックした任意のピクセルの正確なカラーコードを返します。ルーペがポインターの下のピクセルを拡大表示し、選んだ色にはHEX、RGB、HSL、HSB、OKLCH、Lab、CMYKの値が付きます。
- 無料・登録不要
- 画像は端末の外に出ません
- ピクセル単位の正確な色
画像をドロップして色を選択
またはCtrl+Vで貼り付け. JPG、PNG、WebP、GIF、AVIF、SVG。最大20枚。
画像から色を選ぶにはどうすればよいですか？
画像から色を選ぶには、ピッカーで画像を開き、目的のピクセルをクリックします。
画像を開く
JPG、PNG、WebP、GIF、AVIF、SVGファイルをドロップ、貼り付け、またはファイル選択で開きます。画像は端末内にとどまります。
ルーペで狙う
ポインターを画像の上で動かします。ルーペはポインター周囲の11×11ピクセルを拡大し、ポインターの下のピクセルを枠で囲みます。
クリックして選択
クリックまたはタップすると、そのピクセルの色が選択した色に追加されます。ピンはドラッグで移動でき、矢印キーで微調整できます。
コードをコピー
ワンクリックで任意のコードをコピーするか、選んだ色をすべてCSS、Tailwind、Adobe、Procreateなどにエクスポートします。
選んだ色はどのくらい正確ですか？
選択ごとに、実在するピクセルの値が返されます。ピッカーは画像を長辺最大2,048ピクセルで、スムージングなしで読み込むため、平均化によって値が変わることはありません。
写真では、照明、質感、JPEG圧縮による小さなばらつきのため、隣り合うピクセルの値が異なることがよくあります。領域全体の色を知りたい場合は、カラーパレット抽出ツールの「平均」設定を使ってください。
ピッカーにはどのカラーコードが表示されますか？
ピッカーは選んだ色ごとに7種類のコードを表示し、それぞれにコピーボタンが付きます。
- HEX
- CSSとデザインアプリ用の6桁のコード
- RGB
- 0から255までの赤、緑、青のチャンネル
- HSL
- CSS用の色相、彩度、明度
- HSB
- アプリのカラーピッカー用の色相、彩度、明るさ
- OKLCH
- 最新のCSS用の、知覚に基づく明度、クロマ、色相
- CIE Lab
- 明度と2つの色軸。CSSでは
lab() - CMYK
- プリンタープロファイルを使わない印刷用の推定値
- コントラスト
- 白と黒に対するWCAG 2のコントラスト比
パレット抽出ツールではなくピッカーを使うのはどんなときですか？
| 目的 | ツール |
|---|---|
| ボタンや細部など、特定の1点のコードを調べる | 画像カラーピッカー |
| 画像全体の主要な色を取得する | カラーパレット抽出ツール |
| 輪郭の混色を除いたロゴの正確な色を取得する | ロゴカラー抽出ツール |
| コードからWebサイトの色を取得する | Webサイト配色抽出ツール |
画像カラーピッカーは何に使われますか？
色合わせ
印刷物やWebのレイアウト用に、写真から塗料、布地、製品の色を合わせます。
Webデザイン
デザインのスクリーンショットから、ボタンや背景の正確な色をコピーします。
ブランド業務
パッケージや看板の写真からブランドカラーを1色取り出し、出発点にします。
アクセシビリティの確認
「カラーコード」タブで、選んだ文字色の白と黒に対するコントラストを確認します。
画像カラーピッカーのよくある質問
画像内の色のHEXコードを調べるにはどうすればよいですか？
画像カラーピッカーで画像を開き、その色をクリックします。HEXコードがすぐに表示され、横にコピーボタンがあります。
スマートフォンで色を選べますか？
はい。画像をタップしてピクセルを選び、ピンをドラッグして位置を微調整します。
同じ物体なのにHEXコードが異なるのはなぜですか？
照明、影、圧縮によって、隣り合うピクセルの値が変わるためです。物体の最も平坦な部分から選ぶか、パレット抽出ツールでその領域を平均化してください。
スクリーンショットから色を選べますか？
はい。スクリーンショットを撮り、Ctrl+VまたはCommand+Vでページに貼り付けてください。
選べる色の数に上限はありますか？
いいえ。必要なだけ色を選べます。Procreateのエクスポートには最初の30色が入り、コード形式にはすべての色が入ります。