How to
色を選びながら HEX・RGB・HSL を相互変換できる browser-only ツールです。現在の色の確認・近い明るさの比較・直前に使った色の再利用まで同じ画面で行えます。CSS コードの確認やデザイン指定の変換、近い色味の比較をブラウザだけで完結できます。
Use Cases
Capabilities
Steps
画面を見ながら進められるように、操作の順番と確認ポイントをまとめています。
STEP 1
左側のカラーピッカーで色を選び、必要に応じて HEX、RGB、HSL の各入力欄で同じ色を細かく調整します。
まずはカラーピッカーで近い色を選ぶと、細かい調整に入りやすくなります。
CSS や設定ファイルにそのまま使いたい時は、HEX を基準に確認すると扱いやすいです。
デザイン指定書や既存コードに合わせる時は、RGB や HSL で数値を合わせながら同じ色に寄せられます。
STEP 2
右側の現在色から HEX、RGB、HSL をコピーし、必要に応じてトーンパレットや最近使った色から近い色を再利用します。
使う先に合わせて HEX、RGB、HSL のいずれかをコピーできます。
今の色を少し明るくしたい、暗くしたい時は、パレットから近い色を選んで比較できます。
直前に使った色はブラウザ内に保存されるため、同じ色を何度も作り直さずに再利用できます。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
HEX、RGB、HSL は同じ色を別形式で見ているだけです。最終的に使う形式を決める前に、まず現在の色を 1 つに固定して確認するとぶれにくくなります。
確認すること
少し明るい色や暗い色を試したい時は、手入力で何度も調整するより、トーンパレットから近い明るさを選ぶ方が早く確認できます。
確認すること
最近使った色はブラウザの保存領域にのみ保存されます。ブラウザのデータを消去すると履歴も消えます。大切な色コードは別途メモしておくことをおすすめします。
FAQ
使う前に判断しやすい質問を先に整理します。
いいえ。色の選択、変換、コピー、履歴保存はブラウザ内で完結します。
最近使った色はブラウザの保存領域にだけ保存します。同じ端末とブラウザで再利用できます。
はい。スポイト機能を使うと画面上の任意の色を取得できます。対応していないブラウザでは使えません。
はい。透明度スライダーで RGBA・HSLA の形式で設定できます。
はい。HEX、RGB、HSL の各フィールドに直接値を入力できます。
「最近使った色」セクションに最大 20 色が表示されます。同じブラウザで再利用できます。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
