カラースウォッチピッカー

解説

丸いカラーチップから1色を選ぶカラースウォッチピッカーです。あらかじめ用意した色の配列から JavaScript で丸いボタンを生成し、クリックするとプレビューの四角とカラーコード表示がその色に切り替わります。選択中のチップには is-selected クラスを付けて枠線を出し、今どれを選んでいるかが一目で分かります。標準のカラー入力よりも候補を絞って見せられるため、迷わず素早く選べるのが特長です。

向いている場面

• テーマカラーやアクセント色の設定画面
• 商品のカラーバリエーション選択
• 装飾やラベルの色を選ぶ簡易ツール

表示する色は配列のカラーコードを編集するだけで自由に増減できます。選んだ色を実際に反映するには、プレビュー更新の処理で対象要素のスタイルや CSS 変数を書き換えます。チップは丸以外の形にも変えられます。アクセシビリティ面では、色だけでなくカラーコードも併記しているため、色の判別が難しいユーザーにも値が伝わる設計になっています。チップに名前のラベルを補うとさらに親切です。