UI Colorful
UI Colorfulはshadcn/uiやTailwindのテーマのカラーをプレビューを見ながら作成出来るWebアプリです。プロジェクトページでアプリの詳細が紹介されていますが、そのページがそのままプレビュー用のデモサイトとなっており、表示確認をしながらテーマを作成出来ます。
使い方も直感的に把握できるシンプルになっており、左に表示されているメニューバーからパレットを選択すると、CSS変数が表示されるので該当する箇所に合わせてカラー設定をしていくだけで作成出来ます。また、どの箇所がどの変数か分からない場合は要素にマウスを乗せればCSS変数が表示されるようになっています。
更に、任意のSSや画像などからカラーを抽出し、テーマを作成する事も出来るみたいです。このカラー抽出機能は結構な精度で、例えば任意のWebサイトのSSを選んだらかなり忠実にカラーを再現してくれました。
上記SSでは、右下に参考にしたサムネイル画像が表示されていると思いますが、概ね同様のテーマカラーを瞬時に作成してくれました。Webアプリ下部にGPTやGeminiを使っていると明示されていたので生成AIがこの機能に使用されているのかもしれません。
作成したパレットは左メニューの保存ボタンを押せばCSS変数がセットで表示されるのでコピペする、と言う流れになります。
ユニークなURLも発行されるので他者との共有も出来るみたいです。なかなか便利ではないでしょうか。利用にあたりユーザー登録なども不要で誰でも無料で利用可能となっています。
