JavaScript input要素に対して使用可能なカラーピッカーUIを作成 - Qiita

input要素で使用可能なカラーピッカーです。 グラデーションはcanvasは使わず、CSSのconic-gradient()とlinear-gradient()のみで表示しています。 設置デモ 各部機能#### 1 彩度/明度ピッカー 2 色相ピッカー 3 リサイズアイコン 4 RGBスライダー 5 履歴パレット ピッカーやスライダーの操作を行うごとに自動更新。クリックすることでカレントカラー(対象要素へのフィードバック色)へ反映されます。 6 グラデーションパレット 左右はグラデーションの開始色、終了色をセットするボタンになっていて、クリックすることでボタンにカレントカラーがセットされます。 中間の3段あるグラデーションは開始色～終了色のグラデーションで、上からカラーコード、色相(右回り)、色相(左回り)で補間しています。グラデーションの任意の場所を選択することでその位置の色がカレント