オンラインカラーピッカー
画像から色を選択。クリックしてHEX、RGB、HSL値を抽出。無料、プライベート、瞬時 — すべてブラウザ内で完結します。
100%プライベート — ファイルがデバイスから送信されることはありません。すべての処理はブラウザ内で完結します。
ここに画像をドロップ
またはクリックして選択 — JPG、PNG、WebP対応
画像の任意の場所をクリックして色を選択
カラーピッカーの仕組み
このツールは、ブラウザ内蔵のCanvas APIを使用して、クリックした正確な位置のピクセル色を読み取ります。その後RGB値をHEXとHSL形式に変換します。処理全体がお使いのデバイス上でローカルに実行されます。画像がサーバーに送信されることは一切ありません。
Tips for Using the Color Picker
- Use the magnifier for precision — The built-in magnifier zooms in on the area around your cursor for exact pixel selection.
- Build a palette from a reference image — Drop an inspiring photo and click on different areas to extract a complete color palette.
- Copy color values with one click — Click on any color swatch to copy its HEX value to your clipboard instantly.
- Compare HEX, RGB, and HSL side by side — Each picked color displays in all three formats simultaneously.
- Pick colors from screenshots — Take a screenshot of any application and drop it in to extract exact color values.
- Clear and start fresh for new projects — Use "Clear all" to reset your palette when switching between images.
When to Use the Color Picker
- Web development — Extract exact HEX color codes from design mockups or screenshots to use in your CSS.
- Brand identity work — Identify the precise colors in a logo or brand material for style guides.
- Interior design and decoration — Pick colors from inspiration photos to get exact values for mood boards.
- Digital art and illustration — Sample colors from reference images for accurate color palettes.
- Accessibility testing — Extract foreground and background colors to check contrast ratios against WCAG guidelines.
よくある質問
どの色形式が提供されますか？
選択した各色はHEX（例: #FF5733）、RGB（例: rgb(255, 87, 51)）、HSL（例: hsl(11, 100%, 60%)）の値を表示します。値をクリックするとクリップボードにコピーされます。
カラーピッキングの精度は？
ツールはクリックした地点の正確なピクセル値を読み取り、画像からの正確な色を提供します。最良の結果を得るには、サンプリングしたい領域を拡大してください。
複数の色を選択できますか？
はい！クリックするたびに新しい色がパレットに追加されます。選択したすべての色がHEX、RGB、HSL値とともに表示されます。「すべてクリア」で最初からやり直せます。
How does the magnifier help with color picking?
The magnifier displays a zoomed-in view of the pixels around your cursor, showing each individual pixel clearly. This lets you pick the exact color you want, even from tiny details like 1-pixel borders, small text, or fine gradients. Without magnification, it's easy to accidentally pick an adjacent color.
How do I copy a color value?
Click on any color swatch in your picked palette to copy its HEX value to your clipboard. The HEX, RGB, and HSL values are all displayed for each color, so you can also manually select and copy the specific format you need for your project.
Can I use the color picker for web design work?
Absolutely! The color picker is ideal for web design. Extract colors from client brand materials, competitor sites, or design inspiration images. The HEX values can be pasted directly into CSS, and the RGB values work in design tools like Figma, Sketch, and Photoshop.
Can I check color contrast for accessibility?
While ImgLab's color picker doesn't calculate contrast ratios directly, you can use it to extract the exact HEX values of foreground text and background colors from any UI screenshot. Then paste those values into a dedicated contrast checker tool to verify WCAG 2.1 compliance (4.5:1 for normal text, 3:1 for large text).