画像の色取得（カラーピッカー）
画像をアップして気になる場所をクリック。HEX・RGB・HSLカラーコードを即取得。CSS設計・ブランドカラー抽出・デザイン作業に。
「あの色のコードが知りたい」という悩み
企業のロゴをWebサイトで再現したいとき、デザインカンプから色を正確に拾いたいとき、写真の配色をCSSに使いたいとき——「あの色のHEXコードって何番？」という場面は制作現場で頻繁に起こります。
PhotoshopやFigmaがあれば簡単ですが、確認のためだけにリッチなソフトを起動するのは面倒です。このツールはブラウザだけで完結します。画像をアップロードして気になる場所をクリックするだけ。HEX・RGB・HSLの3形式を即座に取得できます。
主な機能
- 画像アップロード（PNG・JPG・WebP対応）
- クリックした座標のピクセル色を即取得
- HEX・RGB・HSLの3形式で同時表示
- 各カラーコードをワンクリックでコピー
- ズーム機能で細かい部分も正確に選択
3つのカラー形式を使い分ける
HEX（16進数）
#3b82f6 のような形式。CSS・HTML・デザインツールで最も汎用的。コピペしてすぐ使えます。
RGB
rgb(59, 130, 246) の形式。透明度を加えたrgba()への変換も容易。JavaScriptでの操作にも向いています。
HSL
hsl(217, 91%, 60%) の形式。色相・彩度・明度で表現するため「少し暗く」「少し薄く」といった直感的な調整がしやすい。
活用シーン
企業ロゴからブランドカラーを抽出
ロゴ画像をアップロードして、公式サイトと同じ色をCSSに使う。デザインガイドラインに色コードがない場合に特に有効。
写真から配色を作る
気に入った写真の色づかいをそのままデザインに取り入れる。自然の色・インテリアの色もすべて配色のヒントになります。
デザインカンプのコーディング
Figmaなどで作られたカンプから色を拾い、コーディングに正確な値を使う。
ピクセルとカラーの仕組み
デジタル画像は無数の「ピクセル」の集合体です。1ピクセルは赤（R）・緑（G）・青（B）の3値（各0〜255）で表現されます。HEX形式（#RRGGBB）はこのRGB値を16進数に変換したものです。
HSLは人間の感覚に近い形式で「色相（Hue）・彩度（Saturation）・明度（Lightness）」の3軸で色を指定します。デザインの微調整にはHSLが、実装にはHEX/RGBが使われることが多いです。
使い方
- 画像をアップロード — ドラッグ&ドロップまたはファイル選択
- 確認したい場所をクリック — クリックした点のピクセル色を取得
- カラーコードを確認 — HEX / RGB / HSLが表示されます
- コピーして利用 — ボタンを押してクリップボードへ