ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザインにおいてカラーリングを決めるのは大変です。さらに二つの色がダイナミックに変化していくグラデーションともなると、中間の色は自動生成になるのでイメージ通りに作るのは大変でしょう。

そこで試して欲しいのがshadeです。1つの基準色を決めて、後はスライダーを使ってグラデーションの生成ができるWebアプリケーションです。

shadeの使い方

サンプル。ベースになるカラーは#3916E9です。
サンプル。ベースになるカラーは#3916E9です。

色温度や明るさ、グラデーションのスピードなどを調整してカラーリングの変化を楽しめます。
色温度や明るさ、グラデーションのスピードなどを調整してカラーリングの変化を楽しめます。

右下に実際に設定するスタイルシート設定が表示されています。
右下に実際に設定するスタイルシート設定が表示されています。

shadeではグラデーション生成に必要なパラメータを変更するだけでダイナミックに変化していきます。その中には思いもしなかったグラデーションが生まれる可能性もあるでしょう。配色に困った時に使ってみると新たな刺激が得られそうなソフトウェアです。

shadeはHTML5/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

shade

jxnblk/shade

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2