作った
読み込むたびにランダムに絵画っぽいSVGが出てきます。
コンセプト的な解説
カラーパレットをギャラリー状に閲覧できるサイトは
Color HuntやCoolorsなど数多くありますが、
それらのサイトではパレットの構成色が均等に扱われているな、と気づきました。
（5色なら5色の各色の面積が均等だということです）
実際に色を扱う際には背景色、前景色、アクセントなど用途によって面積を変えたりしているはずです。
そこで出てきたのがモンドリアンです。
抽象画、特に白または黒のキャンバスに三原色を並べるという作風が、今回の件にマッチしているなと思いました。
結果として、なんとなくモンドリアンっぽい絵画をSVGで作って並べることになりました。
技術的解説
SVGの操作にSnap.svgを採用しました。
color-namesというリポジトリから色のデータと名前を取得しました。
基本は HTMLベタ書き で fetch APIを用いてcolor-namesのCDNからカラー一覧をJSONで取得し、ランダムにベースカラー、アソートカラー、アクセントカラーを決めています。
（本当はベースカラーに応じたアソートカラー、アクセントカラーにしたかったです）
その後 document.createElementNS() でSVG要素を作っています。
HTMLに含まれる要素以外は createElementNS() を使う必要があるようです。
あとはそのSVG要素にSnap.svgを適用し、正方形を3つかぶせています。
超シンプルなリポジトリがあるのでそちらもご覧ください。
終わりに
本当はカラー同士の関係性（補色とか）も考慮したパレットにしたかったのと、正方形の配置もランダムにしたかったのですが、
時間切れです。
でも全くのランダムのわりには調和して見えるのでモンドリアンのコンセプトがすごいんだと思います。