OKLCH→CSS文字列
明度0.7、クロマ0.15、色相180はoklch(0.7000 0.1500 180.00)になり、百分率ならoklch(70.0000% 0.1500 180.00)です。どのトークンやスタイルシートでも同じ書き方と桁数にそろいます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- L
- 0.7
- C
- 0.15
- H
- 180
- 丸めたL
- 0.7
- 丸めたC
- 0.15
- 丸めたH
- 180
- Lの小数桁数
- 4
OKLCHは、現代のCSS Color Module Level 4を支える知覚的な色空間です。デザイナーは明度・クロマ・色相を独立に指定でき、ブラウザは範囲外の値をガマットマップします。デザインシステム、トークンパイプライン、ドキュメント生成では、数値のOKLCH成分をどの環境でも同じように検証できる貼り付け可能なoklch()関数文字列へ、決定論的に変換する手段が必要です。本機能は単位区間の明度、非負のクロマ、度単位の色相、任意のアルファを受け取り、各成分を固定小数桁で丸め、単位明度形とパーセント明度形の両方のCSS関数を出力します。
OKLCHとは何か、CSSのoklch()文字列が重要な理由
OKLCHは色を知覚的に意味のある三軸に分けます。Lはおおよそ一様な尺度で黒から白への明度、Cはクロマ(標本がどれだけ色鮮やかか。ゼロは完全に無彩色)、Hは色相環まわりの度単位の色相角です。
従来のHSLと異なり、OKLCHの明度の等間隔ステップは人の目にはより均一に見えやすく、そのためhexやHSLから移行するデザインシステムはブランドランプをまずOKLCHで保持することが多いです。
CSS Color Module Level 4はoklch()関数でその空間を直接公開するため、スタイルシートはoklch(0.72 0.14 250)や同等のパーセント形oklch(72% 0.14 250)を宣言でき、早期にガマットを切る中間sRGB変換を避けられます。
任意の不透明度は他のCSS色関数と同様、現代のスラッシュ構文oklch(L C H / A)を使います。同じL・C・Hは常に同じ小数・空白・括弧になります。範囲を検証し、固定精度で丸め、単位L形とパーセントL形の両方のCSSを返すので、利用者は書式規則を再実装せずに社内スタイルを選べます。
入力契約、丸め規則、応答の形
ゼロから一の任意のアルファは、出力文字列にスラッシュ不透明度を有効にします。アルファがある場合は常に四桁で印字されます。例:lが0.7、cが0.15、hが180ならoklch(0.7000 0.1500 180.00)とoklch(70.0000% 0.1500 180.00)になります。
アルファ0.5ではスラッシュ形oklch(0.7000 0.1500 180.00 / 0.5000)になります。色相はゼロから三百六十へ巻き戻さないため、意図的な多周回や負角がCSSに残り、CSSは任意の角型を受け入れます。hexやsRGBが必要な場合は別の変換と組み合わせてください。
本機能はCSS向けにOKLCHを検証し直列化するだけです。
OKLCHからCSSへの整形が役立つ場面
デザイントークンのリポジトリとstyle-dictionaryパイプラインは、構造化された色オブジェクトをCSSカスタムプロパティへ変換します。共有フォーマッタはアドホックな文字列テンプレートではなく、同じoklch()文法でモノレポの各パッケージを揃えます。
OKLCHで明暗ランプを生成するアクセシビリティやテーマツールは、不正なCSSを決して作らない最終段を必要とします。検証失敗は残高を消費しません。
活用例
テーマとランプの生成器
明暗モード用のOKLCH段階を計算したあと、各ストップを任意のスラッシュアルファ付きの有効なCSS Color Level 4のoklch()として整形します。
よくある質問
OKLCHをCSSのoklch()文字列にするには?
有限数のlを[0,1]、cを≥0、hを度で送ってください。任意のアルファはスラッシュ不透明度を追加します。
L・C・H・アルファの有効範囲は?
明度は[0, 1]、クロマは非負、色相は任意の有限な度角、アルファ(送る場合)は[0, 1]です。
このツールはOKLCHをhexやRGBに変換しますか?
いいえ。 現代のCSS oklch()文字列への検証と整形のみです。sRGBチャネルやhexが必要なら、別の色変換機能を使ってください。
oklch()の色に透明度を付けるには?
0から1の不透明度を指定すると、スラッシュの後に書き加えられます。明度0.7、クロマ0.15、色相180、不透明度0.5ならoklch(0.7000 0.1500 180.00 / 0.5000)です。
小数の桁数はどう決まりますか?
標準では明度とクロマが小数4桁、色相が2桁にそろえられます。同じ数値からは常に同じ文字列ができるので、生成したCSSの差分が無駄に増えません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/oklch-to-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"l":0.7,"c":0.15,"h":180}'const res = await fetch("https://api.kit.forhosting.com/color/oklch-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"l": 0.7,
"c": 0.15,
"h": 180
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/oklch-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"l": 0.7,
"c": 0.15,
"h": 180
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/oklch-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"l":0.7,"c":0.15,"h":180}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"l":0.7,"c":0.15,"h":180}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/oklch-to-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"l": 0.7,
"c": 0.15,
"h": 180
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.oklch_to_css",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
無効な範囲は黙って無意味な値を返すのではなくinvalid_inputで失敗します。
OKLCHとは何か、CSSのoklch()文字列が重要な理由
トークン、テーマJSON、生成CSSを組み立てるツールは、したがってバイト安定な文字列を出さねばなりません。本エンドポイントはその契約を標準化します。
入力契約、丸め規則、応答の形
必須の有限数l(閉区間ゼロから一の明度)、c(ゼロ以上のクロマ)、h(任意の有限角度の度単位色相)を含むJSON本体をPOSTしてください。任意の整数l_decimals・c_decimals・h_decimals(各ゼロから十)は、既定の四・四・二桁を上書きします。各フィールドはJSON数または数値文字列で届いて構いません。欠落フィールド、非有限値、真偽値、範囲外のLやアルファはフィールド名付きのinvalid_inputで失敗し、負のクロマも同様に拒否されます。これらの検証失敗は課金されません。成功時、本体は生の成分、丸めた成分、使った小数予算、has_alpha、単位明度のoklch()文字列のcss、同じ精度でLをパーセントにしたcss_percent、UI用のmethod・formula・message文字列を返します。
OKLCHからCSSへの整形が役立つ場面
コンポーネントライブラリとStorybookのドキュメントは、数値のL・C・H操作でライブスウォッチを見せつつ、正確なcssフィールドをスニペットへコピーできます。実装は純粋なparseのtier Aのため、成功した呼び出しは毎回公表の基本料金$0.002で、モデルトークンも外向きネットワークも使いません。リクエストを小さく保ち、テストでcssとcss_percentを固定すれば、整形だけのために本格的な色彩科学ライブラリを立てなくても、デザインシステム・エッジワーカー・ドキュメント生成向けの再現可能な現代CSS色リテラルが得られます。
連携の活用例
デザイントークンとCSS変数のパイプライン
OKLCHのブランドランプを、style-dictionary・Theo・自前テーマJSON向けの安定したoklch()カスタムプロパティへ直列化し、CIマシン間の浮動小数点文字列のずれを避けます。
Storybookとコンポーネントドキュメント
ライブデモでL・C・Hの操作を動かし、本番スタイルシートと一致するコードスニペットへ正確なcssフィールドをコピーします。
技術的な質問
丸めはどのように制御しますか?
既定はLとCが四桁、Hが二桁です。任意の整数l_decimals・c_decimals・h_decimals(0–10)で上書きできます。印字トークンは常にその正確な幅を使い、ゴールデンを安定させます。
OKLCHからCSS文字列ツールの料金は?
ブラウザツールは無料です。APIリクエストは成功1回あたり$0.002の前払いKIT残高を使い、無効入力は課金されません。