使い方
- まず色を 1 つ選ぶか、HEX を貼り付けます。
- RGB や HSL を見て、他のデザインツールへ渡しやすい形に整えます。
- 黒文字・白文字のコントラストを見て、ざっくりした可読性を確認します。
Wave 40 幅拡張
1つの色を複数の表現で確認する
picker、HEX、RGB、HSL を行き来しながら、配色のたたき台を短時間で確認できます。
どのページと使い分けるか
まず色見本を見ながら 1 色を決めたいならこのページです。2色のあいだにある候補色を試したい段階では カラーミキサー、決めた1色が暖色寄りか寒色寄りかを先に見たい段階では 色温度チェック、決めた1色から明るめ・暗め・アクセント候補を広げたい段階では カラーパレット生成、決めた1色を 50/100/200 のような段階付きスケールへ広げたい段階では カラースケール生成、決まった色を別形式で共有したい段階では カラー変換、前景色と背景色の組み合わせを最終確認したい段階では コントラストチェッカー に進みます。
よくある質問
このページでは何ができますか？
色を選び、HEX・RGB・HSL の各表現と、黒文字・白文字とのコントラスト比をすばやく確認できます。
共有URLにパレット全体は入りますか？
入りません。共有URLに入るのは現在の HEX 色だけで、RGB や HSL はブラウザ側で再計算されます。
塗料必要量のページとはどう使い分けますか？
色そのものの確認や値変換、文字色の当たりを見たいときはこのページを使います。缶数やリットル計算が目的なら塗装・塗料のページを使います。
コントラスト比だけで十分ですか？
黒・白文字の当たりを素早く見るには便利ですが、実際の可読性は文字サイズ、太さ、背景の文脈も合わせて確認してください。