OKLCH→OKLab変換ツール – ライブ色変換ツール
OKLCHをオンラインでOKLabに変換し、どちらかの色値を編集すると結果が即座に更新されます。この変換ツールは#abc、rgb(1 2 3 / 50%)、色名などの入力に対応しています。また、カラースウォッチ、コピーして使えるCSSの1行、色がsRGBの色域外にある場合の警告も表示します。
OKLCH→OKLab変換ツールは、OKLCHの色をOKLabの表記に変換し、作業に合わせて結果を更新します。どちらかの側を編集でき、カラースウォッチを表示して、コピーして使えるCSSの1行をコピーできます。OKLCHをオンラインでOKLabに変換する必要がある場合、#abc、rgb(1 2 3 / 50%)、色名などの馴染みのある色の入力も受け付けます。
OKLCHは明度・彩度・色相で色を表し、OKLabは明度と2つの反対色軸で色を表します。この変換ツールは双方向ライブ編集でこれらの表記間を移動できます。色がsRGBの色域外にある場合は警告も表示します。ツール内の利用可能なオプションは必要に応じて調整できます。
開発者は、明度・彩度・色相のモデルで作業するときにOKLCHを選び、システムやワークフローがその表記を求めるときにOKLabが必要になります。スウォッチとCSS出力は変換した色の確認と再利用に役立ち、ライブ更新のおかげで形式間で値をコピーし直すことなく比較できます。
この変換ツールは完全にブラウザ上で動作します。入力はお使いのデバイス上で処理され、アップロード・保存・サーバーへの送信はされません。ページを読み込めばオフラインでも動作するため、接続なしで変換を続けられます。無料で使えます。
このOKLab色変換ツールは、コード・ドキュメント・チケット・コミット用の色を準備する開発者やDevOpsエンジニア、別のツールに渡す前に色の値を確認したい人に役立ちます。My-DevToolsには、コンテンツをOKLCHに戻すための逆変換ページも別途あります。
手順1: OKLCHの色を入力欄に入力または貼り付けます。#abc、rgb(1 2 3 / 50%)、色名などの例をパーサーが受け付けます。
手順2: 表示されたOKLabの結果を確認します。どちらかの色値を編集すると、もう一方もリアルタイムに更新されます。
手順3: 必要に応じてツール内の利用可能なオプションを調整します。入力側では特定のオプション名は指定されていません。
手順4: スウォッチと色域外警告を確認します。警告はsRGBの色域外にある色を識別します。
手順5: OKLabの値またはコピーして使えるCSSの1行をコピーして、コード・ドキュメント・メモで使用します。
用途: OKLCHの色を、OKLabを受け付けるシステムやワークフローに移します。対応する値をコピーして使えます。
用途: 受け取ったOKLabの値が元のOKLCHと一致するか確認します。どちらかの側を編集するともう一方も更新されるため、素早く比較できます。
用途: ドキュメント・チケット・コミットメッセージ用にOKLCHやOKLabの色スニペットを準備します。コピーして使えるCSSの1行があれば、結果を含めやすくなります。
用途: コードで結果を使う前に、色の変換が正しいか簡単にチェックします。値とスウォッチを一緒に確認できます。
用途: sRGBの色域外にある色を、別のツールやワークフローに渡す前に見つけます。変換ツールは色域外警告を表示します。
用途: 色を調整しながらOKLCHとOKLabの関係を調べます。双方向ライブ編集により、対応する値の変化が見えます。