画像の境界で正確な色を調べる
拡大した7×7の周辺を見て、アンチエイリアスの境界と内部領域のHEX値を区別できます。
カラーピッカー | 画像・画面から色を取得
カラーピッカー | 画像・画面から色を取得
HEX、RGB、HSLを相互変換し、アップロード・貼り付け画像のピクセルや対応ブラウザの画面から色を取得します。
主な機能
- 編集可能なHEX、RGB、HSL値を相互変換し、各形式をコピーできます。
- アップロードまたは貼り付けた画像をブラウザ内canvasで処理し、ポインターまたはキーボードでピクセルの色を取得します。
- 選択した座標と7×7の周辺ピクセルを表示し、色の境界を確認できます。
- 対応ブラウザではEyeDropper APIを使って画面上の色を選択します。
- 最近選んだHEX色を最大18色、そのブラウザのローカルストレージに保存します。
- 色の個別削除と元に戻す操作に対応し、最大60色のお気に入りに名前を付けて保存できます。
使い方
- 色を選ぶか、HEX、RGB、HSL値を入力します。
- 必要に応じて画像のピクセルまたは対応する画面スポイトから色を取得します。
- Enterを押すか入力欄から移動すると色を保存します。値をコピーしたり、星を押してお気に入りに追加できます。
活用例
画面上のUI色を取得する
EyeDropper API対応ブラウザなら、画面に表示された色を選び、HEX・RGB・HSLでコピーできます。
プライバシー
アップロード画像はブラウザ内canvasで読み取られ、サーバーへ送信されません。最近使った色、お気に入りとその名前はこのブラウザに保存され、ブラウザデータを消去すると削除されます。
動作要件
画面からの色取得にはEyeDropper API対応ブラウザとユーザーの許可が必要です。画像のピクセルはcanvasに描画した元の解像度を基準に選択します。
よくある質問
- 最近使った色をクリアするとお気に入りも消えますか？
- いいえ。最近使った色とお気に入りは別々に保存されます。色の個別削除やお気に入りの解除は、元に戻す操作で取り消せます。
- 次回アクセスしたときもお気に入りは残りますか？
- 同じブラウザでは、再読み込みや再訪問後も色と名前が残ります。端末間では同期されず、ブラウザストレージを消去すると削除されます。
- キーボードだけで画像の色を選べますか？
- canvasにフォーカスして矢印キーでピクセルを移動し、EnterまたはSpaceで選択できます。
- アップロードした画像はサーバーへ送信されますか？
- いいえ。画像はブラウザ内のcanvasで読み取られ、サーバーへ送信されません。
関連ツール
- HEX・RGB・HSL・HSVカラー変換カラーピッカーやテキスト入力からHEX、RGB、HSL、HSV値を同期し、アルファ値も変換します。
- WCAGカラーコントラスト確認前景色と背景色のHEXからWCAG 2.xのコントラスト比を計算し、通常・大きな文字のAA・AAA適合を確認します。
- 線形・放射CSSグラデーション生成線形・放射グラデーションの方向、形、カラーストップ、位置を視覚的に編集し、background CSSをコピーします。
- 文字・絵文字・画像のfavicon PNG生成文字、絵文字、画像から形付きアイコンを作り、ブラウザ、Apple、Android、PWA向けの6サイズのPNGを保存します。