OKLCHからHEXへの変換
このOKLCH・HEX変換ツールは、CSS形式のOKLCHカラーを6桁のsRGB十六進カラーへ変換します。円筒座標のOKLCHからOKLab、線形RGBへ進む計算手順を明示し、表示可能なsRGB色域を外れたチャンネルは境界値に収めます。結果は常に再現可能で自動処理にも適しており、RGB値とOKLab値も併記されます。そのため、最終的なHEXコードだけを見るのではなく、どのように変換されたかを正確に確認できます。
無料で実行
有効な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アクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
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)"}'const res = await fetch("https://api.kit.forhosting.com/color/oklch-hex", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "oklch(62.8% 0.258 29.23)"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/oklch-hex",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "oklch(62.8% 0.258 29.23)"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/oklch-hex", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"oklch(62.8% 0.258 29.23)"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"oklch(62.8% 0.258 29.23)"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/oklch-hex", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"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リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |