使い方
- 今ある形式を 1 つだけ入れます。HEX、RGB、HSL、代表色名のどれでも構いません。
- 他の形式へ正規化した結果を確認します。
- 次に使うツールやデザイン仕様に合わせて必要な形式だけをコピーします。グラデーション用なら グラデーション生成 に渡せます。
Wave 42 幅拡張
1つの色を実務で使いやすい形式へそろえる
色を視覚的に探すページではなく、すでに決まった色を整理して持ち運ぶための変換ページです。
どのページと使い分けるか
カラーピッカー は1色を決める前段です。2色の候補から中間色を試したいときは カラーミキサー を先に使います。決めた1色が暖色寄りか寒色寄りかを先に見たいときは 色温度チェック を使います。決めた1色の周辺候補を広げたいときは カラーパレット生成 を使います。1色を 50/100/200 のような段階付きスケールへ広げたいときは カラースケール生成 を使います。2〜3色の stop が決まって背景用の CSS を作りたいときは グラデーション生成 を使います。2色候補の差がどれくらいあるかを数値で見たいときは 色差チェック を使います。このページは、決まった1色を HEX・RGB・HSL・代表色名へ写し替える中間工程に向いています。知覚ベースの OKLCH / OKLab 値も確認したいときは、その次に OKLCH 変換 へ進みます。前景色と背景色の読みやすさを最終確認したいときは コントラストチェッカー へ進みます。
よくある質問
このページでは何ができますか？
1つの色を HEX・RGB・HSL・代表色名で見比べられます。代表色名は一致するものがある場合だけ表示します。
すべての CSS 色名に対応していますか？
black、white、navy、teal、orange、purple、rebeccapurple など、よく使う代表色名を中心に対応しています。一致しない場合は数値表現だけを表示します。
カラーピッカーとはどう使い分けますか？
色を視覚的に選びたいときはカラーピッカー、既にある色を別形式へ変換したいときはこのページを使います。
共有URLには何が入りますか？
HEX の値だけが入ります。RGB、HSL、色名はブラウザ内で再計算されます。