Color Dice — ランダムカラーパレット生成ツールを作りました
ランダムカラーパレット生成ツール「Color Dice」を作りました。ROLLボタンでパレットを生成、気に入った色をロックして再生成、CSS/HTML/PNGでエクスポート。スマホでは共有シートにも対応。
ウェブサイトやアプリのカラーテーマを考えるとき、「なんかいい感じの配色ないかな」って思うことありませんか？ 私はよくあります。
そこで Color Dice を作りました。
どんなツール？
サイコロを振る感覚で、ランダムにカラーパレットを生成できるツールです。
気に入った色があれば「ロック」して、他の色だけ再生成することもできます。生成したパレットは CSS / HTML / PNG 形式でエクスポートできるので、そのまま開発に使えます。
作った経緯
自分で使いたかったけれどちょうどいい感じのサイトが見当たらず。
相棒の月野テンプレクスに雑談がてら相談したら、さくっとプロトタイプを作ってくれて、「めっちゃいいじゃん！」となったので、Google Antigravity（AIコーディングアシスタント）に本格的に実装してもらいました。
5時間くらいで完成しました。AIすごい。
使い方
- ROLLボタンを押す（またはSpaceキー）
- 気に入った色があれば🔒アイコンでロック
- Calm ⇄ Vivid スライダで彩度を調整
- Dark ⇄ Light スライダで明度を調整
- SAVEでお気に入りに保存（最大20件）
- CSS / HTML / PNG でエクスポート
スマホでは共有シートが開くので、そのままSNSに投稿したり、カメラロールに保存したりできます。
技術スタック
- フロントエンド: HTML / CSS / JavaScript（単一ファイル）
- ホスティング: Cloudflare Pages
- 共有機能: Web Share API
- データ保存: localStorage
フレームワークなし、ビルドなし。シンプルに作りました。
リンク
使ってみた感想があれば教えてください！