OKLab→OKLCH変換ツール: CSSの色値をオンライン変換
OKLab→OKLCH変換ツールは、OKLabカラーを瞬時にOKLCHに変換し、どちらかを編集しても両方の値を同期したまま保ちます。#abc、rgb(1 2 3 / 50%)、名前付きカラーなどの寛容な色入力を受け付けます。スウォッチを表示し、コピーして使えるCSS行をコピーして、色がsRGBの範囲外の場合は色域外警告を確認します。
OKLab→OKLCH変換ツールは、OKLabからOKLCHへ色を変換し、結果を瞬時に表示します。どちらかを編集すると、もう一方の値がライブで更新されます。ツールは#abc、rgb(1 2 3 / 50%)、名前付きカラーなどの寛容な色入力を受け付けるため、OKLab値だけでなく一般的なCSSの色形式も扱えます。
色を入力したら、スウォッチとコピーして使えるCSS行を確認します。変換ツールは、色がsRGBの範囲外の場合に色域外警告も表示します。利用可能なオプションを調整してから、必要な値をコピーします。基本的な変換の利用に、特定のオプション名や設定は必要ありません。
OKLabは明度と2つの色成分で色を表し、OKLCHは明度、彩度、色相を使います。どちらも色を記述しますが、座標系が異なるため、特定のワークフローでは一方の表現がより便利な場合があります。ツール、コードサンプル、引き継ぎでOKLCHが求められる場合にOKLabをOKLCHに変換するか、ライブ編集で2つの値を比較します。スウォッチと色域警告により、結果をコピーする前に便利な視覚的チェックが加わります。
変換は完全にブラウザ上で実行されます。入力はお使いのデバイス上で処理され、サーバーにアップロード・保存・送信されることはありません。ページの読み込み後はオフラインでも動作するため、接続なしで使い続けられます。無料で使えます。
このブラウザベースの色変換ツールは、CSSを用意したり、色の値を確認したり、ワークフロー間でデータを移動したりする開発者やDevOpsエンジニアに便利です。共有や利用の前に色変換を確認したい方にも役立ちます。
手順1: OKLabカラーを入力に貼り付けます。#abc、rgb(1 2 3 / 50%)、名前付きカラーなどの対応する色形式を試すこともできます。
手順2: OKLab値とOKLCH値のどちらかを編集します。もう一方がライブで更新され、2つの表現を比較しやすくなります。
手順3: 必要に応じて利用可能なオプションを調整します。変換ツールはスウォッチも表示するため、色を視覚的に確認できます。
手順4: 結果に色域外警告がないか確認します。これは色がsRGBの範囲外の場合に表示されます。
手順5: OKLCHの値またはコピーして使えるCSS行をコピーして、コード、ドキュメント、メモに使います。
用途: OKLabデータをOKLCHを受け付けるシステムに移します。色を変換し、結果をコピーして次のツールやワークフローで使います。
用途: 渡されたOKLCH値が元のOKLabカラーと一致するか確認します。双方向ライブ編集により、表現の比較が簡単になります。
用途: ドキュメント、チケット、コミットメッセージ用にOKLabカラーのスニペットを用意します。コピーして使えるCSS行により、使える値を共有しやすくなります。
用途: コードに貼り付ける前に色変換の健全性を確認します。先にスウォッチと色域外警告を確認します。
用途: 値を調整しながら色を確認します。どちらかを編集する際、スウォッチが視覚的な目安になります。
用途: 16進数値、RGB値、名前付きカラーで書かれた色をOKLCHに変換します。元の色がOKLab値で書かれていない場合、寛容な入力パースが便利です。