HEX→OKLCH変換ツール: ライブカラー編集をオンラインで
このHEX→OKLCH変換ツールは、どちらか一方を編集するとカラー値がライブで更新されます。HEXカラーを入力するか、短いHEX、RGB、名前付きカラーなどの対応入力を使います。カラースウォッチを表示し、貼り付け可能なCSSコードをコピーして、色がsRGBの色域外の場合の色域外警告を確認しましょう。
HEX→OKLCH変換ツールは、カラー値をCSSやその他の開発作業で使える形式に変換します。HEXカラーを入力するとOKLCH値が表示され、どちらか一方を編集すればもう一方がライブで更新されます。スウォッチで色を確認でき、このツールは貼り付け可能なCSSコードも提供します。
パーサーは、#abcのような短縮形を含む16進数値のほか、rgb(1 2 3 / 50%)のようなRGB入力や名前付きカラーを受け付けます。色がsRGBの色域外の場合、変換ツールは警告を表示します。これらの対応入力により、必要な形式と異なる形式でカラー値が提供された場合に便利です。
HEXは通常16進数のチャンネル値で色を表し、OKLCHは明度、彩度、色相で色を表します。これらの変換は、プロジェクトやワークフローがHEXではなくOKLCHを求める場合に役立ちます。双方向ライブ編集により、どちらかの形式を変更して更新結果を見ることで値を確認することもできます。
この変換ツールは完全にブラウザ上で動作します。入力はデバイス上で処理され、サーバーに送信されません。無料で登録不要、ページの読み込み後はオフラインで動作します。開発者やDevOpsエンジニアは、オンラインサービスに送信することなくカラー値の確認、準備、コピーに使えます。
手順1: #abcのようなHEXカラー、またはRGBや名前付きカラーなどの対応するカラー値を入力します。
手順2: 入力またはOKLCH値のどちらかを編集すると、もう一方がライブで更新されるのを確認できます。
手順3: スウォッチで色を視覚的に確認し、色域外警告を探します。
手順4: 貼り付け可能なCSSコードをコピーし、コードやドキュメントで使います。
用途: デザインシステムやスタイルシートがOKLCH値を期待する場合、HEXカラーをOKLCHに変換できます。
用途: 渡されたHEXカラーとOKLCH値が一致するか、ライブの値とスウォッチを比較して確認できます。
用途: ドキュメント、チケット、コミットメッセージ用のHEXとOKLCHカラーのスニペットを用意できます。
用途: 結果をコードに追加する前にカラー変換を簡単に検証できます。
用途: 変換ツールの色域外警告を確認して、色がsRGBの範囲外かどうかレビューできます。
用途: CSS作業中にどちらかの形式でカラー値を編集し、対応する値がライブで更新されるのを確認できます。