開発支援

拡張色空間エクスプローラー

HEX、RGB、HSL、HWB、OKLab、OKLCH、Linear sRGB、Display P3 を相互変換し、CSS 出力を確認します。

無料で利用 登録不要 ブラウザ内で実行

ツール操作エリア

HEX
#3B82F6
#3b82f6
RGB
59, 130, 246
rgb(59 130 246)
HSL
217.2deg, 91.2%, 59.8%
hsl(217.2 91.2% 59.8%)
HWB
217.2deg, 23.1%, 3.5%
hwb(217.2 23.1% 3.5%)
OKLab
L=0.6231, a=-0.0332, b=-0.1851
oklab(62.31% -0.0332 -0.1851)
OKLCH
L=0.6231, C=0.1880, H=259.8deg
oklch(62.31% 0.1880 259.8)
Linear sRGB
0.0437, 0.2232, 0.9216
color(srgb-linear 0.0437 0.2232 0.9216)
Display P3
0.3047, 0.5035, 0.9338
color(display-p3 0.3047 0.5035 0.9338)

拡張色空間エクスプローラーとは?

拡張色空間エクスプローラーは、HEX、RGB、HSL、HWB、OKLab、OKLCH、Linear sRGB、Display P3 を相互変換し、CSS 出力を確認します。入力を別形式へ素早く移し替え、別のツールや手順へ受け渡しやすくしたい場面に向いています。最終採用前には、元データと利用先の仕様でも結果を確認してください。

拡張色空間エクスプローラーの使い方

  1. 1元のテキスト、値、データを入力欄へ貼り付けるか読み込みます。
  2. 2変換方法、アルゴリズム、入力形式、出力形式などのオプションを用途に合わせて選びます。
  3. 3変換結果を確認し、必要な出力だけをコピーして次の作業へ渡します。

Common 拡張色空間エクスプローラー use cases

Developer debugging

Use 拡張色空間エクスプローラー to quickly inspect generated output, API payloads, configuration values, or encoded data while building and debugging software.

Review before reuse

Validate or transform oklch, oklab, display-p3, color-space, wide-gamut, lch before adding the result to a project, document, form, message, or shared file.

Privacy-first browser processing

Run common oklch, oklab, display-p3, color-space, wide-gamut, lch tasks locally in the browser without sending sensitive development data to a backend service.

よくある質問

利用先が想定する形式と完全に一致しますか?

変換の下準備を早めるのに向いていますが、利用先ごとの厳密な制約や検証ルールまでは代替しません。貼り付け先でも最終確認してください。

機密データを入れるときの注意点はありますか?

実データを扱う前に、ブラウザの保存設定、組織ポリシー、利用環境のログ取得有無を確認してください。必要なら匿名化したサンプルで手順を確かめると安全です。