Hex to CSS variable
Turn a raw color into a reusable CSS variable: #3366ff with the name brand-primary becomes --brand-primary: #3366ff;, with shorthand expanded and the hex lowercased. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hex
- #3366ff
- Name
- brand-primary
- Value
- #3366ff
- Hex6
- 3366ff
- Hex raw
- #3366ff
- Name
- --brand-primary
A CSS custom property — also called a CSS variable — is a reusable token you declare once and reference with var() throughout a stylesheet, theme file, or design-token pipeline.
What a CSS custom property is and why wrap a hex color
CSS custom properties are ordinary CSS declarations whose names start with two dashes. Hex remains the interchange format most pickers, brand PDFs, and token files still export, but a raw #3366ff is not a stylesheet contract: it has no name, no -- prefix, and no trailing semicolon.
Wrapping it as a dashed-ident declaration is a small, exact transform that still goes wrong in pipelines — missing hashes, mixed case, three-digit shorthand left unexpanded, names that start with a digit, Sass $variables pasted by habit, or a var() wrapper where only the ident belongs. Each of those mistakes produces CSS that looks almost right and then fails at parse time or in a code review.
A dedicated hex-to-CSS-variable step standardizes the contract: validate the color, validate the name, expand shorthand, lowercase the six-digit hex, preserve the ident's case, and emit one space after the colon plus a trailing semicolon. The result is a paste-ready definition line you can drop into :root, a theme class, or a generated tokens.css without re-deriving the grammar in every repository.
Where a hex-to-CSS-variable formatter earns its keep
Design-token repositories and Style Dictionary pipelines convert structured palette objects into CSS custom properties; a shared formatter keeps every package on the same declaration grammar instead of ad-hoc template strings that disagree about hash case, shorthand, or the space after the colon. Component libraries and Storybook docs can expose a color picker plus a name field and copy the exact declaration into snippets that match what production stylesheets will ship.
Theme generators that emit light and dark :root blocks need a final step that never invents an illegal dashed ident or drops the semicolon. Prefer this capability when you already have a hex token and a chosen name and only need the definition line; it does not convert hex to HSL, does not resolve named CSS colors such as rebeccapurple, and does not accept eight-digit alpha hex.
Pin the declaration string in tests, keep names in kebab-case or the house convention, and you get reproducible custom-property lines for design systems, edge workers, and documentation generators without standing up a full color-science library for a wrapping job.
What you can do with it
Storybook and component documentation
Let authors pick a hex and a token name, then copy the exact declaration field into code snippets that match the production :root block.
Theme and palette generators
After computing a light or dark hex ramp, wrap each stop as a named CSS custom property so the theme file is valid CSS on the first emit.
FAQ
How do I wrap a hex color as a CSS custom property?
Send hex (3 or 6 digits, optional #) and name (with or without --).
Does the name need a leading --?
No. brand-primary and --brand-primary both become --brand-primary. Case is preserved.
Which hex formats are accepted?
Three-digit (#RGB) and six-digit (#RRGGBB) hexadecimal colors, with or without a leading #. Shorthand is expanded. Alpha forms (#RGBA, #RRGGBBAA) and named CSS colors are not accepted.
What does the definition line look like?
Always --<ident>: #<six lowercase hex digits>; with one space after the colon and a trailing semicolon. Example: --brand-primary: #3366ff;.
Which variable names are rejected?
Names must start with a letter or an underscore, optionally after one hyphen, and use only letters, digits, hyphens and underscores. A name that starts with a digit or a Sass-style $variable is turned down instead of producing broken CSS.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
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)Example request
{
"hex": "#3366ff",
"name": "brand-primary"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_to_css_var",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_name_len | 64 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Teams still store brand colors as hex codes in Figma, brand PDFs, and JSON palettes, then need a single deterministic line they can paste into :root or a theme block. This tool wraps a validated hex color in a named custom-property declaration: you choose the variable name, the solver normalizes the hex to six lowercase digits with a hash, ensures the name is a legal dashed ident, and returns the definition line --name: #rrggbb;. Invalid hex codes and illegal identifiers fail with invalid_input instead of emitting CSS that would not parse. The same pure logic runs free in the browser and on the API, so generated tokens never drift between local previews, continuous integration, and production stylesheets.
What a CSS custom property is and why wrap a hex color
You write --brand-primary: #3366ff; on :root or any selector, then consume the token with color: var(--brand-primary) on buttons, links, and surfaces. That single source of truth is how design systems keep a hex from Figma, a JSON palette, and a production stylesheet in agreement without hunting through dozens of hard-coded literals.
Input contract, validation rules, and the definition line
Surrounding whitespace is trimmed. On success the hex is always returned as lowercase #rrggbb, three-digit shorthand is expanded (#abc becomes #aabbcc), and the name is returned with a -- prefix while its letters keep their original case. The primary field declaration is the definition line itself: --brand-primary: #3366ff;. Send a JSON body with two required strings. hex is the color: three or six hexadecimal digits, optional leading hash, letters upper or lower case. Aliases color, value, text, input, and code are accepted by the same solver. name is the custom-property ident, with or without a leading -- ; aliases include variable, var, var_name, custom_property, and ident. The same string is split into variable and value for token tables, and root_block wraps the line as :root { --brand-primary: #3366ff; } for a one-paste stylesheet seed. Integer channels r, g, and b, plus flags shorthand, had_hash, and had_prefix, describe the original form. Failed validation — missing field, empty hex after a hash, length other than three or six, non-hex characters, a 0x programming prefix, spaces inside the name, a Sass $ prefix, a var() wrapper, an ident that does not start with a letter or underscore, or a name longer than sixty-four characters including the prefix — returns invalid_input naming the field and is never charged. Pricing is a flat $0.002 per successful request.
Integration use cases
Design-token and stylesheet pipelines
Turn hex entries from a brand JSON file into stable --name: #rrggbb; lines for Style Dictionary, Theo, or a hand-rolled tokens.css without case or shorthand drift across machines.
Technical questions
What does the hex to CSS variable tool cost?
The browser tool is free. API requests use prepaid KIT balance at $0.002 per successful call; invalid input is not billed.