Color Palette Studio
- 制作区分
- 自主制作・実用
- サービス分類
- 開発ツール・研究開発
- 公開状態
- 公開済み
RGB / HSL / CMYK / HSV の4モードとカラーホイールで色を調整し、配色比較とコントラスト確認ができるカラーパレットツール。
Next.js App Router + TypeScript + React で構築した、Web制作向けの色調整ツール。カラーホイール（円状）、タイル、ピッカーの3種類の選色UIと、RGB/HSL/CMYK/HSV のスライダー切替、変更前後の配色比較、背景色指定つきのコントラスト比表示、HEXコピーに対応。色変換ロジックはUIから分離し、モード追加や検証をしやすい構成にしている。サーバー側の永続化はなく、ブラウザ上で完結する。
同等規模を新規制作する場合の参考価格
300,000円〜
画面設計、色変換、カラーホイール、比較表示、コントラスト計算、コピー機能、レスポンシブ対応を含む想定です。
掲載価格は、本事例と同等の規模・機能を新規制作する場合の目安です。ページ数、機能、素材、外部サービス連携、サーバー環境などによって変動します。
制作目的
Web制作時の配色検討、変更前後の比較、コントラスト確認を素早く行うための補助ツールとして制作。
想定利用者
Web制作者、Webデザイナー、フロントエンド開発者
担当範囲
- 企画・要件整理
- UI設計
- Webデザイン
- フロントエンド実装
- テスト
- サーバー設置・公開
主な機能・特徴
- RGB / HSL / CMYK / HSV のスライダー操作モード切替
- カラーホイール・タイル・ピッカーの3種類の選色UI
- 変更前後の配色比較と背景色つきコントラスト比
- HEX値の直接編集とクリップボードコピー
- 色変換ロジックをUIから分離した構成
技術スタック
制作領域
制作期間
2026年〜
ご相談について
制作内容や規模についてのご相談は、AK²Lab本サイトのお問い合わせ窓口からお送りください。
ご相談・お問い合わせ