GET /api/colors/

Generate color paths
from simple URLs.

Give the API two or more colors and it generates a complete interpolated color sequence between them. Add as many anchor colors as you want and control the number of generated colors.

GET /api/colors/?colors=123456,acdfd1,345678&steps=101

How it works

The API treats every color you provide as an anchor. It then interpolates between each pair of anchors to create a continuous path through all of them.

#123456 #ACDFD1 #345678

Multiple anchors

You're not limited to two colors. For example, you can go from red to yellow, then green, cyan, and finally blue.

Request

/api/colors/?colors=ff0000,ffff00,00ff00,00ffff,0000ff&steps=500

Basic usage

Make a normal HTTP GET request. No authentication, SDK, or special client is required.

JavaScript

const response =
  await fetch(
    "https://cdn.bananaofficial.workers.dev/api/colors/?colors=123456,acdfd1,345678"
  );

const data = await response.json();

console.log(data.colors);

curl

curl "https://cdn.bananaofficial.workers.dev/api/colors/?colors=123456,acdfd1,345678"

Python

import requests

response = requests.get(
    "https://cdn.bananaofficial.workers.dev/api/colors/",
    params={
        "colors": "123456,acdfd1,345678",
        "steps": 500
    }
)

data = response.json()

Parameters

The endpoint has two query parameters.


            colors
            required

A comma-separated list of HEX colors. You can provide two or more colors. Both six-digit and three-digit HEX values are supported.


            steps
            optional

The total number of colors to generate. Defaults to 101. The current maximum is 100000.

Examples

/api/colors/?colors=ff0000,0000ff

/api/colors/?colors=ff0000,ffff00,00ff00&steps=500

/api/colors/?colors=123456,abc,345678&steps=1000

Response

The API returns JSON containing the normalized input colors, the number of generated colors, and every generated color with its position, HEX value, and RGB values.

{
  "input": [
    "#123456",
    "#ACDFD1",
    "#345678"
  ],

  "colors": [
    {
      "position": 0,
      "hex": "#123456",
      "rgb": [18, 52, 86]
    },
    {
      "position": 1,
      "hex": "#789ABC",
      "rgb": [120, 154, 188]
    },

    // ... generated colors ...

    {
      "position": 4,
      "hex": "#345678",
      "rgb": [52, 86, 120]
    }
  ]
}

Anchor colors are preserved. The generated path always starts with your first color and ends with your last color while passing through the supplied intermediate anchor colors.

What can you use it for?

The API is intentionally simple, which makes it useful as a building block for other projects.

⌁

Gradients

Generate the individual colors needed for CSS gradients, visualizations, canvas rendering, or custom gradient editors.

▦

Data visualization

Create color scales for charts, maps, heatmaps, dashboards, and other data-driven interfaces.

✦

Generative design

Use the generated sequence as a palette for animations, procedural artwork, backgrounds, and visual effects.

Developer tools

Build palette generators, color utilities, design tools, or APIs that need predictable color interpolation.

Quick reference

GET

/api/colors/

colors

Comma-separated HEX anchor colors.

steps

Total number of generated colors. Default: 101.

Response

JSON.

Generate color paths from simple URLs.