画像から色を抽出するカラーピッカー
写真をアップロード、ドロップ、または貼り付けて、好きな場所をクリックすると、その色の HEX コード、RGB と HSL の値、色名がわかります。画像の主な色からパレットも自動で作成します。
画像から色を抽出する方法
- 「画像を選択」を押すか、写真を枠にドロップするか、Ctrl+V（Mac では Cmd+V）でスクリーンショットを貼り付けます。最初はサンプル写真が読み込まれているので、そのまま試せます。
- 写真のどこかをクリックします。選択中のピンがその場所に移動し、ルーペにポインターの下のピクセルが拡大表示されるので、狙ったピクセルをぴったり選べます。
- 左側で色を確認します。HEX コード、RGB と HSL の値がそれぞれコピーボタン付きで表示され、900 色以上の色名リストからいちばん近い名前もわかります。
- パレットを作るなら、スライダーかプラス・マイナスのボタンで 2〜10 色を抽出し、ジェネレーターで開くか、最も鮮やかな色からカラーシステムを作成します。
できること
どのピクセルでも取得
写真をクリックまたはドラッグすると、ピンの下のピクセルの色を正確に取得できます。周囲のピクセルは拡大表示で確認できます。
HEX、RGB、HSL
取得した色の HEX コードと RGB、HSL の値を表示します。CSS、Figma など、どのデザインツールにもそのままコピーできます。
色名がわかる
色の名前、またはいちばん近い色名を表示し、シェード、相性の良い色、コントラストをまとめたその色のページにリンクします。
パレットを自動作成
ピンは最初から画像の主要な色のうち、互いに異なる色に置かれるので、クリックしなくても 2〜10 色の使えるパレットが手に入ります。
アップロード、ドロップ、貼り付け
ファイルを選ぶ、枠にドラッグする、クリップボードからスクリーンショットを直接貼り付ける、のいずれでも読み込めます。
プライバシーに配慮
追加した写真はピクセルを読み取るためにブラウザー内で処理され、サーバーには送信されません。
よくある質問
画像の中の色の HEX コードを調べるには？
「画像を選択」、ドラッグ＆ドロップ、または貼り付けで画像を追加し、調べたい場所をクリックします。左側に HEX コードがコピーボタン付きで表示され、RGB と HSL の値も並びます。
写真に写っているものが何色か知るには？
ピッカーでその部分をクリックします。そのピクセルの正確なカラーコードと、900 色以上の色名からいちばん近い名前が表示され、その色のページへのリンクも付きます。光や影でピクセルの色は変わるので、何か所か試してみてください。
パレットの色はどのように選ばれますか？
画像を縮小したコピーのピクセルを、OKLab 色空間で見た目の近さによってグループに分け、グループごとに代表的なピクセルを選びます。ほぼ同じ色は除かれるため、色数の少ない画像では、より少なく、はっきり異なる色になります。
写真はアップロードされますか？
いいえ。選んだ写真はピクセルを読み取るためにブラウザー内で処理され、当社のサーバーには送信されません。Web から読み込まれるのは、ページに最初に表示されるサンプル写真だけです。
スクリーンショットから色を取得できますか？
はい。スクリーンショットを撮ってから、このページで Ctrl+V（Mac では Cmd+V）を押して貼り付け、目的の色をクリックします。Web サイト、アプリ、動画のコマにも使えます。
対応している画像形式は？
ブラウザーで表示できる画像ならどれでも使えます。通常は JPEG、PNG、WebP、GIF が含まれます。