Color Palette Studio
Webデザイン / 開発者ツール / Webツール
概要
RGB / HSL / CMYK / カラーホイールを切り替えながら、配色比較とコントラスト確認ができるカラーパレットツール。
詳細
Next.js App Router + TypeScript + React で構築したWebデザイン向けの色調整ツール。カラーホイール、タイルパレット、ピッカー、RGB/HSL/CMYK/Wheelの操作モード、変更前後の配色比較、背景色指定、コントラスト比表示、HEXコピーを備える。色変換ロジックはUIから分離し、拡張しやすい構成にしている。
目的
Web制作時の配色検討、変更前後の比較、コントラスト確認を素早く行うための補助ツールとして制作。
想定利用者
Web制作者、Webデザイナー、フロントエンド開発者
見せたいポイント
- RGB / HSL / CMYK / Wheel の操作モード切り替え
- カラーホイール、タイル、ピッカーの3種類の選色UI
- 変更前と変更後の配色比較
- 背景色を指定したコントラスト比確認
- HEX値の直接編集とクリップボードコピー
- 色変換ロジックをUIから分離した構成
補足
完動済み。未デプロイのため demo_url は仮URL。後で正式URLに差し替え予定。