‹ www.michinoeki-mania.com

javascriptで簡単にグラデーションを生成できるライブラリのようなものを作ってみました

Oct 25, 2017

はいどうも、よっしーです。
ブログのカスタマイズに限らず、何かをデザインする時にキレイにグラデーションを作りたい時ってあると思います。例えば、この色 から 10段階で グラデーションを作りたいという時、毎回カラーピッカーを開いてなんとなくグラデーションになるように10色選ぶ という作業をしていました。さすがにこれは面倒なので、その辺をうまいことやってくれるライブラリのようなものを作ったので、今回はその紹介です。

20171025100633

作ったもの

開始色 と 段階数 を決めると、均等にグラデーションになるカラーコードのリストを出してくれる。というものです。

Googleで「カラーピッカー」と検索すると、簡易的に使えるカラーピッカーが出てきます。

20171025100552

これを元に説明すると、下にあるシークバーの範囲を指定した段階数で均等に区切って、その区切り位置のカラーコードを返す というものです。

サンプル

実際に動かしてみたほうがわかりやすいと思うので、下に簡易的なフォームを用意しました。
段階数(正の整数)と開始色(16進数表記)を入力して、 生成! ボタンを押してみてください。

生成数:
開始色:

注意点

  • 開始色によっては段階数の上限が低くなる。 上のサンプルで試していただくとわかりますが、開始色によってはキレイにグラデーションを生成できる段階数の上限がことなります。仕様上、輝度は固定で色域(という表現が正しいのかはわかりませんが)のみを変化させるので、輝度が低すぎたり高すぎたりする場合は段階数の上限が低くなります。

  • 開始色が 黒(#000000) や 白(#FFFFFF) の場合はグラデーション生成できない グラデーションを生成するには、開始色にちょっとでも色がついてる必要があります。なので、RGB表記にした場合に3つの値がすべて同じになるようなカラーコード(#4c4c4c、#d6d6d6、#5f5f5fなど)を開始色にした場合、グラデーションは生成できません。

ご自由にお使いください

ソースはGithubに置いています。

Gistには何個かファイルを置いてきましたが、Githubにソースを置くのは初めてです。
CDNで使うこともできますが、可能であればDLしてサーバに置いて使ってください。

何か不具合あればプルリクなげてください。(よくわからないですが勉強しながら対応します)