AI-Powered

カラーピッカー

画面または任意の画像から色を選択 – HEX、RGB、HSL、CMYK、名前付き、Pantone。

Your files stay on your device - processed locally via WebAssembly, never uploaded

Upload image to pick

JPEG, PNG, WebP

Your browser doesn't support the EyeDropper API. Upload an image to pick colors from instead.
52
152
219
204.07185628742513°
0.6987447698744769%
0.5313725490196078%

All Formats

Palette (0/8)

Click Add to add the current color to your palette.

Contrast Check

#3498DB
vs
#FFFFFF

Sample text

The quick brown fox jumps over the lazy dog

3.15:1
AA AAA
Share this tool with othersHelp others discover free tools
Embed this tool on your website

Copy this code to add the カラーピッカー to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.

<iframe src="https://optipix.art/embed/color-picker" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="カラーピッカー by OptiPix" loading="lazy"></iframe>
<p style="font-size:12px">Free tool by <a href="https://optipix.art/color-picker">OptiPix カラーピッカー</a></p>

❤️ Love this tool? Support our team.

No ads, no tracking, no limits. Tips keep 104 tools free for everyone.

$

Secure payment via Stripe · No account needed

About カラーピッカー

Last updated: May 2026

OptiPix Color Picker は、Chromium ブラウザのネイティブ EyeDropper API を使用して画面上のあらゆる色を取得したり、アップロードされた画像からピクセル単位で正確に色を選択したりできます。選択された各色は、HEX、RGB、HSL、HSV、CMYK、最も近い CSS 名前付きカラー、および最も近い Pantone Solid Coated スウォッチで表示されます。各フォーマットには独自のワンクリックコピーボタンがあります。内蔵の HSL および RGB スライダーで任意の色を微調整できます。履歴ストリップは、ブラウザセッション間で最後に選択した 30 色を記憶します。最大 8 色のパレットを作成し、CSS カスタムプロパティ、JSON、またはダウンロード可能な PNG ストリップとしてエクスポートできます。統合された WCAG コントラストチェッカーは、任意の色ペアの AA/AAA 合格/不合格バッジを表示します。すべてローカルで実行されます - 画面のピクセルやアップロードされた画像はデバイスから離れることはありません。ブランドカラーを選択するデザイナー、スクリーンショットからスウォッチを取得する開発者、コントラストを確認するアクセシビリティ監査者、ネイティブスポイトとカラーコンバーターを切り替えるのにうんざりしているすべての人に最適です。

How It Works

画面ピッカーは、ブラウザのネイティブ EyeDropper API を呼び出して 1 ピクセルをサンプリングします。画像ピッカーは、getImageData を介して 2D キャンバスから 1 ピクセルをサンプリングします。フォーマット変換は純粋な数学 - RGB↔HSL↔HSV↔CMYK - であり、名前付き/Pantone マッチャーは参照リストに対して二乗ユークリッド距離を計算します。

Use Cases

  • デザインシステム用のスクリーンショットから色を取得する
  • オンラインで見つけた HEX を RGB、HSL、または Pantone に変換する
  • ムードボード画像からブランドパレットを作成する
  • 出荷前に 2 色の WCAG コントラストを確認する
  • HEX コードから CSS 名前付きカラーを特定する

You Might Also Like

If you find カラーピッカー useful, check out these related tools: Color Palette Extractor, Color Changer, and Photo Filters. All tools run entirely in your browser with no uploads or signups required.

Frequently Asked Questions

画面スポイトはすべてのブラウザで機能しますか?
EyeDropper API は、Chromium ベースのブラウザ (Chrome、Edge、Brave、Opera) バージョン 95 以降で動作します。Firefox と Safari はまだサポートしていませんが、それでも画像をアップロードして任意の色を選択できます。
Pantone カラーは正確ですか?
Pantone カラーは、コンパクトな PMS Solid Coated 参照リストの中で最も近いスウォッチに一致します。Pantone は、画面上で正確に再現できない特色インキを使用しているため、これはインスピレーションや発見に適した近似値であり、印刷前の色合わせには適していません。
私の画面ピクセルデータはどこかに送信されますか?
いいえ。EyeDropper API は完全にブラウザ内で実行され、選択された色はデバイス上に留まります。アップロードされた画像はローカルキャンバスにデコードされ、アップロードされることはありません。
パレットをエクスポートできますか?
はい - 追加をクリックして色を追加し、CSS 変数、JSON としてエクスポートするか、PNG パレットストリップをダウンロードしてください。
WCAG コントラストをチェックするにはどうすればよいですか?
内蔵のコントラストチェックセクションを使用してください。現在の色が選択した 2 番目の色とペアになり、コントラスト比と AA / AAA の合格/不合格バッジが表示されます。

Related Tools

More AI Analysis Tools

All 102 Tools

Image CompressorBackground RemoverVideo CompressorImage UpscalerOCR Text ExtractorFormat ConverterImage ResizerEXIF RemoverFace BlurDepth EstimationQR Code GeneratorWatermark MakerColor Palette ExtractorPhoto FiltersImage to PDFObject DetectionImage ClassifierImage CaptionerAI Image GeneratorMeme GeneratorGIF MakerPhoto Collage MakerImage CropPhoto EffectsImage to SVGColor ChangerNoise RemoverPhoto RestorationColor PickerFavicon GeneratorImage to Base64Image Metadata ViewerImage AnnotatorPassport Photo MakerDocument ScannerASCII Art GeneratorImage ComparisonSprite Sheet GeneratorObject RemoverPanorama MakerWord CounterCase ConverterLorem Ipsum GeneratorUUID GeneratorUnix Timestamp ConverterText DiffURL Encoder / DecoderHTML Entity Encoder / DecoderBase64 Text Encoder / DecoderText to Binary / Hex / OctalHash GeneratorJSON Formatter / ValidatorRandom String GeneratorCSV ↔ JSON ConverterMarkdown EditorUnit ConverterPercentage CalculatorBMI CalculatorAge CalculatorTip CalculatorCSS Gradient GeneratorCSS Box Shadow GeneratorCSS Border Radius GeneratorGlassmorphism GeneratorNeumorphism GeneratorCSS Text Shadow GeneratorFlexbox PlaygroundCSS Grid GeneratorAudio TrimmerAudio ConverterAudio MergerAudio RecorderVideo to Audio ExtractorAudio Speed ChangerAudio Volume BoosterRingtone MakerVocal RemoverText to SpeechSpeech to TextAudio Noise RemoverAudio EqualizerAudio EffectsVideo TrimmerVideo MergerVideo ResizerVideo Speed ChangerVideo RotatorVideo to MP4 ConverterAdd Music to VideoMute VideoVideo LooperReverse VideoVideo ScreenshotAdd Subtitles to VideoVideo WatermarkScreen RecorderWebcam RecorderSlideshow MakerVideo FiltersCron Expression BuilderRegex TesterUnix Timestamp Converter