スポイトカラーピッカー

デザイン作業中、「この色のコード何だっけ？」が一瞬で解決する

Webサイトを眺めていて「このボタンの青、うちのサービスにも使いたい」と思った瞬間、あなたならどうする？ ブラウザの開発者ツールを開いて要素を探し、CSSプロパティの中から色コードを抜き出す。慣れた人でも地味に手間がかかる作業だ。

このスポイトカラーピッカーは、画面上の任意の場所をワンクリックするだけで色のHEXコード・RGB・HSLを一括取得できるツール。さらに補色・類似色の配色提案まで自動で出してくれるので、「色を拾う → 配色を考える」までがブラウザだけで完結する。

なぜスポイトカラーピッカーを作ったのか

開発のきっかけ

以前、クライアントから「競合サイトで使っているこの青に近い色でヘッダーを作ってほしい」と依頼されたことがある。そのとき自分がやったのは、スクリーンショットを撮り、画像編集ソフトに貼り付け、スポイトで色を拾い、それをHEXに変換するという4ステップの作業。正直、色を1つ調べるのに手順が多すぎると思った。

ブラウザの開発者ツールを使えばCSSの色は取れるが、画像の上に載った色やグラデーションの途中の色はそう簡単にはいかない。Chrome拡張を入れる方法もあるけれど、拡張を増やすとブラウザが重くなるし、セキュリティ面も気になる。

「ブラウザのタブ1つ開くだけで、画面上のどこでもスポイトで色が拾える」ツールが欲しかった。それがこのアプリの出発点だ。

こだわった設計判断

まず、EyeDropper APIというブラウザネイティブのAPIを採用した。ブラウザが標準で持っている機能なので、外部ライブラリ不要で動く。ただしFirefoxやSafariではまだ使えないため、非対応ブラウザではHTMLのカラーパレット（<input type="color">）にフォールバックする設計にした。

もう一つのこだわりは配色提案。色を拾って終わりではなく、その色の補色（色相環で正反対の色）と類似色（色相が±30°の色）を自動で提示する。デザイン作業では「メインカラーに合うアクセントカラーは何か」を考える場面が多いので、拾った瞬間に候補が見えるのは実務で助かる。

カラーピッカーとは — HEX・RGB・HSLの色空間を理解する

カラーピッカー とは

カラーピッカーとは、画面上の特定のピクセルから色の情報を取得するツールの総称だ。PhotoshopやFigmaなどのデザインツールには標準搭載されているが、Webブラウザ上で単体ツールとして使えるものは意外と少ない。

色をコンピュータで表現する方法は複数あり、それぞれ得意な場面が異なる。

HEX（16進数カラーコード）とは

HEXは#3B82F6のように#の後に6桁の16進数で色を表す形式。Webの世界ではCSS・HTML・デザインツールのすべてで通用する「共通語」だ。赤（R）・緑（G）・青（B）の各チャンネルを2桁ずつ、00〜FFの256段階で表現する。

HEX: #3B82F6
  R = 3B → 59（10進数）
  G = 82 → 130
  B = F6 → 246

RGB とは

RGBは光の三原色（Red・Green・Blue）を0〜255の整数値で表す形式。rgb(59, 130, 246)のように書く。CSSのrgba()関数で透明度を追加できるため、Webフロントエンドでは頻繁に使う。

たとえるなら、3つの照明（赤・緑・青）を個別に調光して好みの色を作るイメージ。3つとも全開（255, 255, 255）にすると白、全消灯（0, 0, 0）にすると黒になる。

HSL とは

HSLは色相（Hue, 0〜360°）・彩度（Saturation, 0〜100%）・明度（Lightness, 0〜100%）で色を表す形式。hsl(217, 91%, 60%)のように書く。

HSLの最大のメリットは人間の直感に近いこと。「もう少し明るくしたい」ならLを上げる、「くすんだ色にしたい」ならSを下げる、「暖色にずらしたい」ならHを小さくする。RGBではこうした調整が3つのチャンネルを同時にいじる必要があるので直感的でない。

色相環の概念についてはWikipedia「色相」が詳しい。

EyeDropper API とは

EyeDropper APIは、ブラウザの画面上の任意のピクセルの色を取得できるWeb API。2021年にChromiumベースのブラウザ（Chrome 95+、Edge 95+）で実装された。MDN Web Docsに詳細な仕様が記載されている。

JavaScriptでnew EyeDropper().open()を呼ぶと、カーソルがスポイトに変わり、ユーザーがクリックした場所の色をsRGBHex形式で返す。ブラウザのタブ内だけでなく、デスクトップ全体の色を取得できるのが大きな特徴だ。

正確な色取得がデザインで重要な理由

ブランドカラーの統一

企業やサービスのブランドカラーは、HEXコードの1桁違いで印象が変わる。たとえば#3B82F6と#3B82F0の差はモニター上ではほぼ見分けがつかないが、ブランドガイドラインでは「正確な値」が求められる。目視で「だいたいこの色かな」と近似値を使い続けると、Webサイト・アプリ・印刷物の間で微妙な色ズレが積み重なり、ブランドの一貫性が損なわれる。

アクセシビリティ基準

WCAG（Web Content Accessibility Guidelines）では、テキストと背景のコントラスト比が4.5:1以上（AA基準）であることを求めている。この計算にはテキスト色と背景色の正確なHEX/RGB値が必要で、「だいたい白」「だいたい黒」では正確な判定ができない。

デザインシステムでの活用

大規模なプロダクトではデザインシステムでカラートークンを管理する。既存のUIから色を正確に拾えないと、トークンとの照合ができず「この画面のグレーはGray-400なのかGray-500なのか」という無駄な議論が発生する。正確なHEX値が分かれば、トークン名を即座に特定できる。

ワンクリックで色が必要になる場面

Webサイトのリデザイン

既存サイトのデザインを刷新する際、「この部分の色だけは現行を踏襲したい」という要件は多い。開発者ツールでCSSを掘るより、スポイトでワンクリックのほうが圧倒的に速い。

プレゼン資料・企画書の作成

PowerPointやGoogleスライドで「参考サイトと同じ配色にしたい」とき、スポイトで色を拾ってHEXをコピペすれば、図形やテキストの色指定が一発で決まる。

DIY・塗装色の確認

壁紙や家具の色をモニター上で確認し、「この色に近いペンキを探したい」というDIYの場面。HSL値が分かれば、ホームセンターの調色サービスで色相・彩度・明度を伝えやすくなる。

競合サイト分析

マーケティング担当者が競合のWebサイトを分析する際、使われている配色パターンを数値で把握しておくと、差別化の議論が具体的になる。

基本の使い方

色の取得から活用まで3ステップで完了する。

Step 1: スポイトで色を取得

「スポイトで色を取得」ボタンをクリック。カーソルがスポイトに変わるので、画面上の好きな場所をクリックしてみて。非対応ブラウザの場合はカラーパレットが表示されるので、そこから色を選べばOK。

Step 2: 色コードを確認

取得した色がHEX・RGB・HSLの3形式で表示される。大きなプレビューで実際の色も確認できるので、意図した色かどうか一目でわかる。

Step 3: コピーして使う

必要な形式の「コピー」ボタンをクリック。CSSに貼るならHEX、JavaScriptで使うならRGB、色調整をするならHSLが便利。配色提案の補色・類似色もワンクリックでコピーできる。

具体的な使用例 — 6つのケースで実践

ケース1: ロゴの色を正確に抽出

状況: クライアントのロゴ画像からブランドカラーのHEXコードを取得したい

操作:

• ロゴ画像をブラウザで表示 → スポイトでロゴの青い部分をクリック

取得結果:

• HEX: #1E40AF
• RGB: rgb(30, 64, 175)
• HSL: hsl(226, 71%, 40%)

→ 解釈: ブランドガイドラインの値と照合し、正確な色コードをデザインファイルに反映できる。

ケース2: Webサイトの背景グラデーション端点を調査

状況: 競合サイトのヘッダーグラデーションの開始色と終了色を知りたい

操作:

• グラデーションの左端をスポイトで取得 → 右端も取得

取得結果:

• 開始色: #7C3AED（紫）
• 終了色: #EC4899（ピンク）

→ 解釈: 2色のHEX値をCSSのlinear-gradient()に直接使える。履歴に2色とも残るので見比べも簡単。

ケース3: 補色を使ったCTAボタンの配色

状況: メインカラーが青系のサイトで、目立つCTAボタンの色を決めたい

操作:

• メインカラーの青（#3B82F6）をスポイトで取得

配色提案:

• 補色: #F6A43B（オレンジ系）
• 類似色+30°: #3BF6D2（ターコイズ）
• 類似色−30°: #6B3BF6（紫）

→ 解釈: 補色のオレンジは青と最もコントラストが高く、CTAボタンに最適。視線を集めたい要素に使う。

ケース4: ダークモードの背景色を段階的に設計

状況: ダークモードUIで背景・カード・入力欄の3段階のグレーを作りたい

操作:

• 参考にしたいダークUIの背景色をスポイトで取得 → HSLの明度（L値）を確認

取得結果:

• 背景: hsl(0, 0%, 10%) → L=10%
• カード: hsl(0, 0%, 13%) → L=13%
• 入力欄: hsl(0, 0%, 15%) → L=15%

→ 解釈: HSLのL値を3%刻みで上げると、微妙な明暗差がつく。この間隔を維持すれば統一感のあるダークテーマが作れる。

ケース5: 写真の支配的な色をサンプリング

状況: ランディングページのヒーロー画像に合わせてテキスト色を決めたい

操作:

• 写真の広い面積を占める色をスポイトで3箇所取得し、履歴を確認

取得結果:

• #4A7C59（深緑）
• #8FB996（薄緑）
• #D4E8D0（極薄緑）

→ 解釈: 写真のトーンに合わせた3色のパレットが即座に完成。テキストは最も暗い#4A7C59をベースにするとコントラストが確保できる。

ケース6: SNSのブランドカラーを一括収集

状況: サイトのフッターにSNSアイコンを配置する際、各SNSのブランドカラーを正確に揃えたい

操作:

• Twitter/X、Instagram、Facebook、YouTubeの各公式ページでロゴの色をスポイトで取得

取得結果:

• Twitter/X: #000000
• Instagram: #E4405F
• Facebook: #1877F2
• YouTube: #FF0000

→ 解釈: 履歴に4色並ぶので見比べが容易。各HEXをコピーしてSVGアイコンのfill属性に直接指定できる。

仕組み・アルゴリズム — RGB↔HSL変換と配色提案のロジック

採用している変換アルゴリズム

このツールの色変換は、W3CのCSS Color Module Level 4で定義されている標準アルゴリズムに準拠している。

HEX → RGB の変換は単純な16進数→10進数の変換だ。#3B82F6なら、2文字ずつ区切って3B=59, 82=130, F6=246と計算する。

RGB → HSL の変換はやや複雑で、以下のステップを踏む:

1. R, G, B を 0〜1 の範囲に正規化
   rN = 59/255 ≈ 0.231
   gN = 130/255 ≈ 0.510
   bN = 246/255 ≈ 0.965

2. max, min, 差分 d を求める
   max = 0.965 (bN)
   min = 0.231 (rN)
   d = 0.734

3. 明度 L = (max + min) / 2
   L = (0.965 + 0.231) / 2 ≈ 0.598 → 60%

4. 彩度 S = d / (1 - |2L - 1|)
   S = 0.734 / (1 - |2×0.598 - 1|) ≈ 0.916 → 92%

5. 色相 H: max が bN なので
   H = ((rN - gN) / d + 4) × 60
   H = ((0.231 - 0.510) / 0.734 + 4) × 60 ≈ 217°

補色・類似色の算出

配色提案はHSL色空間の色相環（Hue Circle）を利用する。色相環は0°〜360°の円環で、色相の角度関係が配色理論の基礎になっている。

補色:     H_comp = (H + 180) % 360
類似色+:  H_ana1 = (H + 30) % 360
類似色−:  H_ana2 = (H - 30 + 360) % 360

補色は色相環の正反対に位置する色で、最もコントラストが強い組み合わせ。類似色は色相が近い色で、統一感のある配色に向いている。彩度（S）と明度（L）は元の色をそのまま維持するので、トーンが揃った配色が得られる。

HSL → RGB の逆変換

配色提案で算出したHSLをプレビュー表示やHEXコードに変換するため、逆変換も実装している。C（Chroma）= (1 − |2L − 1|) × S を求め、色相の60°ごとのセクターに応じてR', G', B'に分配し、明度の補正値 m = L − C/2 を加算する方式だ。

なぜこの方式を選んだか

色変換ライブラリ（chroma.js、color.js等）を使う選択肢もあったが、今回の用途（HEX↔RGB↔HSL + 色相回転）は基本的な演算だけで実現できるため、外部依存なしの自前実装を選んだ。バンドルサイズの削減と、変換精度を自分でコントロールできるメリットがある。

ブラウザ拡張もデスクトップアプリもいらない理由

インストール不要

Chrome拡張のカラーピッカーは便利だが、会社のPCでは拡張のインストールが制限されている場合がある。このツールはURLを開くだけで使える。

配色提案が同時に得られる

多くのスポイトツールは「色を拾う」だけで終わる。このツールは拾った瞬間に補色と類似色を提示するので、配色検討のワークフローが1ステップ短縮される。

3形式を一括表示

HEX・RGB・HSLをそれぞれ別のツールで変換する必要がない。コピーボタンも形式ごとに独立しているので、CSSに貼るときはHEX、JavaScriptの関数に渡すときはRGBと使い分けられる。

色にまつわる豆知識

Webセーフカラーの時代

1990年代後半、ブラウザが表示できる色は216色に限られていた。この「Webセーフカラー」はRGB各チャンネルを00, 33, 66, 99, CC, FFの6段階に制限したパレットで、どのブラウザでも同じ色が表示されることを保証するものだった。現在のモニターは1677万色（24ビットカラー）を表示できるため、Webセーフカラーという概念はほぼ役目を終えている。Wikipedia「ウェブカラー」に歴史が詳しい。

色の心理効果とマーケティング

色が人間の心理に与える影響は、マーケティングの世界で広く研究されている。青は信頼感、赤は緊急性、緑は安心感を喚起するとされ、ECサイトの「カートに入れる」ボタンにオレンジや緑が多いのはこの理論に基づいている。ただし文化圏によって色の印象は異なるため、グローバル展開するサービスでは注意が必要だ。

効率的な配色ワークフローのTips

Tip 1: メインカラーをまず1色決める

配色に迷ったら、まずメインカラーを1色だけ決めてスポイトで取得しよう。補色・類似色が自動で提案されるので、そこから2〜3色のパレットが組み立てられる。

Tip 2: HSLのL値でグレースケールを設計する

ダークモードの背景色は、HSLのH=0, S=0で固定し、L値だけを10%, 13%, 15%のように3%刻みで変化させると、統一感のあるグレースケールが作れる。

Tip 3: 履歴を活用してパレットを組む

画面のあちこちから色を拾い、履歴バーに並んだ色を俯瞰する。10色の履歴が簡易パレットとして機能するので、最終的にどの色を採用するか比較しやすい。

Tip 4: 補色をアクセントカラーに使う

メインカラーの補色は最もコントラストが高い色。CTAボタンやバッジなど「目立たせたい要素」に限定的に使うと効果的。全面に使うと目がチカチカするので注意。

よくある質問

Q: EyeDropper APIに対応していないブラウザでは使えない？

EyeDropper APIはChromium系ブラウザ（Chrome 95+、Edge 95+、Opera 81+）で対応している。FirefoxやSafariでは非対応だが、カラーパレット（<input type="color">）からの色選択にフォールバックするため、色の取得・変換・配色提案の機能はすべて利用可能。スポイトによる画面上の色取得だけが制限される。

Q: HEX・RGB・HSLのどれを使えばいい？

用途によって使い分ける。CSSに直接書くならHEXが最も一般的で短い。JavaScriptで色を動的に操作する（透明度を変える等）ならRGBA形式が便利。配色調整（明るさや彩度を微調整したい）ならHSLが直感的。このツールは3形式を同時に表示するので、必要な形式をそのままコピーすればよい。

Q: 取得した色のデータはどこかに送信される？

一切送信されない。すべての処理はブラウザ内で完結しており、色データや履歴がサーバーに送られることはない。ページを閉じると履歴も消える。

Q: 補色と類似色の角度（180°と30°）は変更できる？

現在のバージョンでは角度は固定。補色=180°、類似色=±30°はカラーホイール理論における標準的な値で、多くのデザインツールでも同じ角度が採用されている。分裂補色（Split-Complementary, ±150°）やトライアド（120°間隔）は今後のアップデートで検討中。

まとめ

スポイトカラーピッカーは、画面上の色をワンクリックで取得し、HEX・RGB・HSLの3形式と配色提案を一括で得られるツールだ。

ブラウザ拡張やデスクトップアプリのインストールなしで「色を拾う → 変換する → 配色を考える」が完結する。デザイナーもエンジニアも、色に関する作業の起点として活用してみてほしい。

色彩の変換にもっと踏み込みたい人はHEX⇄マンセル⇄日塗工 変換ツールや色混合シミュレーターも試してみて。

---

不具合や要望があれば、X (@MahiroMemo)から気軽に教えて。