メインコンテンツへスキップ
Color Codes

モダン CSS カラー

OKLCH 変換ツール - HEX・RGB・HSL を OKLCH に

HEX・RGB・HSL の色を OKLCH に変換し、モダンな CSS カラー構文を HEX、RGB、HSL、HSV の値と一緒にコピーできます。

明度
0.62
彩度 (Chroma)
0.188
色相
260

カラー形式

使い方

おなじみのカラー値を貼り付けると、OKLCH の明度・彩度・色相が分かります。明度の変化を予測しやすくしたいときや、モダンな CSS カラートークンを作りたいときに。

  1. 1 HEX、RGB、HSL のいずれかで色を入力します。
  2. 2 OKLCH の明度・彩度・色相を確認します。
  3. 3 CSS の oklch() 値をコピーするか、従来の形式と比較します。

よくある質問

OKLCH は何を表しますか?

知覚的な明度、彩度(Chroma)、色相を表すため、多くの調整が HSL よりも均一に感じられます。

RGB や HSL を貼り付けられますか?

はい。HEX、RGB/RGBA、HSL/HSLA の入力に対応し、OKLCH に変換します。

すべての HEX を OKLCH に置き換えるべき?

必ずしもそうではありません。HEX はコンパクトで広く理解されています。OKLCH は生成スケールや予測しやすい明度調整に最も役立ちます。

OKLCH で透明度を扱えますか?

CSS の oklch() にはアルファを含められます。入力に透明度がある場合、このツールはアルファを保持します。