Real Color Picker Logo
Real Color Picker
100%無料カラーピッカー • 登録不要 • 無制限

無料オンライン カラーピッカー ＆ 配色パレットスタジオ

画像から正確なHEX、RGB、HSL、OKLCHコードを抽出。画像をアップロード、クリップボード貼り付け(Ctrl+V)、または16倍精密ルーペで画面からスポイトできます。

ここに画像をドロップ、または ファイルを選択

クリップボードから貼り付け（Ctrl+V / Cmd+V）またはPCからドラッグ

PNG, JPG, WEBP, SVG, GIF最大 25MB100% ブラウザ内ローカル処理

上のエリアに画像をアップロードまたは選択すると、色を抽出できます

100%
Clickクリックで色を選択・固定•↑ ↓ ← →1ピクセルの精密微調整用
選択中のカラー
#0070F3
アクティブカラーVercel Electric Blue

Electric Cerulean Blue

High vibrancy, primary UI anchor color.

カラーコード＆各種フォーマットコピー
History0 / 20
色彩調和・ハーモニー
シェード＆ティント（明暗）
Tints+10% ~ +90% White
Shades+10% ~ +90% Black
Tones+10% ~ +90% Gray

パレット生成・管理スタジオ

美しい配色パターンを自動生成または画像から直接抽出

WCAG コントラスト・アクセシビリティスタジオ

WCAG 2.1 基準のコントラスト比と色覚多様性の視認性を検証

AAA ≥ 7.0AA ≥ 4.5Large ≥ 3.0
通常本文 (16px)AAA 合格

素早い茶色のキツネが飛び跳ねる

リアルタイムで視認性とアクセシビリティを検証するプレビューです。

算出されたコントラスト比4.52 : 1
通常テキスト (AA)合格
大見出しテキスト (AA)合格
通常テキスト (AAA)不合格
Test Against:
Color Vision Deficiency (CVD) SimulationHow color-blind users perceive your palette

CSS グラデーションスタジオ

マルチカラーストップのモダンなCSSグラデーションを作成・コピー

Live CSS Gradient Preview
background: linear-gradient(135deg, #0070F3 0%, #7928CA 50%, #FF0080 100%);
角度135°
カラーストップ
Preset Styles
保存済みパレットライブラリ100% Client-Side

お使いのブラウザ内に安全に保存されたプライベートな配色一覧

完全無料の最高峰オンラインカラーピッカー＆配色スタジオ

フロントエンドエンジニア、UI/UXデザイナー、イラストレーターのために設計された高精度・高速ツール。

01

16倍サブピクセル拡大鏡

個別ピクセルグリッド表示と矢印キー操作により、アンチエイリアスに惑わされず正確に抽出。

02

スマート配色抽出（K-Means）

高速クラスタリングにより、画像内の主要色・アクセント色を1クリックで自動抽出。

03

WCAG 2.1＆開発コード書き出し

AA/AAAコントラスト判定、色覚シミュレーション、Tailwind CSS v4トークンの書き出しに対応。

Real Color Picker の使い方

画像から色を抽出し、コードを書き出すための簡単4ステップ。

1

画像を読み込む・画面から取得

画像（PNG, JPG, WEBP, SVG）をドラッグ＆ドロップ、クリップボード貼り付け、または画面スポイトを使用。

2

拡大鏡でピクセルを精密指定

16倍ルーペで狙いを定め、矢印キーで1ピクセル単位の微調整を行ってクリック。

3

カラーコードと調和色の確認

HEX, RGB, HSL, CMYK, LAB, OKLCHコードと補色・類似色を即座にコピー。

4

パレット保存とトークン書き出し

ローカルライブラリに保存、またはTailwind CSS v4やFigma用コードとして直接書き出し。

カラーコード規格・対応フォーマット一覧

8種類以上の主要なデザイン・開発用色空間へ瞬時に変換できます。

Formatフォーマット推奨用途・規格説明
HEX (#RRGGBB)#0070F3HTML / CSS / Figma / Web Standards
RGB / RGBArgb(0, 112, 243)Web Development & HTML5 Canvas
HSL / HSLAhsl(212, 100%, 48%)UI Design Systems & CSS Variables
OKLCHoklch(0.58 0.22 255.4)Modern CSS Color 4 Perceptual Gamut
CMYKcmyk(100%, 54%, 0%, 5%)Print, Press & Graphic Publishing

よくある質問（FAQ）

オンラインスポイト、画像からの色抽出、カラーコード変換に関するQ&A。

Real Color Picker は Google と関係がありますか？
Real Color Picker は独立したWebツールであり、Google社とは提携関係にありません。Web開発者やデザイナー向けに、100%無料・高機能・安全なクライアントサイドツールを提供しています。
カラーピッカーツールとは何ですか？
画面上や画像内の特定ピクセルの色彩値を正確にサンプリングし、HEX、RGB、HSL、CMYK、OKLCHなどのデジタルカラーコードに変換するツールです。
PCやスマホで画像から色コードを抽出するには？
画像をドラッグ＆ドロップするか貼り付けるだけです。16倍拡大鏡で確認しながら目的のピクセルをクリックすると、HEXコードがコピーされます。
本当に完全無料で利用回数に制限はありませんか？
はい、Real Color Picker は完全無料であり、課金要素や利用制限は一切ありません。
パレットを保存するのにアカウント登録は必要ですか？
登録は一切不要です。保存したパレットはお使いのブラウザのlocalStorage内に安全に保存されます。
通常のブラウザ付属スポイトと何が違いますか？
16倍の高倍率拡大鏡、ピクセル境界グリッド、十字照準線、矢印キーによる1ピクセル単位の微調整機能を備えています。
スペースキーでランダム配色を作れますか？
はい！パレット生成ページでスペースキーを押すだけで、美しい調和のとれた配色パターンを瞬時に探索できます。
カラーピッカーとHexカラーピッカーの違いは何ですか？
同じツールの呼び方の違いです。Hexカラーピッカーは、Web制作で標準的に用いられる6桁の16進数表記（例: #0070F3）で出力します。
WCAG 2.1 コントラスト比はどのように計算されますか？
W3C WCAG 2.1仕様に基づき相対輝度を計算し、AA判定（通常文字 4.5:1以上）およびAAA判定（7:1以上）を判定します。
アップロードした画像はサーバーに送信されますか？
いいえ、一切送信されません。すべての画像解析とピクセル計算はブラウザ内のHTML5 Canvas上で完結するため、プライバシーが完全に保護されます。