カラー名→HEX変換ツール–ライブカラープレビュー付き
色名や対応する色の値をHEXに変換し、どちらかを編集するともう一方がライブで更新されます。変換ツールは名前付き色、#abcのような短い16進数値、rgb(1 2 3 / 50%)のようなRGB構文を受け付けます。スウォッチで色をプレビューし、コピーしてそのまま貼れるCSS行を取得し、色がsRGB色域外の場合は色域外の警告をチェックします。
カラー名→HEXは、色名やその他の対応する色の値を16進数に変換するブラウザベースの変換ツールです。値を入力してHEX結果を確認するか、変換ツールのどちらかを編集してもう一方がライブで更新されるのを確認します。スウォッチで視覚的なプレビューができ、コピーしてそのまま貼れるCSS行をコピーできます。
パーサーは名前付き色、#abcのような短い16進数入力、rgb(1 2 3 / 50%)のようなRGB表記を受け付けます。ページには調整できるオプションもあります。色がsRGB色域外の場合、ツールは色域外の警告を表示し、結果をレビューする際にその状態に気づけます。
色名とRGB値は、16進数表記とは異なる方法で色を表します。相互変換は、値をコードベースに合わせたいとき、色を文書化したいとき、HEXを期待するシステムに渡したいときに便利です。双方向ライブ編集により、どちらかの値を変更して対応する結果を比較でき、スウォッチは見た目のチェックに役立ちます。
変換ツールは完全にブラウザ上で動作します。入力はデバイス上で処理され、サーバーへのアップロード・保存・送信は行われません。ページ読み込み後は変換もオフラインで動作します。無料でご利用いただけるため、サーバー接続に頼らず素早く色をチェックしたい開発者やDevOpsエンジニアに便利です。
手順1: 名前付き色、#abc、rgb(1 2 3 / 50%)などの色の値を入力または貼り付けます。
手順2: カラー名側またはHEX側のどちらかを編集します。変更するともう一方がライブで更新されます。
手順3: スウォッチで色を確認し、ツールが色域外の警告を表示しているかチェックします。
手順4: 16進数の結果、またはコピーしてそのまま貼れるCSS行をコピーしてコードで使います。
用途: 元の色名や表記ではなく16進数を受け付けるシステムに色の値を移すときに。
用途: 受け取ったHEX値が、インターフェースで使う前に元の色と一致することを確認するときに。
用途: ドキュメント、チケット、コミットメッセージ用に色のスニペットを用意するときに、コピーして使えるCSS行付きで。
用途: アプリケーションコードに結果を貼り付ける前に、色の変換を念のためチェックするときに。
用途: ライブエディターでどちらかを調整しながら、名前付き色とその16進数値を比較するときに。
用途: 変換結果を共有・使用する前に、色がsRGB色域外でないかチェックするときに。