HEXカラーピッカー
HEXは#5b25d5のような6桁の16進数で、CSSやデザインソフトで広く使われます。
オンラインカラーピッカー - 画像・画面から色を抽出
画像や画面から正確な色を抽出できる無料のオンラインカラーピッカー。画像をアップロード、貼り付け、ドラッグして HEX、RGB、RGBA、HSL を取得できます。
ここに画像をドロップ
画像をアップロード、ここへドラッグ、またはクリップボードからスクリーンショットを貼り付けます。
PNG、JPG、GIF、WebPなどブラウザが対応する画像形式
カラー値
現在の色
HEX
#5b25d5RGB
rgb(91, 37, 213)RGBA
rgba(91, 37, 213, 1)HSL
hsl(258, 70%, 49%)画像はブラウザ内で処理され、アップロードされません。
カラーカード
選択した色を下に表示しています。鉛筆から色を編集するか、画面ピッカーを開けます。
#5b25d5段階カラーパレット
現在の色を明るくしたり暗くしたりした色を選べます。
オンライン画像カラーピッカー
写真、スクリーンショット、デザインカンプなど、あらゆる画像から色を確認できます。正確なピクセルをクリックしてCSSカラーコードを取得し、対応ブラウザでは画面から直接色を選べます。
画像から色を選択画像をアップロード、ドラッグ、貼り付けして必要なピクセルを調べます。
画面カラーピッカー対応ブラウザではネイティブEyeDropper APIで画面上の色を選択できます。
便利なカラー形式CSSやデザインツールで使えるHEX、RGB、RGBA、HSLを取得できます。
プライバシーとローカル処理画像はブラウザ内に留まり、アップロードもアカウントも不要です。
カラーピッカーの使い方
1
色のソースを選ぶ
HEXを入力するか色を直接選び、対応ブラウザでは画面から色を選びます。
2
画像を読み込む
画像を選択、アップロード領域へドラッグ、またはクリップボードから貼り付けます。
3
ピクセルをクリック
確認したい画像上の正確な位置をクリックまたはタップします。
4
結果をコピー
HEX、RGB、RGBA、HSLの値をコピーしてCSSやデザインに使います。
画像カラーピッカーとは？
画像カラーピッカーは、スポイトやカラーサンプラーとも呼ばれ、画像内の特定ピクセルの色を読み取ります。Webサイト、ロゴ、写真、スクリーンショット、UIデザインの色を合わせたいときに便利です。このオンラインツールはサンプルした色をHEX、RGB、RGBA、HSLのコードに変換します。
HEX、RGB、RGBA、HSLカラーコード
デザインや開発のツールによって必要なカラー形式は異なります。同じ色を複数の形式で表示するため、プロジェクトに必要な値をすぐにコピーできます。
RGBとRGBA
RGBは赤、緑、青の各チャンネルを表します。RGBAには重なりを扱う透明度も含まれます。
HSLカラー値
HSLは色相、彩度、明度で色を表すため、テーマカラーの調整に便利です。
カラーピッカーの主な用途
Webデザイン
スクリーンショットからブランドカラーを合わせ、CSS変数やボタン、背景に再利用します。
グラフィックデザイン
写真やイラスト、ムードボードから色を取り、統一したパレットを作ります。
UI開発
デザインカンプや既存画面の色を確認し、コンポーネントライブラリで再現します。
アクセシビリティ確認
前景色と背景色をコントラストチェッカーにコピーし、文字の読みやすさを確認します。
カラーピッカー よくある質問
画像から色を選ぶにはどうしますか？
画像をアップロード、ドラッグ、貼り付けしてから、調べたいピクセルをクリックします。HEX、RGB、RGBA、HSLが表示されます。
HEXカラーピッカーとは何ですか？
HEXカラーピッカーは色を識別し、#5b25d5のような16進数のCSSカラー値を返します。Webサイトやデザインツールでよく使われます。
画面から色を選べますか？
EyeDropper APIに対応したブラウザで利用できます。「画面から色を選ぶ」をクリックし、ブラウザの案内に従ってください。
画像はアップロードされますか？
いいえ。画像の読み込みとピクセルのサンプリングはブラウザ内で行われます。アカウントや画像アップロードサーバーは必要ありません。
どのカラー形式に対応していますか？
HEX、RGB、RGBA、HSLに対応しています。それぞれ専用のコピー操作でCSSやデザインソフトに使えます。
なぜ画面から色を選べないのですか？
画面選択にはEyeDropper APIへの対応とユーザー操作が必要です。利用できない場合は画像をアップロードするかHEXを入力してください。