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>
関連記事
-
-
ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法
他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
-
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法
先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装でき ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法
あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...