Color Palette Studio
- サービス分類
- 開発ツール・研究開発
- 公開状態
- 公開済み
どんなものか
RGB・HSL・CMYK・HSVの4方式で色を調整し、変更前後の配色比較とコントラスト確認まで行えるカラーパレットツールです。
なぜ作ったか
Web制作中に行う色の調整、変更前後の比較、背景色とのコントラスト確認を、一つの画面で連続して試せる道具を作ることが発端です。色の表し方が変わっても同じ色として扱える仕組みまで含めて組み立てました。
見どころ
- RGB・HSL・CMYK・HSVのどこから調整しても、ほかの方式の値が同じ色へ連動します。
- 色を作る作業と、変更前後の比較、文字の読みやすさの確認を一画面で行えます。
できること
- スライダーやカラーホイールで色を選べます
- 変更前と変更後の色を並べて比べられます
- 背景色との組み合わせで文字が読みやすいか確認できます
- 色の値をそのままコピーできます
特に工夫したところ
- RGB・HSL・CMYK・HSVのどこから値を変えても同じ色へ同期するよう、色変換の計算を画面部品から分離しました。
- 変更前の色、変更後の色、背景色の三者を並べ、それぞれのコントラスト比とWCAGの判定を同じ画面で確認できるようにしました。
- 数値スライダーだけでなく、円状のカラーホイール、色タイル、ピッカーの3種類からも色を選べます。