色スポイトツールを公開しました
デザイン作業やWeb制作で「あの色のコードが知りたい」と思ったことはありませんか？印刷物の写真、気になるWebサイトのスクリーンショット、店頭で撮影した商品パッケージ。そんなときにすぐ使える「色スポイト」ツールを公開しました。
インストール不要でブラウザから利用でき、スマートフォンのカメラで直接撮影して色を取得することも可能です。
基本的な使い方
操作はシンプルな4ステップです。
- 写真を選ぶ：アルバムから画像を選択、またはカメラで直接撮影
- タップして色を取得：画像の気になる場所をタップまたはクリック
- コードをコピー：表示された色コードをタップでクリップボードにコピー
- パレットで照合：24分割パレットで近似色を確認・修正
取得できる色フォーマット
タップ1回で以下の4種類のフォーマットをまとめて取得できます。
| フォーマット | 表示例 | 主な用途 |
|---|---|---|
| HEX | #FF5733 | CSS・Figma・Illustrator |
| RGB | rgb(255, 87, 51) | CSS・Photoshop |
| HSL | hsl(10, 100%, 60%) | CSS・色の調整 |
| 24分割コード | H02-L2-S3 | 独自カラー管理システム |
各値はタップするだけでクリップボードにコピーされるため、そのままCSS編集画面や設計ツールに貼り付けられます。
精度向上のための工夫
写真には影や素材の質感、照明の影響があるため、ピンポイントの1ピクセルだけを取得しても正確な色が得られないことがあります。このツールでは以下の工夫を加えました。
近傍平均採取：クリックした座標の周囲5×5ピクセルの平均色を計算することで、ノイズや細かい柄の影響を軽減します。
隣接H候補表示：取得した色の色相（H値）の前後±1に相当する関連色を常に表示します。照明や写真の色再現に誤差がある場合でも、目的の色に近い候補を確認できます。
独自の24分割カラーシステム
このツール最大の特徴が「24分割カラーコード」です。色を以下の3軸に分解して管理します。
| 軸 | 分類 | 意味 |
|---|---|---|
| H（色相） | H00〜H23 | 色の系統を360°÷24で分類 |
| L（明るさ） | L1〜L3 | 暗い（L1）／中（L2）／明るい（L3） |
| S（彩度） | S1〜S3 | 淡い（S1）／中（S2）／濃い（S3） |
例えば H02-L2-S3 は「赤みがかったオレンジ系・中程度の明るさ・濃い彩度」を意味します。H24×L3×S3＝216パターンで全色域をカバーしているため、色の傾向を言語化しやすくなります。
コードを直接入力することもでき、「昨日使っていたあの色に近い色を探したい」というときにも便利です。
インタラクティブなパレット検索
画面下部には常時表示のパレットパネルがあります。
- H（色相）パレット：24色のボタングリッドをクリックして色相を選択。グラデーションバーをドラッグして連続的に調整することも可能です。
- L（明るさ）パレット：L1〜L3の3ボタンで明るさを切り替え
- S（彩度）パレット：S1〜S3の3ボタンで彩度を切り替え
スポイトで取得した色と比較しながら近似色をインタラクティブに絞り込めるので、「ちょうどいい色が見つからない」というデザインの悩みにも役立ちます。
プライバシーへの配慮
アップロードした画像はサーバーに送信されず、すべての処理はブラウザ内で完結します。プライバシーに配慮しつつ、気軽に使っていただける設計です。
こんな場面で役立ちます
- 競合他社やベンチマークサイトの色を素早く調べたいとき
- 印刷物の色をデジタル用に再現したいとき
- チームで「あの色」を共有する際にコードで正確に伝えたいとき
- 自社のブランドカラーを整理・管理したいとき
ぜひ一度お試しください。