CSS Design Token Generator

curl --request POST \
  --url https://api.iotools.cloud/v1/tool/css-design-token-generator \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: application/json' \
  --data '
{
  "brandColor": "#464aff",
  "tokenName": "brand",
  "colorFormat": "oklch",
  "includeDarkMode": "true",
  "darkSelector": ".dark",
  "chromaBoost": "100"
}
'

{
  "tool": "css-design-token-generator",
  "tool_version": "1.0.1",
  "outputs": {
    "cssTokens": "/* Brand palette: 50-950 raw scale */\n:root {\n  --color-brand-50: oklch(98.50% 0.007 272.51);\n  --color-brand-100: oklch(96.70% 0.016 272.51);\n  --color-brand-200: oklch(92.20% 0.037 272.51);\n  --color-brand-300: oklch(85.50% 0.071 272.51);\n  --color-brand-400: oklch(72.70% 0.141 272.51);\n  --color-brand-500: oklch(60.00% 0.218 272.51);\n  --color-brand-600: oklch(51.20% 0.259 272.51);\n  --color-brand-700: oklch(43.00% 0.238 272.51);\n  --color-brand-800: oklch(35.00% 0.202 272.51);\n  --color-brand-900: oklch(27.00% 0.155 272.51);\n  --color-brand-950: oklch(18.00% 0.109 272.51);\n\n  /* Semantic tokens (light) */\n  --color-primary: var(--color-brand-600);\n  --color-primary-hover: var(--color-brand-700);\n  --color-primary-active: var(--color-brand-800);\n  --color-primary-muted: var(--color-brand-100);\n  --color-on-primary: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-muted: var(--color-brand-50);\n  --color-surface-raised: #ffffff;\n  --color-on-surface: var(--color-brand-950);\n  --color-on-surface-muted: var(--color-brand-700);\n  --color-border: var(--color-brand-200);\n  --color-border-strong: var(--color-brand-300);\n  --color-ring: var(--color-brand-400);\n  --color-accent: var(--color-brand-500);\n}\n\n/* Semantic tokens (dark) */\n.dark {\n  --color-primary: var(--color-brand-400);\n  --color-primary-hover: var(--color-brand-300);\n  --color-primary-active: var(--color-brand-200);\n  --color-primary-muted: var(--color-brand-900);\n  --color-on-primary: #0b0b0f;\n  --color-surface: var(--color-brand-950);\n  --color-surface-muted: var(--color-brand-900);\n  --color-surface-raised: var(--color-brand-900);\n  --color-on-surface: #f8fafc;\n  --color-on-surface-muted: var(--color-brand-400);\n  --color-border: var(--color-brand-800);\n  --color-border-strong: var(--color-brand-700);\n  --color-ring: var(--color-brand-500);\n  --color-accent: var(--color-brand-400);\n}"
  },
  "credits_used": 3,
  "credits_remaining": null
}

POST

tool

css-design-token-generator

curl --request POST \
  --url https://api.iotools.cloud/v1/tool/css-design-token-generator \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: application/json' \
  --data '
{
  "brandColor": "#464aff",
  "tokenName": "brand",
  "colorFormat": "oklch",
  "includeDarkMode": "true",
  "darkSelector": ".dark",
  "chromaBoost": "100"
}
'

{
  "tool": "css-design-token-generator",
  "tool_version": "1.0.1",
  "outputs": {
    "cssTokens": "/* Brand palette: 50-950 raw scale */\n:root {\n  --color-brand-50: oklch(98.50% 0.007 272.51);\n  --color-brand-100: oklch(96.70% 0.016 272.51);\n  --color-brand-200: oklch(92.20% 0.037 272.51);\n  --color-brand-300: oklch(85.50% 0.071 272.51);\n  --color-brand-400: oklch(72.70% 0.141 272.51);\n  --color-brand-500: oklch(60.00% 0.218 272.51);\n  --color-brand-600: oklch(51.20% 0.259 272.51);\n  --color-brand-700: oklch(43.00% 0.238 272.51);\n  --color-brand-800: oklch(35.00% 0.202 272.51);\n  --color-brand-900: oklch(27.00% 0.155 272.51);\n  --color-brand-950: oklch(18.00% 0.109 272.51);\n\n  /* Semantic tokens (light) */\n  --color-primary: var(--color-brand-600);\n  --color-primary-hover: var(--color-brand-700);\n  --color-primary-active: var(--color-brand-800);\n  --color-primary-muted: var(--color-brand-100);\n  --color-on-primary: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-muted: var(--color-brand-50);\n  --color-surface-raised: #ffffff;\n  --color-on-surface: var(--color-brand-950);\n  --color-on-surface-muted: var(--color-brand-700);\n  --color-border: var(--color-brand-200);\n  --color-border-strong: var(--color-brand-300);\n  --color-ring: var(--color-brand-400);\n  --color-accent: var(--color-brand-500);\n}\n\n/* Semantic tokens (dark) */\n.dark {\n  --color-primary: var(--color-brand-400);\n  --color-primary-hover: var(--color-brand-300);\n  --color-primary-active: var(--color-brand-200);\n  --color-primary-muted: var(--color-brand-900);\n  --color-on-primary: #0b0b0f;\n  --color-surface: var(--color-brand-950);\n  --color-surface-muted: var(--color-brand-900);\n  --color-surface-raised: var(--color-brand-900);\n  --color-on-surface: #f8fafc;\n  --color-on-surface-muted: var(--color-brand-400);\n  --color-border: var(--color-brand-800);\n  --color-border-strong: var(--color-brand-700);\n  --color-ring: var(--color-brand-500);\n  --color-accent: var(--color-brand-400);\n}"
  },
  "credits_used": 3,
  "credits_remaining": null
}

Authorizations

Authorization

string

header

required

Bearer authentication header of the form Bearer <token>, where <token> is your auth token.

Body

application/json

brandColor

string

Brand Color

tokenName

string

Token Name

colorFormat

enum<string>

Format

Available options:

oklch,

hex

includeDarkMode

boolean

Include dark mode variant

darkSelector

enum<string>

Dark selector

Available options:

.dark,

[data-theme="dark"],

media

chromaBoost

number

Chroma

Required range: 0 <= x <= 150

Response

Tool output

outputs

object

required

Show child attributes

tool

string

required

The tool's slug, echoing the {slug} in the request path.

tool_version

string

required

Output-contract version for this tool.

credits_used

integer

required

Credits this call consumed, after any settlement refund. 0 when metering is disabled.

credits_remaining

integer | null

required

Credits left in the current monthly allowance, or null when metering is disabled.

request_id

string

Correlation id, also sent as x-request-id.

Overview

Catalog

Account

Tools

CSS Design Token Generator

Authorizations

Body

Response