ForHosting KIT · 開発者向けツール

OKLCHからHEXへの変換

このOKLCH・HEX変換ツールは、CSS形式のOKLCHカラーを6桁のsRGB十六進カラーへ変換します。円筒座標のOKLCHからOKLab、線形RGBへ進む計算手順を明示し、表示可能なsRGB色域を外れたチャンネルは境界値に収めます。結果は常に再現可能で自動処理にも適しており、RGB値とOKLab値も併記されます。そのため、最終的なHEXコードだけを見るのではなく、どのように変換されたかを正確に確認できます。

● Beta無料・ブラウザ内で実行
ご利用方法 ウェブAPIメールTelegramアプリ 近日

有効なOKLCHカラーを入力します

oklch(62.8% 0.258 29.23)のように、CSSの関数表記で色を指定してください。明度は0%から100%までの割合、または0から1までの単位なし数値で入力できます。彩度はゼロ以上である必要があります。色相に接尾辞がなければ度として扱い、標準的なdeg、grad、rad、turnも使用できます。0から360の範囲外でも、同じ向きの角度へ正規化されるため有効です。本ツールは3つの座標をすべて必要とし、アルファ値、CSSのnone、コンマ区切り、HEX入力、別の色関数は受け付けません。対象を不透明な6桁HEXに限定することで、不正なデータを推測によってもっともらしい色に変えることなく、明確なエラーとして返します。すべての数値は有限でなければならず、InfinityとNaNは計算前に拒否されます。この厳密な検証は、予期しない形式が誤ったブランドカラーとして多数の生成物へ広がり得るビルドツールやデータ処理で特に役立ちます。

変換の計算経路を確認します

OKLCHは、知覚的な明度、彩度、色相で色を表します。最初に色相を正規化し、余弦と正弦を用いて円筒座標をOKLabのa軸とb軸へ展開します。次に、公開されているOKLab変換式を適用して線形sRGBチャンネルを求めます。各チャンネルへ標準のsRGB伝達関数を適用し、赤、緑、青を0から255までの整数に量子化します。各バイトは必ず2文字の十六進数になるため、主結果は常に#RRGGBB形式です。応答には変換後のOKLab座標と整数RGBチャンネルも含まれます。デザインアプリとコード処理の結果が異なる場合、これらの中間値を使って原因を調べられます。浮動小数点の中間値は表示用OKLabオブジェクトだけで丸め、最終RGBバイトの算出まではJavaScriptの数値精度を維持します。ネットワーク、乱数、現在時刻、地域依存の書式、変更可能な状態を使わないため、同じ入力からAPIとブラウザーで同じJSONが得られます。

sRGB色域外の色を扱います

OKLCHでは、一般的なsRGB画面や6桁HEXでは表現できない色も指定できます。計算した線形RGBチャンネルがゼロ未満または1を超えた場合、sRGB伝達関数を適用する前に最も近い境界へ収めます。この処理が発生すると、応答のclampedがtrueになります。クランプは高速で予測可能ですが、知覚的な色域マッピングではありません。非常に鮮やかな入力では繊細な差が失われたり、見かけの色相が変化したり、チャンネルが完全に飽和したりします。ブランドパレット、アクセシビリティ用トークン、隣接色の関係が重要なグラデーションでは、この印を再確認の合図としてお使いください。clampedがfalseなら、符号化前からすべてのチャンネルがsRGB内です。trueで見た目の忠実度が重要な場合は、元のOKLCHの彩度を下げ、色域内に入るまで再変換してください。この明示的な仕様により、不正なチャンネル計算を避けながら、妥協点を隠さず利用可能な6桁結果を保証します。6桁HEXは不透明色なので、アルファ値は保持しません。

デザイントークンを書き出す

知覚的なOKLCHパレットを、6桁sRGBだけを受け付けるシステム向けの安定したHEX値へ変換します。

カラー処理を検証する

デザインツールと開発ツールの結果を比べる際に、RGB、OKLab、色域クランプの印を確認できます。

互換性のあるCSSを生成する

スタイルシート、メール、テンプレート、旧式クライアント向けに、OKLCHの再現可能なHEX代替値を作成します。

変換料金はいくらですか?

このページのブラウザーでは無料で実行でき、APIリクエスト1回あたり$0.002です。

出力のclampedは何を示しますか?

計算した線形sRGBチャンネルの少なくとも1つが表示範囲外で、符号化前にゼロまたは1へ収められたことを示します。

アルファ透明度に対応していますか?

いいえ。出力は不透明な6桁HEXなので、アルファ成分を含むOKLCH入力は拒否されます。

色相にはどの単位を使えますか?

単位を省略すると度になり、deg、grad、rad、turnも指定できます。角度はゼロ以上360度未満へ正規化されます。

別の変換ツールとHEXが違うのはなぜですか?

行列、丸め、色域処理がツールごとに異なる場合があります。本ツールは固定変換、チャンネルクランプ、sRGB曲線、最寄りバイトへの丸めを採用します。

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

POSThttps://api.kit.forhosting.com/color/oklch-hex

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

curl -X POST https://api.kit.forhosting.com/color/oklch-hex \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text":"oklch(62.8% 0.258 29.23)"}'
{
  "text": "oklch(62.8% 0.258 29.23)"
}
{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.oklch_hex",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

HTTPコード意味
401unauthorizedAPIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
402insufficient_balance残高が不足しています。チャージ後に再度お試しください。
404unknown_type指定されたタスクタイプは存在しません。タイプ名を確認してください。
429rate_limitedリクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →