勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法

  JavaScript

先日PHPでランダムなカラーコードを生成する「RandomColor.php」ライブラリの利用方法をメモしたが、JavaScriptでも同じライブラリがあった。これを試してみたいので以下にソースコードをメモ。

 

RandomColor

GitHub

https://github.com/davidmerfield/randomColor

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/randomcolor@0.6.2/randomColor.min.js"></script>

 

利用方法

ソースコード

<script src="https://cdn.jsdelivr.net/npm/randomcolor@0.6.2/randomColor.min.js"></script>
<script>
//生成するカラーコードの数
const count = 5;

//指定なし
const color = randomColor({
    count: count,
});
console.log(color); //Array(5) [ "#e06555", "#00f985", "#5f00bf", "#79c944", "#9f02dd" ]

//明るい色指定
const light_color = randomColor({
    count: count,
    luminosity: 'light',
});
console.log(light_color); //Array(5) [ "#b07bf2", "#7ff4ec", "#a4f9f2", "#c8ef83", "#7cd1ff" ]

//緑に似た色指定
const green_color = randomColor({
    count: count,
    hue: 'green',
});
console.log(green_color); //Array(5) [ "#57db57", "#069e8e", "#11c675", "#75ffda", "#3dd13a" ]
</script>

 - JavaScript

  関連記事

JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法

JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...

円形のプログレスバーをprogressbar.jsで実装する方法

円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法

だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...

バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...