カラーピッカー

ブラウザだけで使えるカラーピッカーです。インストールや会員登録は不要で、スマホでもPCでもすぐに使えます。

カラーホイールから色を選ぶほか、画像を読み込んで好きなピクセルの色を抜き出すこともできます。対応フォーマットはPNG・JPEG・WebP・GIF・BMP・AVIF・SVGです。

選んだ色はHEX・RGB・HSLをはじめ、HSV・HWB・CMYK・CIE Lab・OKLab・OKLCHの9種類のカラーコードで確認でき、タップでそのままコピーできます。近い色の日本語名も自動で表示されます。

パレット機能では最大32色を保存でき、色名メモ・並び替え・データの書き出しと読み込みにも対応しています。カラーハーモニー機能を使えば、選んだ色をもとにした配色パターンも確認できます。

色を数値で表す方法にはいくつかの種類があって、用途によって使い分けることが多いです。ここでは代表的なものを紹介します。

HEX

Webで最もよく見かける形式で、`#FF5733` のように `#` に続けて16進数6桁で色を表します。先頭2桁が赤、中2桁が緑、末尾2桁が青で、それぞれ00〜FFの範囲です。CSSではこの形式が長く使われてきたので、デザインカンプやスタイルガイドでもHEXで指定されていることが多いです。

RGB

赤(Red)・緑(Green)・青(Blue)の3つの値を0〜255で指定します。ディスプレイが光の三原色で色を作る仕組みそのもので、CSSでも `rgb(255, 87, 51)` のように書けます。HEXとRGBは表記が違うだけで中身は同じなので、変換しても色は変わりません。

HSL

色相(Hue)・彩度(Saturation)・明度(Lightness)の3つで色を表します。色相は0°〜360°の角度、彩度と明度は0%〜100%です。「この色をもう少し明るくしたい」「彩度だけ落としたい」といった調整がしやすいのが特長で、CSSでも `hsl(14, 100%, 60%)` のように書けます。配色を考えるときに重宝します。

HSV

HSLとよく似ていますが、明度(Value)の定義が異なります。PhotoshopやFigmaなど多くのデザインツールのカラーピッカーはこのHSV方式を採用しています。HSLでは白がL=100%ですが、HSVでは純色（鮮やかな色）がV=100%になるので、鮮やかさの感覚が少し違います。

HWB

色相(Hue)・白さ(Whiteness)・黒さ(Blackness)で色を指定します。CSS Color Level 4で正式に仕様に入った比較的新しい形式です。「白をどれだけ混ぜるか」「黒をどれだけ混ぜるか」という考え方なので、絵の具を混ぜる感覚に近いかもしれません。

CMYK

シアン(Cyan)・マゼンタ(Magenta)・イエロー(Yellow)・ブラック(Key)の4色で色を表す、印刷で使われる形式です。ディスプレイの光(RGB)とプリンターのインク(CMYK)では色の作り方が根本的に違うので、画面で見た色と印刷した色が合わないことがあるのはこのためです。印刷物のデータを作るときはCMYKの値を意識する必要があります。

CIE Lab

人間の視覚特性をもとに設計された色空間で、L(明度)・a(緑〜赤)・b(青〜黄)の3軸で色を表します。「2つの色がどれくらい違って見えるか」を数値で測れるのが大きな特徴で、色差(ΔE)の計算に広く使われています。工業製品の色の品質管理などにも利用されている、色彩科学寄りの指標です。

OKLab・OKLCH

CIE Labを改良した色空間で、知覚的な均一性がさらに向上しています。OKLCHは明度(L)・彩度(C)・色相(H)の円筒座標で表すので、HSLと同じ感覚で扱えます。CSSでも `oklch()` が使えるようになり、グラデーションの中間色がきれいに出るとして注目されています。

カラーホイールで色を選ぶ

「カラーホイール」タブの色相環をドラッグすると、色相と彩度を同時に選べます。右側のスライダーで明るさを調整できます。

画像から色を抽出する

「画像から抽出」タブに画像をドロップするか、ファイル選択で読み込みます。画像をドラッグして動かし、中央の十字線に合わせたピクセルの色が取得されます。十字ボタンを使えば1pxずつ移動でき、拡大鏡で周辺のピクセルも確認できます。

数値で色を指定する

HEX入力欄にカラーコードを打ち込むか、RGB・HSLの数値を直接入力して色を指定できます。他のツールからコードをコピーして貼り付ければ、同じ色をそのまま再現できます。

パレット

気に入った色はパレットに追加して保存できます（最大32色）。色名メモを付けておくと後から探しやすくなります。色相順や明度順の並び替え、2色の位置の入れ替え、パレットデータのコピー＆ペーストにも対応しているので、作った配色を別のデバイスや他の人と共有するときにも使えます。

入力されたデータや読み込んだ画像はすべて端末内で処理されます。サーバーへの送信は一切ありません。