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

Webデザインなどで色を作るのって意外と難しいですよね。色をちょっと変えるだけで全体のデザインががらっと変わってしまうことは多々あります。しかし色々なカラーリングを試すのはとても大変です。

そこで使ってみたいのがプログラミングの力です。Random Colorはその名の通り、ランダムな色(RGB)を生成してくれるライブラリです。

Random Colorの使い方

例えば完全なランダムで生成した場合、以下のようになります。

ランダムですね。これではあまり使えないかも。
ランダムですね。これではあまり使えないかも。

実際、randomColorを実行するだけではランダムな色を出すだけになります。
実際、randomColorを実行するだけではランダムな色を出すだけになります。

そして、ここにヒントを与えると様相が変わります。例えばredを起点としたランダムカラー生成の場合は次のようになります。

randomColor({hue: 'red', count: 18});
["#ffcccf", "#e85629", "#ffc2c1", "#d34f2e", "#b54012", "#e54252", "#fccdbf", "#ed8e80", "#f79e80", "#910d1e", "#ad3c2d", "#e85e2c", "#e84c8a", "#c65d4f", "#e88d8f", "#c10729", "#c64971", "#c44f25"]

サンプルです。様々な基点となるカラーを決めて、その周辺になる色が並びます。
サンプルです。様々な基点となるカラーを決めて、その周辺になる色が並びます。

ダークカラーと言った指定もできます。
ダークカラーと言った指定もできます。

完全なランダムも良いですが、一定の枠の中でのランダムというのは面白いですね。これを使えばカラーテーマ的なものを色々試して一番印象に残ったものを採用するなんてこともできそうです。

Random ColorはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Random Color

davidmerfield/randomColor

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2