JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日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にて「QRCode.js」ライブラリを利用してQRコードを生成する方法
PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...