JavaScript / TypeScript / jQuery

【JavaScript】jscolorを利用して簡単にカラーピッカーを表示

めだま

HEXでもRGBAでも色指定できて尚且つピッカーでも選択できる
カラー選択ライブラリを探してて、良さげなのを見つけたのでメモ

ほしかったもの

欲しかったのはこんな感じ

  • HEX (#FFFFFF) やRGBA (rgb(0,0,255))でテキスト入力指定もできる
  • カラーピッカーから選択入力もできる
  • シンプルに使える

個人的にはColorPicker.Proが一番理想的だったんだけど、利用できなくなってて断念。。
そこで見つけたのが、jscolorというライブラリ

使ってみる

  1. 公式サイトからダウンロード & 中に入ってるjscolor.min.jsを読み込み
    (CDNでも利用可能)
  2. data-jscolorを記載したinputタグを設置

これだけ

<!-- ファイルをダウンロードした場合 -->
<script src="/path/to/js/jscolor.min.js"></script>
<!-- CDNの場合 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.5/jscolor.min.js" integrity="sha512-YxdM5kmpjM5ap4Q437qwxlKzBgJApGNw+zmchVHSNs3LgSoLhQIIUNNrR5SmKIpoQ18mp4y+aDAo9m/zBQ408g==" crossorigin="anonymous"></script>

<input value="#3399FF" data-jscolor="{}">

inputのvalueには下記のような種類の値が指定できる

  • HEX : (例)#3399FF
  • AlphaつきHEX: (例)#3399FF80
  • RGBA: (例) rgba(51,153,255,0.5)

種類をオプションなどで指定する必要はなく、
valueに指定した値を見分けて柔軟にカラーピッカーを表示してくれるし、
なんとAlpha (透過性)も指定できるという優れもの

使ってみる

  • HEX指定の場合
  • AlphaつきHEX指定の場合
  • RGBA指定の場合

また、data-jscolor="{alpha:0.7}"のようにAlphaを別途指定することも可能

イベントの利用

例えばinputの色が変更された時、同じページ内の別要素の色も同期して変更したい場合
onChangeメソッドを使うことでイベント設定ができる

<script src="/path/to/js/jscolor.min.js"></script>

<input
  onChange="update(this.jscolor, '#targetOnChange')"
  value="#3399FF"
  data-jscolor="{}"
/>
<div id="targetOnChange">ここの色も変わるよ</em>

<script>
  function update(picker, selector) {
    document.querySelector(selector).style.background = picker.toBackground()
  }
</script>

  • DEMO
ここの色も変わるよ

その他、input入力をなくしてボタン表示にしたり、
カラーピッカーをカスタマイズしたり諸々オプション指定が可能

詳しくはこちら

\ 案件のご依頼・ご相談はこちらから /