画像カラー分析
画像ツール
サンプリングしたピクセルから、JPG・PNG・WebP画像の主要な色を推定します。
カラーピッカー
ブラウザのカラーピッカーで色を選び、HEX・RGB・HSLの値をコピーできます。
ツールを読み込み中…
このツールはブラウザ内で動作します。入力内容、ファイル、生成した値はこの端末に残ります。お気に入りと最近使ったツールを利用する場合も、ローカルストレージに保存されるのはツール名だけで、パスワード、文書、QR コードの内容は保存されません。 詳しくはプライバシーポリシーをご覧ください。
このツールの詳しい解説（使い方、例、よくある質問）は、現在英語のみでご用意しています。
What this tool does
Pick a color with the browser’s color control, or type a hex value, and copy HEX, RGB, and HSL. Designers grabbing one opaque color for CSS use it when they do not need to sample a photo. Alpha is not available, and sampling pixels from an image is the Image Color Analyzer.
How to use
- Use the native color input, or type a hex value.
- Copy HEX, RGB or HSL.
- Reset returns the picker to the default blue.
Examples
HEX
#2563eb is a six-digit hex color: two digits each for red, green and blue.
RGB
The same color is rgb(37, 99, 235).
HSL
HSL describes hue, saturation and lightness. It is useful when you want to lighten or saturate a color.
How it works
HEX is a compact CSS color written in hexadecimal. RGB lists the same channels as decimal numbers from 0 to 255. HSL uses hue (0–360), saturation and lightness. The picker uses the browser’s native color input, so the system color UI appears on phones and desktops. Values are converted locally.
Limitations
The native control supplies an opaque sRGB color. Alpha is not available, and a pixel is not sampled from a photograph. HEX, RGB, and HSL are three writings of that same color.
See the disclaimer for what these tools do not cover.
FAQ
- Is the Color Picker free?
- Yes. Choosing a color and copying HEX, RGB, or HSL does not require payment or an account.
- Does this use a large color-picker library?
- No. It uses the browser’s native color input plus hex parsing in this page.
- Is my input sent to a server?
- No. The color you pick stays in this tab. It is not uploaded and not written to local storage.
- What is the difference between HEX, RGB, and HSL?
- They describe the same color in different ways. HEX and RGB give red, green, and blue amounts. HSL gives hue, saturation, and lightness, which is easier to adjust by hand.
- How do I use a picked color in CSS?
- Copy the value and paste it into a CSS property, for example color: #1E90FF; or background: rgb(30, 144, 255);.
- Does it work on mobile?
- Yes. You can open this page on a phone or tablet. File pickers and downloads use the browser on your device. Large files may be slower on a small phone than on a desktop.