カラーコンバーター
HEX、RGB、HSL、OKLCH の相互変換をライブプレビュー付きで
ローカル実行
loading…
このツールについて
一般的な任意の記法で色を入力すると — #hex、rgb()、hsl()、CSS の色名 — すべての形式が一度に得られます。HEX、RGB、HSL、OKLCH が、ライブの色見本の隣に並びます。アルファチャンネルは形式をまたいで保持され、出力はモダンな CSS 構文(スペース区切りのチャンネル)を使うため、現行のスタイルシートにそのまま貼り付けられます。
OKLCH を収録しているのは、それが CSS の色の向かう先だからです。HSL と違い、その明度軸は知覚的に均一なので、同じ L を持つ 2 色は実際に同じ明るさに見え、色相を調整しても知覚上の明るさがうっかり変わることはありません。既存のパレットを OKLCH に変換することは、一貫したカラースケールを構築する第一歩です。
変換の計算は、公開されている sRGB↔OKLab 変換を使ってローカルで実行され、値はラウンドトリップします。HSL 入力から返ってくる RGB は、ブラウザーが計算するものと厳密に一致します。
よくある質問
- なぜ HSL と OKLCH の明度の値は食い違うのですか?
- HSL の明度は RGB 値の幾何学的な性質であって、人間の視覚の性質ではありません — hsl(60 100% 50%) の黄色は、L が同一なのに hsl(240 100% 50%) の青よりはるかに明るく見えます。OKLCH の L 軸は知覚に合致するよう設計されているため、L が等しければ見た目の明るさも等しくなります。この食い違いこそが、OKLCH が存在する理由のすべてです。
- アルファ値は何を意味し、各形式のどこに入りますか?
- アルファは不透明度で、0(透明)から 1(不透明)です。8 桁の hex では最後のバイト(#RRGGBBAA)、モダンな関数構文ではスラッシュの後に続きます。rgb(76 141 255 / 0.5)。このコンバーターはアルファをすべての形式に自動的に引き継ぎます。
- すべての OKLCH の色は sRGB で表示できますか?
- いいえ — OKLCH は広い色域をカバーしており、彩度と明度の組み合わせによっては sRGB に対応するものがありません。(このツールのように)sRGB から変換する場合は常に表現可能な範囲に収まります。逆方向では、色域外の色はクリップまたはマッピングする必要があります。鮮やかな P3 の緑が sRGB の画面ではくすんで見えるのはそのためです。
- なぜカンマではなくスペース区切りの rgb(76 141 255) なのですか?
- CSS Color Module Level 4 がスペース区切りのチャンネルとオプションの /alpha を標準化し、すべてのモダンブラウザーがサポートしています。カンマ形式もまだ動きますが、スペース形式こそが新しい仕様(そしてこのツール)が使うものです。