カラーピッカー
色を選びながら HEX、RGB、HSL、HSV を確認できます。EyeDropper API が使える環境では画面上の色取得にも対応します。
スマホで開く
色の入力
履歴
プレビューと変換
白背景上での見え方を確認します。
濃色背景上での見え方を確認します。
#EF4444rgb(239, 68, 68)hsl(0, 84%, 60%)hsv(0, 72%, 94%)明暗バリエーション
このツールについて
カラーピッカーツールは、デザイン作業や UI 実装時に色をすばやく確認するためのページです。1 つの色を選ぶと HEX、RGB、HSL、HSV を同時に表示するので、実装向けの値へそのまま転用できます。
スポイト API に対応するブラウザでは、画面上の色を直接拾って取り込めます。履歴もブラウザ内に保持するため、比較したい色を行き来しながら検討できます。
明暗バリエーションを並べて表示するので、ボタンの hover 色やカード背景の派生色を決めるときにも便利です。明るい面と暗い面の両方での視認性を見ながら調整できます。
使い方
- まず「HEX」を入力または選択し、「RGB」や「カラーピッカー」も目的に合わせて調整します。
- 次に「画面から取得」を実行して、「プレビューと変換」を更新します。
- 最後に表示された「プレビューと変換」を確認し、必要であれば「HEXをコピー」で再利用します。
候補を複数比べるときは、基準色を固定して一項目ずつ変えると差が見やすくなります。色の処理はブラウザ内で完結するため、デザイン案の試作にも手早く使えます。
カラーピッカーとは？
色を選びながら HEX、RGB、HSL、HSV を確認できます。EyeDropper API が使える環境では画面上の色取得にも対応します。 カラーピッカーツールは、デザイン作業や UI 実装時に色をすばやく確認するためのページです。1 つの色を選ぶと HEX、RGB、HSL、HSV を同時に表示するので、実装向けの値へそのまま転用できます。 スポイト API に対応するブラウザでは、画面上の色を直接拾って取り込めます。履歴もブラウザ内に保持するため、比較したい色を行き来しながら検討できます。 明暗バリエーションを並べて表示するので、ボタンの hover 色やカード背景の派生色を決めるときにも便利です。明るい面と暗い面の両方での視認性を見ながら調整できます。
よくある質問
Q: このツールは無料ですか？
はい、完全無料で登録不要です。すべての処理はブラウザ内で行われ、データが外部に送信されることはありません。
Q: 「HEX」と「RGB」はどう使い分けますか？
基本は「HEX」から設定し、必要に応じて「RGB」や「カラーピッカー」で細かく調整します。「画面から取得」を実行すると「プレビューと変換」へ反映されるので、条件差を見比べながら調整できます。
Q: 「プレビューと変換」はそのまま再利用できますか？
はい。表示された「プレビューと変換」は「HEXをコピー」で持ち出しやすく、資料作成や別の実装作業へそのままつなげられます。条件を変えて複数パターンを作り、比較しながら使う運用にも向いています。
Q: スマートフォンでも使えますか？
はい、レスポンシブデザインに対応しており、スマートフォン・タブレットでもご利用いただけます。
よくある質問
Q.このツールは無料ですか？
A.はい、完全無料で登録不要です。すべての処理はブラウザ内で行われ、データが外部に送信されることはありません。
Q.「HEX」と「RGB」はどう使い分けますか？
A.基本は「HEX」から設定し、必要に応じて「RGB」や「カラーピッカー」で細かく調整します。「画面から取得」を実行すると「プレビューと変換」へ反映されるので、条件差を見比べながら調整できます。
Q.「プレビューと変換」はそのまま再利用できますか？
A.はい。表示された「プレビューと変換」は「HEXをコピー」で持ち出しやすく、資料作成や別の実装作業へそのままつなげられます。条件を変えて複数パターンを作り、比較しながら使う運用にも向いています。
Q.スマートフォンでも使えますか？
A.はい、レスポンシブデザインに対応しており、スマートフォン・タブレットでもご利用いただけます。