How to
カラーピッカー・画像・透明度対応では、2D ピッカーや画像から色を選び、HEX、HEXA、RGB、RGBA、HSL、HSLA を同じ画面で確認できます。透明度を含む CSS コードの確認、デザイン指定の変換、近い色味や最近使った色の再利用までまとめて行えます。色の選択・確認・コピーの流れがひとつの画面で完結するため、ページを行き来せずにデザイン作業を進められます。
Use Cases
Capabilities
Guide
設定、入力、プレビュー、結果、保存など、画面内のエリアごとに操作方法を説明します。
01 HOWTO
左の 2D ピッカーをドラッグして色を選び、色相スライダーで色相を変えます。右側のカラーコードがリアルタイムで更新されます。
まずは 2D ピッカーと色相スライダーで近い色を選ぶと、細かい調整に入りやすくなります。
2D ピッカー内を左右に動かすと、選んでいる色の鮮やかさが変わります。
2D ピッカー内を上下に動かすと、同じ色相のまま明るさを調整できます。
02 HOWTO
透明度スライダーで透明度を調整します。右側で HEX、HEXA、RGB、RGBA、HSL、HSLA がすべて同じ色として同期していることを確認します。
CSS や設定ファイルにそのまま使いたい時は、HEX を基準に確認します。透明度も必要な場合は HEXA を確認します。
透明度を含めて使う場合は、HEXA、RGBA、HSLA が現在の透明度と一致していることを確認します。
デザイン指定書や既存コードに合わせる時は、RGB や HSL の数値を確認しながら同じ色に寄せられます。
03 HOWTO
右側のカラーコードからコピーしたい形式のコピーボタンをクリックします。HEX、HEXA、RGB、RGBA、HSL、HSLA のどれでもコピーできます。
使う先に合わせて HEX、HEXA、RGB、RGBA、HSL、HSLA のいずれかをコピーできます。
通常の CSS 指定や設定値へ貼り付ける場合は、HEX、RGB、HSL のいずれかをコピーします。
透過色として使う場合は、HEXA、RGBA、HSLA のいずれかをコピーします。
04 HOWTO
左下の画像エリアにファイルを追加し、プレビュー上でクリックするとその位置の色が現在の色として反映されます。
画像ファイルを追加すると、プレビュー上でクリックした位置の色を現在の色として反映できます。
画像ファイルを選ぶと、画像から色を取るためのプレビューが表示されます。
プレビュー上の取りたい色をクリックすると、その位置の色が現在の色になります。
05 HOWTO
右のトーンパレットで近い明るさの色を選んで比較できます。最近使った色はブラウザに保存されるため、同じ色を何度も作らずに再利用できます。
今の色を少し明るくしたい、暗くしたい時は、パレットから近い色を選んで比較できます。
直前に使った色はブラウザ内に保存されるため、同じ色を何度も作り直さずに再利用できます。
パレットや履歴から選んだ色は、現在の色、カラーコード、コピー欄へまとめて反映されます。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
HEX、HEXA、RGB、RGBA、HSL、HSLA は同じ色を別形式で見ているだけです。最終的に使う形式を決める前に、現在の色と透明度を固定して確認するとぶれにくくなります。
確認すること
少し明るい色や暗い色を試したい時は、手入力で何度も調整するより、トーンパレットから近い明るさを選ぶ方が早く確認できます。
確認すること
最近使った色はブラウザの保存領域にのみ保存されます。ブラウザのデータを消去すると履歴も消えます。大切な色コードは別途メモしておくことをおすすめします。
FAQ
使う前に判断しやすい質問を先に整理します。
いいえ。色の選択、変換、コピー、履歴保存はブラウザ内で完結します。
最近使った色はブラウザの保存領域にだけ保存します。同じ端末とブラウザで再利用できます。
はい。スポイト機能を使うと画面上の任意の色を取得できます。対応していないブラウザでは使えません。
はい。透明度スライダーで RGBA・HSLA の形式で設定できます。
はい。HEX、RGB、HSL の各フィールドに直接値を入力できます。
「最近使った色」セクションに最大 20 色が表示されます。同じブラウザで再利用できます。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
