Color Picker
Color Picker — ブラウザで動作します。入力は保存されません。
カラーピッカー
ネイティブのカラーピッカーで色を選ぶとHEX・RGB・HSLが一緒に表示されます。RGB↔HEXだけならRGB HEX変換を使ってください。
使い方
- 色選択を押してOSネイティブカラーピッカーで色を選びます。初期値は#1a5cffです。
- 下の見本（スウォッチ）とHEX・RGB・HSL欄が一緒に更新されます。
- HEXを直接直してもRGB・HSLが追従します。3桁短縮HEXも6桁に展開します。
- HEXコピーでクリップボードに現在のHEXを入れます。
- リセットは初期の青に戻します。RGB・HSL欄は読み取り専用です。
ポイント
カラーピッカーは視覚的に選んだ色をHEX、RGB、HSLの3表記で同時に示します。HEXはCSSで最もよく、RGBはカンマ区切りの0〜255、HSLは色相角度・彩度・明度です。ピッカーとHEX入力が互いを上書きしないよう内部で更新ロックを使います。ネイティブピッカーUIはOSごとに見た目が違います。見本ボックスは現在のHEXを背景色に塗り、対比をすぐ見られるようにします。HEX欄は最大7文字です。
この画面は選びとHSL確認に焦点を置きます。RGB数字だけ速く変えるならRGB HEX変換を、写真からピクセルを取るなら画像色抽出を使ってください。色値はサーバーに保存されません。RGBとHSLを手で直すフィールドはありません。数字は表示用です。ページを離れると選んだ色は残らないので、使う値はHEXコピーでメモしてください。
例
初期#1a5cffはRGB 26, 92, 255で、HSLは約224°、100%、55%です。ブランドガイドのHEXを欄に貼るとピッカーと見本がその色に変わります。ボタン・リンク色を選んだあとHEXコピーでスタイルシートに貼ればよいです。#fffを入れると#ffffffに展開され、RGBは255, 255, 255です。暗い背景のボタンを選ぶときは明度（HSLのL）が低すぎないか見本で確認します。
よくある質問
カラーピッカーでHEX RGB HSLが一緒に出ますか？
出ます。ピッカーやHEXを変えると3欄が一緒に更新されます。RGBとHSLは直接修正できず表示だけです。3表記を1行にまとめるとデザイントークン文書に貼りやすいです。HSLは彩度調節の感触を見るときに便利です。
HEXコードを直接入力できますか？
できます。#込み7文字まで入力します。#abcのような3桁は#aabbccに展開します。誤った文字は無視されます。誤った長さの文字列はパースに失敗し前の色を維持します。6桁16進だけ確実です。
RGB HEX変換とカラーピッカーは何が違いますか？
変換はRGB/HEXフィールド変換、こちらはネイティブピッカーとHSL・見本です。数字だけ変えるなら変換、目で選ぶならこのツールです。変換はピッカーなしで数字だけ行き来します。こちらの見本・HSLが必要ならこのページを使ってください。
HEXコピーボタンはどこにありますか？
下のHEXコピーです。対応ブラウザーではクリップボードに#rrggbbが入ります。クリップボード権限が塞がれたブラウザーではコピーが静かに失敗することがあります。そのときはHEX欄を直接ドラッグしてください。
HSL値を直接修正できますか？
HSL欄は読み取り専用です。色相・彩度・明度を数字で合わせるならピッカーで調節するかHEXを変えます。色相だけ回したいならピッカー円を動かすとHSL色相角度が追従します。彩度・明度の数字入力はありません。
選んだ色はサーバーに保存されますか？
保存・送信しません。ページを再読み込みすると初期色に戻ります。再読み込みすると#1a5cffに戻ります。複数色を集めるときはコピーしたHEXを別に書いておいてください。
最終確認日: 2026-09-04