インタラクティブなピッカーまたはプリセットパレットから色を選び、色の値を入力して、デザインやスタイルシートで使うためのHEX表現を確認できます。
ブラウザ内でローカルに実行ピッカーは平置きの spectrum フィールドです。四角の中をドラッグすると彩度と明度が決まり、縦のスライダーで色相、横のスライダーで不透明度を調整できます。下の入力フィールドに色を直接入力してもかまいません。このフィールドには常に現在の色が入り、不透明なうちは #rrggbb、不透明度が 100% を下回ると rgba(...) の形で表示されます。
四角の隣のパレットには 66 個の固定スウォッチが 3 段に並び、その下の行には自分で作った色が残ります。色を選ぶ処理はページ内で完結し、ドラッグ・入力・クリックの間にリクエストは送られず、色の値がブラウザーの外に出ることもありません。
上 3 段は固定で、6 色のグレー、10 色の鮮やかな色、50 色の淡い色です。これらは変化せず、クリックしても記録されません。プリセットは自分で作った色ではないからです。
その下の行には自分で選んだ色が新しい順に最大 7 つ残ります。入力した色、クリックした色、ドラッグ後に確定した色が加わります。この一覧は voritools.com 上の 1 つのキーとしてこのブラウザーに保存されるため、同じ端末なら再読み込み後も残りますが、同期はされず、別のブラウザーでは空の状態から始まります。
このフィールドがツールの出力です。現在の色が CSS で使える形で入ります。不透明な色は #rrggbb、不透明度が 100% 未満の色は rgba(...) です。6 桁の 16 進数はアルファチャンネルを持てないためです。スウォッチのツールチップとフィールド横の小さなプレビューも同じ値を示します。
16 進数で書かれたアルファ付きの値は CSS Color 4 の定義どおりに解釈します。#12345678 は #123456 でアルファが 0x78/255 を意味し、等価な rgba(...) として表示されます。#abcd は #aabbccdd です。読み取れない値は赤い枠のままになり、ページは色を解析できなかった旨のメッセージを表示します。
扱うのは 1 色ずつ、このページ内だけです。パレットの書き出し、CSS 変数や JSON のダウンロード、コントラストやアクセシビリティの検査、写真やスクリーンショットからの色抽出は行いません。画像の色には専用の姉妹ツールがあります。
コピー用のボタンもありません。フィールドは通常のテキスト入力なので、他の値と同じように内容をコピーします。最近使った色の行はブラウザー内に保存されるため、サイトデータを消すと失われ、プライベートウィンドウでは毎回空の状態から始まります。