ForHosting KIT · 画像の編集・解析

OKLCH→CSS文字列

明度0.7、クロマ0.15、色相180はoklch(0.7000 0.1500 180.00)になり、百分率ならoklch(70.0000% 0.1500 180.00)です。どのトークンやスタイルシートでも同じ書き方と桁数にそろいます。ブラウザで無料で使えます。

  • 無料
  • ブラウザで動作
  • 登録不要
  • データは端末の外に出ません
ご利用方法 ウェブAPIメールTelegramアプリ 近日
入力した場合
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からも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

POSThttps://api.kit.forhosting.com/color/oklch-to-css

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}'
{
  "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リクエストまでです。

1リクエストあたり$0.002

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

HTTPコード意味
401unauthorizedAPIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
402insufficient_balance残高が不足しています。チャージ後に再度お試しください。
404unknown_type指定されたタスクタイプは存在しません。タイプ名を確認してください。
429rate_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残高を使い、無効入力は課金されません。

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