Web上で表現できる色は1600万色あります。ちょっとした違いを認識しながら色を選択するのは困難です。そこで色をピッキングする手法が様々に作られています。一つはサークル型のウィジェットです。 今回紹介するiro.jsはそんなサークル型のカラーピッカーをJavaScriptで提供するライブラリです。

iro.jsの使い方

表示したところです。見慣れたサークル型のカラーピッカーです。

色を変えると右側のHEX/RGB/HSLが変化します。

iro.jsは円形の色選択と、明暗をスライダーで変えられるようになっています。Webアプリケーションなどに組み込んでおくと便利に使える場面が多そうです。他にも様々な色選択を行うUIがありますが、iro.jsもその際の選択肢に加えられるでしょう。依存ライブラリもなく、SVGベースで軽快な動作が可能です。

iro.jsはJavaScript製のオープンソース・ソフトウェア(Mozilla Public License)です。

iro.js demo jaames/iro.js: ? Color wheel widget for JavaScript - with zero dependencies and a lovely SVG-based UI