カラーピッカー

カラーピッカーの使い方

1. 1カラーピッカーで好きな色を選択します
2. 2HEX・RGB・HSLなどの形式で色コードを確認します
3. 3必要なカラーコードをコピーして利用します

カラーピッカーの例文・サンプル

ピッカーで青（#3B82F6）を選ぶ

良いカラーピッカーの判断基準

CSSコーディングや資料作成で「この色のカラーコードが知りたい」ときに、色を選んでHEX・RGB・HSLの値を取得できます。取得した色は、下の基準で「実際の画面で使える色か」を確認してから確定します。

• 用途に合った形式の値を取得したか

  同じ色でも、使う場所によって必要な形式（HEX・RGB・HSL）は変わります。貼り付け先のコードや資料がどの形式を求めているかを確認してからコピーします。

• 実際の画面・資料に当てて確認したか

  色は単体で見たときと、背景や周囲の色に囲まれたときで印象が変わります。ピッカー上で良く見えた色も、必ず実際の画面に当てて確認します。

• 文字と背景のコントラストは十分か

  文字色と背景色の明暗差が小さいと読みにくくなります。アクセシビリティの分野ではコントラスト比の基準が一般的に参照されるので、本文や小さい文字ほど余裕を持った濃淡差にします。

• 別のディスプレイでも見え方を確認したか

  同じカラーコードでも、ディスプレイによって見た目は異なります。微妙な色味が重要な場面では、別のモニタやスマートフォンでも確認します。

• 透過（アルファ）の扱いを意識したか

  HEX 6桁は不透明色、HEX 8桁（最後の2桁がアルファ）は半透明色を表しますが、本ツールの HEX 入力欄は7文字までで8桁は打ち込めません。半透明にしたい場合は、取得した RGB の値から rgba() を自分で組み立てます。

• ダークモードでの見え方を確認したか

  明るい背景前提で選んだ色は、ダークモードで沈んだり浮いたりすることがあります。両モードに対応するサイトでは、両方の背景で確認します。

ありがちな失敗例（NG → 改善）

ブラウザで色を選んで HEX・RGB・HSL を取り出す

デザインや Web 開発の現場で「この色のRGB値・HEX値を知りたい」と思う場面は頻繁にあります。Photoshop や Illustrator のスポイトツールでも色は取れますが、ブラウザで色を確認・変換したいだけの時に開くのは手間です。本ツールは色を選ぶ欄から色を選ぶか、HEX コードを直接打ち込むことで、HEX・RGB・HSL の3つの値を同時表示します。値ごとにコピーボタンが付いているので、必要な形式だけを取り出せます。

入力はこの2つ（色を選ぶ四角い欄と、HEX を直接打つ欄）だけで、会員登録も拡張機能のインストールも要りません。手元にある HEX コードを RGB や HSL に持ち替える用途に絞って作られています。

CSS の色指定や Figma からの持ち替えで使う場面

【1. CSSコーディング中の色指定】画面で確認した色の HEX 値や RGB 値を即座に取得できます。

【2. デザインツールから抽出した色のフォーマット変換】Figma で取得した HEX を CSS の rgba() に変換するなど、用途別フォーマットへの変換に使えます。

【3. ブランドカラー値の確認・記録】「このサイトのこの色は何HEX？」と確認したい時、視覚的に色を選んで値を取得できます。

3つに共通するのは、色を決める作業ではなく、決まった色を別の書き方に持ち替える作業だという点です。配色そのものを考える場面には向きません。

既定色 #3B82F6 を HEX・RGB・HSL で並べた実処理結果

編集部で3パターン入力し、画面に出た値をそのまま記録しました。処理はブラウザの中で完結し、検証中にサイトの AI 処理窓口へ送られた通信は1件もありませんでした。

【条件】画面を開いた直後（既定の色） 【出た値】HEX: #3B82F6 ／ RGB: rgb(59, 130, 246) ／ HSL: hsl(217, 91%, 60%)

3つの形式が同時に並び、それぞれ右のボタンでコピーできます。RGB は rgb(59, 130, 246) のようにカッコと区切りまで含んだ形で出るので、CSS へそのまま貼れます。HSL は角度とパーセントが整数に丸められた形で出ます。小数点以下は表示されません。細かい色差を扱う場面では、この丸めが効いてくることがあります。

3桁の #FFF を打つと rgb(0, 0, 0) になった実処理結果

CSS では白を #FFF と3桁で書けます。同じ書き方を HEX の直接入力欄に打ってみました。

【入力】#FFF 【出た値】HEX: #FFF ／ RGB: rgb(0, 0, 0) ／ HSL: hsl(0, 0%, 0%)

白のつもりで打った値が、黒として表示されました。入力欄は #FFF を受け付けますが、RGB と HSL を計算する部分が6桁の書き方だけを前提にしているため、一致しなかったときの初期値である黒が出ます。エラーも警告も出ません。色見本の四角には打った値がそのまま CSS として使われるため、見本と数値が食い違って見えます（この食い違いは表示の作りから確認したもので、見え方そのものは今回撮っていません）。

回避策は単純で、#FFFFFF のように6桁で打つことです。どこかからコピーしてきた3桁の HEX は、貼る前に6桁へ展開してください。ここは今回の3パターンではっきり再現した挙動で、画面に出る値が常に正しい保証ではないことを示す例でもあります。

#GGGGGG が黙って消える、HEX 直接入力欄のクセ

【入力】#GGGGGG（16進数として成立しない文字） 【出た値】入力欄は直前に入れていた #123456 のまま変わらず、値も HEX: #123456 ／ RGB: rgb(18, 52, 86) ／ HSL: hsl(210, 65%, 20%) のままでした。

打った文字が画面に出ません。エラーメッセージも出ません。16進数として使える文字（0〜9 と A〜F）だけを通す作りで、それ以外は入力そのものが無かったことになります。打っても反応しないときは、まず文字の打ち間違いを疑ってください。

もう1つのクセは、入力欄が7文字までという点です。# と6桁でちょうど7文字なので、透明度を含む8桁の HEX（#RRGGBBAA の形）は打ち切れません。半透明の色を扱いたいときは、RGB の値を取り出してから rgba() の形に自分で書き足すことになります。

弱点は、3桁の HEX が黒になることと、この黙って弾く挙動の2つです。今回の3パターンでは、値が壊れる・画面が固まるといった崩れは出ませんでした。ただし3パターンで見えた範囲であり、どんな入力でも同じ挙動になる保証ではありません。色を選ぶ四角い欄から開くOS標準のカラーピッカーを操作したときの挙動は、今回の検証では確かめていません。

ディスプレイ差・透過・ダークモードで気をつける点と、向かない用途

1つ目の失敗は、ディスプレイのキャリブレーションを意識しないことです。同じHEX値でも、ディスプレイによって見た目が異なります。色精度が重要な場面では、キャリブレーション済みディスプレイで確認してください。

2つ目は、透過色（アルファ）の取り扱いです。HEX 6桁は不透明色、HEX 8桁（最後2桁がアルファ）は半透明色を表しますが、本ツールの HEX 入力欄は7文字までのため8桁は打ち込めません。半透明が必要なときは、前の項目に書いたとおり、取り出した RGB の値から rgba() を組み立ててください。

3つ目は、ダークモード対応です。色がダークモードでも見やすいか、別途確認が必要です。

向かない用途は、印刷物の色指定です。この画面が出すのは画面表示用の3形式だけで、印刷で使う CMYK は出ません。もう1つ、写真やスクリーンショットの中の色を吸い取る用途にも使えません。画面上の好きな場所から色を拾うスポイトの機能は、この画面には無いためです。

拡張機能を入れずに済ませたいときの使い分け

ブラウザ拡張機能の ColorZilla なども便利ですが、インストールが必要です。本ツールは登録不要・拡張機能不要で、ブラウザ内で完結します。HEX・RGB・HSL を一画面で同時確認できる点も利便性が高いです。

使い分けの目安は、色をどこから取るかです。開いているページや画像から色を吸い取りたいなら、スポイト機能を持つ拡張機能やデザインツールが要ります。すでに手元に HEX の値があり、それを RGB や HSL に持ち替えたいだけなら、この画面が最短です。会社の共有端末など、拡張機能を入れられない環境でも同じことができます。

コピーした色を確定する前に見る2点

確定前に人が見るのは2点です。

1つ目は、HEX の桁数です。3桁のままだと RGB と HSL が黒になるので、# の後ろが6桁入っているかを目で数えます。

2つ目は、コピーした形式が貼り付け先に合っているかです。HEX と RGB と HSL は同じ色を別の書き方で表しただけですが、貼り付け先が受け付ける形式は決まっています。

この2点は画面の中だけで確認できます。色そのものの善し悪し（背景との明暗差や、別のディスプレイでの見え方）は画面の外の話なので、実際の画面に当ててから決めてください。