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の日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
-
JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法
JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...
-
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
-
jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法
あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...
-
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...