OKLCH→HEX変換ツール: CSSカラー値をオンライン変換
このOKLCH→HEX変換ツールで色の値を16進数に変換できます。どちらか一方を編集するともう一方もライブで更新されます。OKLCHのほか、#abc、rgb(1 2 3 / 50%)、名前付きカラーなどの形式も解析できます。スウォッチで色をプレビューし、コピーして使えるCSSコードをコピーして、色がsRGBの色域外の場合の警告を確認しましょう。
OKLCH→HEX変換ツールは、OKLCHカラー値を16進数に変換し、変換のどちらの側も編集できます。一方の値を変更するともう一方がライブで更新されるため、形式間で値を何度もコピーし直すことなく結果を確認できます。カラースウォッチで視覚的にプレビューでき、貼り付け可能なCSSコードにより結果を作業に取り込みやすくなっています。
パーサーは柔軟です。OKLCHのほか、#abc、rgb(1 2 3 / 50%)、名前付きカラーなどの入力も受け付けます。色がsRGBの色域外の場合、ツールは色域外警告を表示します。利用可能なオプションを調整したら、16進数の結果またはCSSコードをコピーできます。
OKLCHとHEXは色を異なる形式で表します。HEXはCSSでよく使われるコンパクトな記法で、OKLCHは明度、彩度、色相で色を表します。これらの変換は、異なる表現を期待するワークフローやシステムへ色を移す必要がある場合や、受け取った値とその変換結果の関係を確認したい場合に役立ちます。
この変換ツールは完全にブラウザ上で動作します。入力はデバイス上で処理され、サーバーへのアップロード、保存、送信は行われません。登録不要で、ページの読み込み後はオフラインでも変換できます。コード、ドキュメント、日々のコラボレーションのためにカラー値を準備・確認する開発者、デザイナー、DevOpsエンジニアに役立ちます。
手順1: OKLCHカラーを変換ツールに入力または貼り付けます。パーサーは柔軟で、#abc、rgb(1 2 3 / 50%)、名前付きカラーなどの例も受け付けます。
手順2: 16進数の結果とカラースウォッチを確認します。どちらか一方を編集するともう一方もライブで更新されます。
手順3: 必要に応じて利用可能なオプションを調整します。色がsRGBの色域外の場合、変換ツールは色域外警告も表示します。
手順4: HEX値または貼り付け可能なCSSコードを、コード、ドキュメント、メモ用にコピーします。
用途: 16進数カラー値のみを受け付けるシステムへOKLCHデータを移行できます。
用途: 渡された16進数値がOKLCHのオリジナルと一致するか、ライブ変換とスウォッチを比較して確認できます。
用途: ドキュメント、チケット、コミットメッセージ用のOKLCHまたはHEXカラーのスニペットを、コピー可能なCSSコード付きで用意できます。
用途: 結果をコードに貼り付ける前にカラー変換を簡単に検証し、色域外警告を確認できます。
用途: どちらの表現を編集しながらでも変換でき、OKLCH値とHEX値の対応関係を確認できます。
用途: スウォッチとコピー可能なCSSコードが必要なときに、ブラウザですばやくカラー値を確認できます。