Color Picker：画面から任意の色を選択

Color Picker とは？

Color Picker は、EyeDropper API を使って画面上の任意の色を取得したり、HEX、RGB、HSL 形式で色の値を手動入力してすべての主要なカラーモデルへの変換を即座に確認できる、無料のブラウザベースのツールです。デザイナーは重いデスクトップソフトウェアを開かずに、スクリーンショット、ウェブサイト、デザインモックアップから色を合わせる必要があるときにこのツールを使います。ネイティブの OS カラーピッカーとは異なり、このツールは 1 つのインターフェースで HEX、RGB、HSL、HSB、CMYK 間を即座に変換します。ログイン不要、インストール不要、データはブラウザの外に出ません。

主な機能

• 画面上のどこからでも色を取得 — EyeDropper API が Chrome、Edge などの最新の Chromium ブラウザでシステムレベルのカラーサンプラーを起動します。任意のピクセルをクリックすると、色が即座にツールに読み込まれます。
• 最新ブラウザでの EyeDropper API サポート — ツールは実行時に API の可用性を検出します。非対応ブラウザでは、壊れたボタンではなく明確なメッセージが表示されます。
• HEX、RGB、HSL、HSB、CMYK 間の変換 — 「All Formats」パネルがすべての表現を同時に表示します。いずれかの入力フィールドを変更すると、その他すべてがリアルタイムで更新されます。
• カラー値をクリップボードにコピー — 各フォーマットに専用のコピーボタンがあります。コピーが成功すると、コピーアイコンが 2 秒間チェックマークに置き換わります。
• カラー履歴（サポーター機能） — 最近使用した 50 色が IndexedDB に保存され、クリック可能なスウォッチとして表示されます。履歴はページのリロード後も保持されます。Ko-fi サポーターサブスクリプションが必要です。
• 読み込み後はオフラインで動作 — すべての変換ロジックは JavaScript で実行されます。ページが読み込まれると、インターネット接続を切断してもツールは正常に動作し続けます。

Color Picker の使い方

ステップ 1：ツールを開いて入力方法を選択

Color Picker にアクセスします。ツールはデフォルトカラー #3B82F6（中程度の青）で開きます。色を設定する方法は 3 つあります。

• EyeDropper API を使用するには Pick From Screen ボタン（ピペットアイコン）をクリック
• ピッカーパネル右上の小さなカラースウォッチ入力をクリックして、ブラウザのネイティブカラーホイールを開く
• HEX、R/G/B、H/S/L 入力フィールドに直接入力

ステップ 2：画面から色をサンプリング（EyeDropper メソッド）

Pick From Screen をクリックします。EyeDropper がアクティブな間、ボタンのラベルが「Picking...」に変わります。カーソルがクロスヘアルーペになります。画面上の任意のピクセルをクリックします。ほとんどのシステムでブラウザウィンドウ外のピクセルも対象です。ツールが hex 値を取得し、すべてのフォーマットフィールドを更新して成功通知を表示します。サンプリングされた色は自動的に履歴パネルに追加されます。

ステップ 3：カラー値を手動で入力または調整

カラー値がわかっている場合は、任意の入力フィールドに入力します。HEX フィールドは # プレフィックスの有無にかかわらず値を受け付けます。RGB 入力は 0 から 255 までの整数を受け付けます。HSL は H（0–360）、S（0–100）、L（0–100）を受け付けます。フィールドを変更すると、他の 2 つのフォーマットが同時に再計算されて更新されます。

ステップ 4：すべてのカラーフォーマット変換を確認

メインピッカーの下にある All Formats カードまでスクロールします。このパネルには変換の完全なセットが表示されます：HEX、RGB、HSL、HSB、CMYK。各行に独自のコピーボタンがあります。任意のフォーマットの横にあるコピーアイコンをクリックすると、その値がクリップボードに書き込まれます。

ステップ 5：履歴の色を再利用

以前に選択した色は Recent Colors パネルにカラースウォッチとして表示されます。任意のスウォッチをクリックすると、その色がピッカーとフォーマットフィールドに再ロードされます。Clear ボタン（ゴミ箱アイコン）を使って必要に応じて履歴を消去できます。

実践的な使用例

ウェブサイトのブランドカラーを合わせる

ランディングページを作成していて、ブラウザのタブに表示されているクライアントのロゴで使用されている正確な紫を合わせる必要があるとします。Pick From Screen をクリックし、ロゴの上にカーソルを移動してクリックします。ツールが hex 値（例：#6B21A8）を取得し、すぐに rgb(107, 33, 168) と hsl(276, 61%, 40%) を表示します。CSS ファイルで使用するフォーマットをコピーしてください。

Figma のカラーを CSS に変換

Figma のデザイン仕様書にカラーが rgb(234, 179, 8) として記載されています。R フィールドに 234、G に 179、B に 8 を入力します。HEX フィールドが #EAB308 に更新され、HSL は hsl(45, 93%, 47%) を表示します。bg-[#EAB308] のような Tailwind クラス用に HEX 値をコピーするか、CSS カスタムプロパティ用に HSL をコピーします。

Hex コードが実際にどのような色か確認する

コードレビューで background: #1E3A5F が表示され、それを可視化したいとします。HEX フィールドに値を貼り付けます。大きなカラープレビュースウォッチがその色（暗いネイビーブルー）で満たされ、ラベルテキストの色が読みやすさのために黒と白の間で自動的に調整されます。履歴スウォッチを使って他の色と比較できます。

ヒントとベストプラクティス

履歴パネルを一時的なパレットとして使用（サポーター機能）。 ツールはプレミアムサポーター向けに IndexedDB に最大 50 色を保存します。色を一つずつサンプリングまたは入力して小さなパレットを作成してください。各色は値を書き留めずに戻れるクリック可能なスウォッチになります。

EyeDropper はビデオフレームを含む任意のピクセルで動作します。 目的の色があるフレームでビデオを一時停止し、Pick From Screen を使用します。API はレンダリングされたピクセルをサンプリングします。圧縮されたソースではありません。

正確なコントロールのために HSL 値を入力。 特定の色相でより低い彩度を希望する場合は、H フィールドと S フィールドに直接入力します。「同じ色で 20% 明るく」（L を 20 増やす）のような調整には HSL がより直感的です。

共有可能な URL が現在の色をエンコード。 ツールは共有可能なステートフックを使用しています。現在の HEX 値がページ URL にエンコードされています。ブラウザの URL をコピーして、特定の色を同僚に送信できます。

デバイスを共有する前に履歴を消去。 機密性の高いデザインアセットを含む色をピックする場合は、デバイスを渡す前に履歴パネルの Clear ボタンを使用して IndexedDB から削除してください。

よくある問題とトラブルシューティング

「EyeDropper 非対応」メッセージが表示される。 EyeDropper API には Chromium ベースのブラウザ（Chrome 95+、Edge 95+）が必要です。Firefox と Safari は 2026 年初頭時点で対応していません。非対応ブラウザではネイティブカラー入力スウォッチを使用するか、値を手動で入力してください。

入力後に HEX フィールドが更新されない。 フィールドには # の有無にかかわらず、有効な 3、4、6、または 8 文字の hex コードが必要です。#3B のような部分的な値は入力で受け付けられますが、完全な有効コードが入力されて初めて変換が実行されます。

RGB 値が範囲外。 各 R、G、B フィールドは 0–255 に制限されています。255 を超える値はフォーカスを外すと 255 に修正されます。parseInt フォールバックにより、非数値文字は 0 として解決されます。

コピーしたフォーマットに誤った値が表示される。 各コピーボタンはその固有のフォーマット文字列をコピーします。必要なフォーマットに対応する All Formats パネルの行のコピーアイコンをクリックしているか確認してください。メインの HEX 入力行のものと間違えないようにしてください。

リロード後に履歴が保持されない。 履歴は IndexedDB を使用するサポーター専用機能です。プレミアムサポーターでない場合、履歴パネルはエントリーを記録しません。プライベート/シークレットモードで IndexedDB が無効または利用できない場合、履歴パネルは毎回空で表示されます。ツールはこれをサイレントに処理します。

プライバシーとセキュリティ

Color Picker は JavaScript を使用してブラウザ内ですべてをローカルで処理します。カラー値、画面コンテンツ、使用データはいずれもサーバーに送信されません。EyeDropper API はクリックした 1 ピクセルのみを取得します。スクリーンショットや画面録画は行われません。カラー履歴は外部データベースではなく、ブラウザの IndexedDB に保存されます。ページが読み込まれるとツールは完全にオフラインで動作し、機密性の高いデザインアセットを扱う際も安全に使用できます。

よくある質問

Color Picker は無料ですか？

はい、Color Picker はサインアップ不要で完全に無料です。コア機能（EyeDropper サンプリング、マルチフォーマット変換、クリップボードコピー）はすべてサポーターアカウントなしで利用できます。カラー履歴、プリセット、ツールメモなどのプレミアムサポーター機能は Ko-fi サポーターサブスクリプションで利用できます。

Color Picker はオフラインで動作しますか？

はい。ページが読み込まれると、Color Picker はインターネット接続なしで動作します。すべてのカラー変換ロジックはブラウザで実行される JavaScript に実装されています。EyeDropper API もネットワークアクセスを必要としないブラウザネイティブ機能です。

Color Picker でデータは安全ですか？

はい。カラーデータや画面コンテンツはブラウザの外に出ません。EyeDropper API はクリックした瞬間の 1 ピクセル値を取得するだけです。スクリーンショットを撮ったり画面を録画したりはしません。カラー履歴はブラウザの IndexedDB にのみ保存されます。Glyph Widgets はどの色を選んだかをサーバー側から見ることはできません。

EyeDropper ボタンに対応しているブラウザは？

EyeDropper API は Chrome 95 以降、Edge 95 以降、およびその他の Chromium ベースのブラウザで動作します。Firefox や Safari では対応していません。ツールは実行時にサポートを検出し、非対応ブラウザでは壊れたボタンの代わりに明確なメッセージを表示します。

ツールが出力するカラーフォーマットは？

ツールは HEX（例：#3B82F6）、RGB（例：rgb(59, 130, 246)）、HSL（例：hsl(217, 91%, 60%)）、HSB（HSV とも呼ばれる）、CMYK に変換して表示します。All Formats パネルには 5 つすべてが同時に表示され、それぞれに個別のコピーボタンがあります。

EyeDropper を使わずにカラー値を入力できますか？

はい。HEX、R/G/B、または H/S/L 入力フィールドに直接入力できます。また、小さなネイティブカラー入力（Pick From Screen ボタンの横の色付き正方形）をクリックして、ブラウザのカラーホイールを開くこともできます。3 つの入力方法はすべて同じ内部カラー状態を更新します。

履歴パネルには何色保存できますか？

履歴パネルは最大 50 色を保存します（サポーター機能）。上限に達すると最も古いエントリが削除されます。履歴は IndexedDB に保存され、ブラウザセッションをまたいで保持されます。この機能には Ko-fi サポーターサブスクリプションが必要です。

特定の色を他の人と共有できますか？

はい。現在の色は共有可能な状態としてページの URL にエンコードされています。色を選択した後、ブラウザのアドレスバーから URL をコピーしてください。同僚がリンクを開くと、ツールはその色を事前に選択した状態で読み込まれ、「Loaded from share」通知が表示されます。ページ下部の Share ボタンを使って Twitter、LinkedIn、Reddit に直接投稿することもできます。

アルファ/透明度の値は扱えますか？

現在のツールは主に完全に不透明な色で動作します。HEX 入力フィールドは 3、4、6、8 桁の hex コードを受け付けます（4 桁と 8 桁のコードにはアルファチャンネルが含まれます）が、RGB と HSL の入力には別途アルファスライダーがありません。RGBA や HSLA の値が必要な場合は、表示されている RGB や HSL の値に希望のアルファ値を手動で追加してください。

無効な hex コードを入力した場合はどうなりますか？

HEX 入力フィールドは入力中に部分的または無効な値を受け付けます。カラー変換は有効な hex コード（# の有無にかかわらず 3、4、6、または 8 文字）が存在する場合にのみ更新されます。部分的な値はエラーを引き起こしません。表示は単に最後の有効な色を維持します。

関連ツール

• Contrast Checker — Color Picker で選択した前景色と背景色が WCAG 2.1 アクセシビリティ基準を満たしているか確認します。
• Color Converter — メインピッカーインターフェースに表示されていない追加のカラーフォーマット間で変換します。
• 近日公開: Palette Generator — 取得した hex 値を基に完全なカラーパレットを生成します。
• 近日公開: Gradient Generator — サンプリングした色を使って、ビジュアルエディターで CSS グラデーションを作成します。

今すぐ Color Picker を試す：Glyph Widgets Color Picker