HexをCSS変数に
単独の色を再利用できるCSS変数にします。#3366ffに名前brand-primaryを付けると--brand-primary: #3366ff;になり、省略形は展開され、十六進は小文字にそろいます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- Hex
- #3366ff
- 名前
- brand-primary
- 値
- #3366ff
- Hex6
- 3366ff
- 生の16進数
- #3366ff
- 名前
- --brand-primary
CSSカスタムプロパティ(CSS変数とも呼ばれます)は、一度宣言し、スタイルシート・テーマファイル・デザイントークンのパイプライン全体で var() により参照する再利用可能なトークンです。本ツールは検証済みの hex 色を、選んだ変数名のカスタムプロパティ宣言に包みます。
CSSカスタムプロパティとは何か、hexを包む理由
hex は今もピッカー、ブランドPDF、トークンファイルが輸出する交換形式ですが、生の #3366ff はスタイルシート契約ではありません。名前も -- 接頭辞も末尾のセミコロンもありません。ダッシュ付き識別子の宣言として包むのは小さく正確な変換ですが、パイプラインではなお失敗します。
欠けたハッシュ、混在した大文字、未展開の3桁短縮、数字で始まる名前、癖で貼った Sass の $変数、ident だけがあるべき場所の var() ラッパです。いずれも一見正しそうな CSS になり、解析時やレビューで壊れます。hex から CSS変数への専用ステップは契約を標準化します。
色を検証し、名前を検証し、短縮を展開し、6桁 hex を小文字にし、ident の大文字小文字を保ち、コロンの後に空白1つと末尾セミコロンを出します。結果は :root、テーマクラス、生成 tokens.css へ貼れる定義行で、各リポジトリで文法を再導出する必要はありません。
hexからCSS変数への整形が役立つ場面
デザイントークンのリポジトリと Style Dictionary パイプラインは、構造化されたパレットオブジェクトを CSSカスタムプロパティへ変換します。共有フォーマッタは、ハッシュの大文字、短縮、コロン後の空白で食い違う場当たりテンプレートではなく、同じ宣言文法で各パッケージを揃えます。
コンポーネントライブラリと Storybook の文書は、カラーピッカーと名前欄を出し、正確な declaration を本番スタイルシートと一致するスニペットへコピーできます。明暗の :root ブロックを出すテーマ生成器は、不正なダッシュ付き識別子を作らずセミコロンを落とさない最終段を必要とします。検証失敗は残高を消費しません。
すでに hex トークンと選んだ名前があり定義行だけが必要なときに本機能を選んでください。hex を HSL へは変換せず、rebeccapurple のような名前付き CSS 色は解決せず、8桁アルファ hex は受け付けません。
テストで declaration 文字列を固定し、名前を kebab-case または社内規約に保てば、包む作業のためだけに本格的な色彩科学ライブラリを立てなくても、デザインシステム・エッジワーカー・文書生成向けの再現可能なカスタムプロパティ行が得られます。
活用例
テーマとパレットの生成器
明または暗の hex ランプを計算したあと、各ストップを名前付き CSSカスタムプロパティとして包み、テーマファイルが初回出力から有効な CSS になるようにします。
よくある質問
hex色をCSSカスタムプロパティとして包むには?
hex(3桁または6桁、# は任意)と name(-- の有無は任意)を送ってください。
名前に先頭の -- は必要ですか?
いいえ。 brand-primary も --brand-primary も --brand-primary になります。大文字小文字は保たれます。
どの hex 形式を受け付けますか?
3桁(#RGB)と6桁(#RRGGBB)の16進色で、先頭の # はあってもなくても構いません。短縮は展開されます。 アルファ形式(#RGBA、#RRGGBBAA)と名前付き CSS 色は受け付けません。
定義行はどのような形ですか?
常に --<ident>: #<小文字6桁の hex>; で、コロンの後に空白1つと末尾セミコロンがあります。例:--brand-primary: #3366ff;。
使えない変数名はどんなものですか?
名前は英字かアンダースコアで始め(前にハイフン一つは可)、英字・数字・ハイフン・アンダースコアだけを使います。数字で始まる名前やSassの$変数は、壊れたCSSを出さないよう受け付けません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/hex-to-css-var \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#3366ff","name":"brand-primary"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-to-css-var", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#3366ff",
"name": "brand-primary"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-to-css-var",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#3366ff",
"name": "brand-primary"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-to-css-var", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#3366ff","name":"brand-primary"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#3366ff","name":"brand-primary"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-to-css-var", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"hex": "#3366ff",
"name": "brand-primary"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_to_css_var",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_name_len | 64 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
チームは今もブランド色を Figma、ブランドPDF、JSONパレットに hex として置き、:root やテーマブロックへ貼れる決定論的な一行を必要とします。ソルバーは hex をハッシュ付きの小文字6桁へ正規化し、名前が合法なダッシュ付き識別子であることを確かめ、定義行 --name: #rrggbb; を返します。無効な hex や不正な識別子は、解析できない CSS を出す代わりに invalid_input で失敗します。同じ純粋ロジックが無料のブラウザと API の両方で動くため、生成トークンがローカルプレビュー・継続的インテグレーション・本番スタイルシートの間でずれることはありません。
CSSカスタムプロパティとは何か、hexを包む理由
CSSカスタムプロパティは、名前がハイフン2本で始まる普通のCSS宣言です。:root や任意のセレクタに --brand-primary: #3366ff; と書き、ボタン・リンク・面では color: var(--brand-primary) でトークンを使います。その単一の真実の源により、デザインシステムは Figma の hex、JSONパレット、本番スタイルシートを、ハードコードされたリテラルを何十も探すことなく一致させます。
入力契約、検証規則、定義行
hex は色です。 16進3桁または6桁、先頭ハッシュは任意、英字の大文字小文字は問いません。name はカスタムプロパティの識別子で、先頭の -- はあってもなくても構いません。前後の空白は削られます。成功時、hex は常に小文字の #rrggbb として返り、3桁短縮は展開され(#abc は #aabbcc)、名前は -- 接頭辞付きで返り、英字の大文字小文字は元のままです。必須の文字列2つを含む JSON 本体を送ってください。別名 color、value、text、input、code も同じソルバーが受け付けます。別名は variable、var、var_name、custom_property、ident です。主フィールド declaration が定義行そのものです:--brand-primary: #3366ff;。同じ文字列はトークン表向けに variable と value に分かれ、root_block は :root { --brand-primary: #3366ff; } として一度の貼り付け用の種になります。整数チャネル r・g・b とフラグ shorthand、had_hash、had_prefix が元の形を示します。検証失敗(欠落フィールド、ハッシュ後の空 hex、3でも6でもない長さ、非 hex 文字、プログラミング接頭辞 0x、名前内の空白、Sass の $ 接頭辞、var() ラッパ、英字または下線で始まらない ident、接頭辞込みで64文字を超える名前)はフィールド名付きの invalid_input を返し、課金されません。料金は成功1回あたり定額 $0.002 です。
hexからCSS変数への整形が役立つ場面
実装は純粋な parse の tier A のため、成功した呼び出しは毎回公表の基本料金 $0.002 で、モデルのトークンも外向きネットワークも使いません。
連携の活用例
デザイントークンとスタイルシートのパイプライン
ブランド JSON の hex 項目を、Style Dictionary・Theo・自前の tokens.css 向けの安定した --name: #rrggbb; 行へ変え、マシン間の大文字や短縮のずれを避けます。
Storybookとコンポーネントの文書
著者が hex とトークン名を選び、正確な declaration フィールドを本番の :root ブロックと一致するコードスニペットへコピーできるようにします。
技術的な質問
hexからCSS変数ツールの料金は?
ブラウザツールは無料です。API リクエストは成功1回あたり $0.002 の前払い KIT 残高を使い、無効入力は課金されません。