HEX→OKLab変換ツール–ライブで色を変換
HEX→OKLab変換ツールは、16進数の色をOKLabに変換し、編集中に両側を同期します。#abc、rgb(1 2 3 / 50%)、色名などの一般的な色入力にも対応しています。スウォッチを確認し、コピーして使えるCSS行をコピーして、色がsRGBの範囲外の場合は色域外(警告)をチェックします。
HEX→OKLab変換ツールは、16進数の色をOKLabの値に変換し、どちらからでも作業できる双方向ライブ編集に対応しています。スウォッチとコピーして使えるCSS行も表示します。パーサーは#abc、rgb(1 2 3 / 50%)、色名などの一般的な色入力に対応しているため、複数の記法で値をチェックする必要がある場合に便利です。
色を入力すると、入力に応じて対応する値が更新されます。HEX側またはOKLab側のどちらかを編集すると反対側が更新されるため、形式間で値をコピーし直さずに色を確認できます。このツールは、色がsRGBの範囲外の場合に警告も表示します。スウォッチと警告を使って結果のレビューに役立ててください。
HEXは16進記法で色を表し、OKLabはCSSで使える別の色表現です。システムやスニペットがOKLabを求める場合、またはOKLabの値を16進数の元と比較したい場合に、両者間の変換が役立ちます。コピーして使えるCSS行により、結果をコードやドキュメントに移しやすくなります。
この無料の変換ツールはブラウザ上で動作します。入力はデバイス上で処理され、データがアップロード、保存、サーバーへの送信されることはなく、登録も不要です。ページの読み込み後は、変換にサーバー依存がないためオフラインで動作します。
このツールは、色の値を確認したり、コードスニペットを準備したり、共有前に変換をレビューしたりする開発者やDevOpsエンジニアに便利です。元の色を見ながらHEXとOKLabを切り替えたい人にも役立ちます。
手順1: 16進数の色、または#abc、rgb(1 2 3 / 50%)、色名などの対応する色の値を入力します。
手順2: 入力に応じて更新されるOKLabの結果を確認します。OKLabの値を編集すると、HEX側がライブで更新されるのを確認できます。
手順3: スウォッチを確認し、色がsRGBの範囲外の場合は色域外(警告)を探します。
手順4: コピーして使えるCSS行をコピーして、コードやドキュメントで使います。
用途: OKLabの値を受け付けるシステムやワークフロー用に、16進数の色を変換します。
用途: どちらか一方を編集してライブ結果を比較し、OKLabの値が16進数の元と一致するかを確認します。
用途: ドキュメント、チケット、コミットメッセージ用に、16進数の色とそのOKLab相当値を準備します。
用途: 結果をコードに貼り付ける前に、色変換が正しいかを確認します。
用途: スタイルシート作業中に、スウォッチとそのCSS表現を確認します。
用途: 変換ツールの色域外(警告)をチェックして、色がsRGBの範囲外かどうかを見つけます。