Skip to content
ToolsOnDuty - free online tools
ToolsOnDuty / docs
Browse documentation

Reference / Design & CSS

Design & CSS API

5 endpoints for design & css workflows. Every call requires bearer authentication and uses the standard ToolsOnDuty response envelope.

Try it

Runs a real request from your browser to your own ToolsOnDuty account. Your key is only kept in this page and is never stored.

POST/v1/design/color-shades1 credit / call

Color shade / tint generator

Generate a 50-900 shade/tint scale (like Tailwind's palette) from a base hex color.

ParameterTypeRequiredDescription
hexstringYesBase hex color, e.g. #6495ed.

Request

curl -X POST https://toolsonduty.com/api/v1/design/color-shades \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"hex":"#6495ed"}'

Response

{
  "ok": true,
  "data": {
    "shades": [
      {
        "name": "500",
        "hex": "#185BD2"
      }
    ]
  }
}
POST/v1/design/css-specificity1 credit / call

CSS specificity calculator

Compute the (a,b,c) specificity score of a CSS selector.

ParameterTypeRequiredDescription
selectorstringYesA CSS selector, e.g. "#id .class[attr]:hover".

Request

curl -X POST https://toolsonduty.com/api/v1/design/css-specificity \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"selector":"#id .class"}'

Response

{
  "ok": true,
  "data": {
    "a": 1,
    "b": 1,
    "c": 0,
    "score": "1,1,0"
  }
}
POST/v1/design/blob-path1 credit / call

SVG blob path generator

Build a smooth closed SVG path (a "blob" shape) from radius factors (0-1) spaced evenly around a circle.

ParameterTypeRequiredDescription
radiistringYesArray of 3+ radius factors between 0 and 1, e.g. [0.8,1,0.7,0.9,0.6].
sizenumberNoSVG viewport size in pixels. Default: 240.

Request

curl -X POST https://toolsonduty.com/api/v1/design/blob-path \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"radii":[0.8,1,0.7,0.9,0.6]}'

Response

{
  "ok": true,
  "data": {
    "path": "M 120.0 30.0 C ... Z"
  }
}
POST/v1/design/css-clamp1 credit / call

CSS clamp() fluid size calculator

Compute a fluid CSS clamp() expression that scales linearly between a min and max size across a viewport range.

ParameterTypeRequiredDescription
minSizenumberYesMinimum size in px.
maxSizenumberYesMaximum size in px.
minViewportnumberYesMinimum viewport width in px.
maxViewportnumberYesMaximum viewport width in px.
rootFontSizenumberNoRoot font size in px, for rem conversion. Default: 16.

Request

curl -X POST https://toolsonduty.com/api/v1/design/css-clamp \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"minSize":16,"maxSize":32,"minViewport":320,"maxViewport":1280}'

Response

{
  "ok": true,
  "data": {
    "clamp": "clamp(1rem, 0.667rem + 1.667vw, 2rem)"
  }
}
POST/v1/design/bezier-point1 credit / call

Cubic bezier easing sampler

Sample a cubic-bezier(x1,y1,x2,y2) easing curve at t (0-1). Presets: ease, ease-in, ease-out, ease-in-out, linear.

ParameterTypeRequiredDescription
x1numberYesFirst control point x.
y1numberYesFirst control point y.
x2numberYesSecond control point x.
y2numberYesSecond control point y.
tnumberYesPosition along the curve, 0-1.

Request

curl -X POST https://toolsonduty.com/api/v1/design/bezier-point \
  -H "Authorization: ******" \
  -H "Content-Type: application/json" \
  -d '{"x1":0.25,"y1":0.1,"x2":0.25,"y2":1,"t":0.5}'

Response

{
  "ok": true,
  "data": {
    "x": 0.313,
    "y": 0.538
  }
}