Palette

Core palette generation — compute palettes, color systems, harmonies, dominant colors, and export to various code formats.

Generate a color palette

post

Generate a complete color palette from base and theme configurations. Returns the full PaletteData object produced by the palette engine.

Body

application/json

includeLibraryDatabooleanOptional

Include internal library metadata in the response.

Default: false

compactbooleanOptional

Return a compact (lighter) representation of the palette.

Default: false

Responses

200

Palette data

application/json

objectOptional

Full PaletteData object. Shape depends on the palette engine version and compact flag.

400

Invalid input

application/json

500

Internal error

application/json

post

/get-palette

HTTPcURLJavaScriptPython

POST /v1/get-palette HTTP/1.1
Host: api-uicp.yelbolt.workers.dev
Content-Type: application/json
Accept: */*
Content-Length: 369

{
  "base": {
    "preset": {
      "id": "aBcDeFgHiJk",
      "name": "Material",
      "stops": [
        50,
        100,
        200,
        300,
        400,
        500,
        600,
        700,
        800,
        900
      ],
      "min": 5,
      "max": 95,
      "easing": "EASEIN_CUBIC"
    },
    "colors": [
      {
        "name": "Blue",
        "rgb": {
          "r": 0.231,
          "g": 0.51,
          "b": 0.965
        },
        "hue": {
          "shift": 0,
          "isLocked": false
        },
        "chroma": {
          "shift": 0,
          "isLocked": false
        },
        "alpha": {
          "isEnabled": false,
          "backgroundColor": "#ffffff"
        }
      }
    ]
  },
  "themes": [
    {
      "name": "Light"
    }
  ]
}

{}

Build a semantic color system

post

Resolves taxonomy bindings against a generated palette to produce a semantic SystemData object. Requires @a_ng_d/utils-ui-color-palette >= 1.10.0 on the worker.

Body

application/json

Responses

200

System data

application/json

objectOptional

SystemData object produced by the palette engine.

400

Missing or invalid system configuration

application/json

500

Internal error

application/json

501

System class unavailable (worker dependency too old)

application/json

post

/get-color-system

HTTPcURLJavaScriptPython

POST /v1/get-color-system HTTP/1.1
Host: api-uicp.yelbolt.workers.dev
Content-Type: application/json
Accept: */*
Content-Length: 840

{
  "base": {
    "preset": {
      "id": "aBcDeFgHiJk",
      "name": "Material",
      "stops": [
        50,
        100,
        200,
        300,
        400,
        500,
        600,
        700,
        800,
        900
      ],
      "min": 5,
      "max": 95,
      "easing": "EASEIN_CUBIC"
    },
    "colors": [
      {
        "id": "xYzAbCdEfGh",
        "name": "Blue",
        "rgb": {
          "r": 0.231,
          "g": 0.51,
          "b": 0.965
        },
        "hue": {
          "shift": 0,
          "isLocked": false
        },
        "chroma": {
          "shift": 0,
          "isLocked": false
        },
        "alpha": {
          "isEnabled": false,
          "backgroundColor": "#3B82F6"
        }
      }
    ]
  },
  "themes": [
    {
      "id": "text",
      "name": "Light",
      "scale": {
        "100": 10,
        "500": 50,
        "900": 90
      },
      "paletteBackground": "#3B82F6",
      "textColorsTheme": {
        "lightColor": "#3B82F6",
        "darkColor": "#3B82F6"
      },
      "visionSimulationMode": "NONE",
      "type": "default theme"
    }
  ],
  "system": {
    "schema": {
      "groups": [
        {
          "id": "brand",
          "name": "Brand",
          "members": [
            {
              "id": "primary",
              "name": "Primary"
            }
          ]
        }
      ]
    },
    "bindings": [
      {
        "path": [
          "brand",
          "primary"
        ],
        "description": "text",
        "ref": "Blue/500",
        "overrides": {
          "ANY_ADDITIONAL_PROPERTY": "text"
        },
        "isExcluded": false
      }
    ]
  }
}

{}

Generate color harmonies

post

Compute one or all color harmonies (complementary, analogous, triadic, etc.) from a base color.

Body

application/json

analogousSpreadnumberOptional

Spread angle (in degrees) used for analogous harmonies.

Example: 30

returnFormatstring · enumOptional

Output format for each color in the result.

Default: bothPossible values:

typeone ofOptional

Harmony to compute. Use ALL (default) to get every harmony at once.

Default: ALL

string · enumOptionalExample: COMPLEMENTARYPossible values:

Responses

200

Harmony result

application/json

or

500

Internal error

application/json

post

/create-color-harmony

HTTPcURLJavaScriptPython

POST /v1/create-color-harmony HTTP/1.1
Host: api-uicp.yelbolt.workers.dev
Content-Type: application/json
Accept: */*
Content-Length: 145

{
  "baseColor": {
    "rgb": {
      "r": 0.231,
      "g": 0.51,
      "b": 0.965
    },
    "ANY_ADDITIONAL_PROPERTY": "anything"
  },
  "analogousSpread": 30,
  "returnFormat": "both",
  "type": "ALL"
}

{
  "ANY_ADDITIONAL_PROPERTY": "anything"
}

Extract dominant colors from an image

post

Extract the most prominent colors from a JPEG or PNG image. The image can be supplied in three ways:

1. Multipart upload — Content-Type: multipart/form-data with an image file field.

2. URL — JSON body with imageUrl. 3. Raw pixel data — JSON body with imageData { data: number[], width, height }.

Body

multipart/form-dataapplication/json

imagestring · binaryRequired

JPEG or PNG image file.

colorCountintegerOptional

Number of dominant colors to extract.

Example: 5

maxIterationsintegerOptional

Maximum k-means iterations.

tolerancenumberOptional

Convergence tolerance.

skipTransparentstring · enumOptional

Skip fully transparent pixels.

Possible values:

Responses

200

List of dominant colors

application/json

hexstringOptionalExample: #3B82F6Pattern: ^#[0-9a-fA-F]{3,8}$

populationnumberOptional

Relative frequency of this color in the image (0–1).

400

Missing or invalid input

application/json

500

Internal error

application/json

post

/extract-dominant-colors

HTTPcURLJavaScriptPython

POST /v1/extract-dominant-colors HTTP/1.1
Host: api-uicp.yelbolt.workers.dev
Content-Type: multipart/form-data
Accept: */*
Content-Length: 90

{
  "image": "binary",
  "colorCount": 5,
  "maxIterations": 1,
  "tolerance": 1,
  "skipTransparent": "true"
}

multipart/form-dataapplication/json

[
  {
    "hex": "#3B82F6",
    "rgb": {
      "r": 0.231,
      "g": 0.51,
      "b": 0.965
    },
    "population": 1
  }
]

Generate design tokens / code

post

Generate platform-specific design tokens or code from a palette. Accepts base + themes (not a pre-built paletteData object). Optionally pass a system to include semantic tokens.

Body

application/json

formatstring · enumOptionalExample: cssPossible values:

colorSpacestring · enumOptionalExample: RGBPossible values:

Responses

200

Generated code as a string or structured object depending on the format.

application/json

stringOptional

For text-based formats (css, scss, less, swift-ui, etc.)

or

400

Unknown format or invalid input

application/json

500

Internal error

application/json

501

System class unavailable

application/json

post

/generate-code

HTTPcURLJavaScriptPython

POST /v1/generate-code HTTP/1.1
Host: api-uicp.yelbolt.workers.dev
Content-Type: application/json
Accept: */*
Content-Length: 403

{
  "base": {
    "preset": {
      "id": "aBcDeFgHiJk",
      "name": "Material",
      "stops": [
        50,
        100,
        200,
        300,
        400,
        500,
        600,
        700,
        800,
        900
      ],
      "min": 5,
      "max": 95,
      "easing": "EASEIN_CUBIC"
    },
    "colors": [
      {
        "name": "Blue",
        "rgb": {
          "r": 0.231,
          "g": 0.51,
          "b": 0.965
        },
        "hue": {
          "shift": 0,
          "isLocked": false
        },
        "chroma": {
          "shift": 0,
          "isLocked": false
        },
        "alpha": {
          "isEnabled": false,
          "backgroundColor": "#ffffff"
        }
      }
    ]
  },
  "themes": [
    {
      "name": "Light"
    }
  ],
  "format": "css",
  "colorSpace": "RGB"
}

text

Preview palette as SVG

get

Render a palette as an SVG swatch grid. The data query parameter uses a compact encoding: <theme>~<color>~<shade>:<hex6>[,<shade>:<hex6>][;<color>~...][|<theme>~...]

• | separates themes - ; separates colors within a theme - ~ separates the name from shade pairs - , separates individual shade:hex pairs - : separates a shade name from its 6-digit hex value (without #) Values must be URL-encoded when they contain special characters.

Query parameters

datastringRequired

Compact palette data string.

Example: Light~Blue~50:EFF6FF,500:3B82F6,900:1E3A8A

Responses

200

SVG swatch grid

image/svg+xml

Responsestring · binary

400

Missing or invalid data parameter

text/plain

get

/preview

HTTPcURLJavaScriptPython

GET /v1/preview?data=text HTTP/1.1
Host: api-uicp.yelbolt.workers.dev
Accept: */*

binary