POST /v1/gradients/generate

Genereer een nieuwe gradiënt op basis van configuratieparameters. Retourneert een JSON-object met CSS-gradiëntwaarden, hex-codes, en een unieke gradient_id. Ondersteunt lineair, radiaal en conisch type. Standaard response-time: <80ms. Rate limit: 120 calls/min op het free-tier, 1000 calls/min op het pro-tier.

GET /v1/gradients/:id

Haal een eerder gegenereerde gradiënt op via de gradient_id. Retourneert de volledige configuratie inclusief stoppen, hoeken, en blend-modus. Handig voor caching en reproductie. Retourneert HTTP 404 als de gradiënt niet gevonden of verlopen is (TTL: 30 dagen).

PATCH /v1/gradients/:id

Werk een bestaande gradiënt bij. Accepteert partial updates — stuur alleen de velden die je wilt wijzigen, zoals angle, stops, of type. De gradient_id blijft behouden. Retourneert het bijgewerkte object met een nieuwe version tag.

POST /v1/gradients/export

Exporteer een gradiënt naar meerdere formaten. Ondersteunde formaten: CSS (inline & class), SVG, PNG (1920×1080), WebP, en Tailwind config. Gebruik het format query-parameter om het gewenste output-formaat op te geven. PNG-exporten bevatten een transparante alpha-kanalen wanneer geconfigureerd.

GET /v1/palettes/:name

Haal een vooraf gedefinieerd kleurenpalet op. Beschikbare paletten: aurora, sunset-drive, ocean-deep, neon-district, forest-mist. Retourneert een array van hex-codes met bijbehorende toegankelijkheidsinformatie (WCAG 2.1 contrast-ratio).

POST /v1/gradients/analyze

Analyseer een bestaande CSS-gradiëntstring en retourneer de gedecomponeerde structuur. Handig voor migraties van bestaande projecten. Retourneert stops, angle, type, en een accessibility_score gebaseerd op kleurcontrast-analyse.

type (string, vereist)

Het type gradiënt. Geldige waarden: "linear", "radial", "conic". Standaard: "linear". Radiale gradiënten ondersteunen optionele shape parameter ("circle" of "ellipse"). Conische gradiënten vereisen een expliciete angle.

stops (array, vereist)

Array van kleurstoppen. Minimaal 2, maximaal 8 stoppen. Elke stop is een object met color (hex-string, bijv. "#6366f1") en position (float 0.0–1.0, bijv. 0.0, 0.5, 1.0). Als position wordt weggelaten, worden stoppen automatisch gelijkmatig verdeeld.

angle (number, optioneel)

De hoek van de gradiënt in graden (0–360). Standaard: 135. Voor radiale gradiënten wordt deze genegeerd. Voor conische gradiënten is dit vereist. Negatieve waarden worden automatisch genormeerd (bijv. -45 wordt 315).

blendMode (string, optioneel)

De blend-modus tussen kleurstoppen. Geldige waarden: "normal", "multiply", "screen", "overlay", "difference". Standaard: "normal". Blend-modussen worden alleen ondersteund in de CSS en SVG output, niet in PNG-export.

outputFormat (string, optioneel)

Gewenste output-indeling. Waarden: "css", "scss", "tailwind", "svg". Standaard: "css". De "tailwind" output genereert een compleet tailwind.config.js snippet met theme.extend.backgroundImage.

seed (string, optioneel)

Een deterministische seed voor reproduceerbare gradiëntgeneratie. Handig voor unit tests en CI/CD pipelines. Bijvoorbeeld: "cf-prod-2024-q1". Dezelfde seed met dezelfde parameters produceert altijd identieke output.

cURL — Lineaire gradiënt genereren

curl -X POST https://api.colorflow.dev/v1/gradients/generate \
  -H "Authorization: Bearer cf_live_sk_a8b2c9d1e4f6" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "linear",
    "angle": 135,
    "stops": [
      {"color": "#0f172a", "position": 0.0},
      {"color": "#6366f1", "position": 0.4},
      {"color": "#a855f7", "position": 0.7},
      {"color": "#f472b6", "position": 1.0}
    ],
    "outputFormat": "css"
  }'

Node.js — Radiale gradiënt met fetch

const response = await fetch(
  'https://api.colorflow.dev/v1/gradients/generate',
  {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer cf_live_sk_a8b2c9d1e4f6',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      type: 'radial',
      stops: [
        { color: '#0ea5e9', position: 0.0 },
        { color: '#06b6d4', position: 0.5 },
        { color: '#10b981', position: 1.0 }
      ],
      seed: 'ocean-gradient-v2'
    })
  }
);
const gradient = await response.json();
console.log(gradient.css);
// → "radial-gradient(circle, #0ea5e9 0%, #06b6d4 50%, #10b981 100%)"

Python — Gradiënt exporteren naar SVG

import requests

gradient_id = "cf_grad_7x3m9k2p"
response = requests.post(
    "https://api.colorflow.dev/v1/gradients/export",
    headers={
        "Authorization": "Bearer cf_live_sk_a8b2c9d1e4f6"
    },
    params={"format": "svg"},
    json={"gradient_id": gradient_id}
)

with open("hero-gradient.svg", "w") as f:
    f.write(response.text)
# SVG-bestand geschreven: 1.2KB, geoptimaliseerd,
# met viewBox="0 0 1920 1080"

React — Gradiënt analyseren voor toegankelijkheid

async function analyzeGradient(cssString) {
  const res = await fetch(
    'https://api.colorflow.dev/v1/gradients/analyze',
    {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer cf_live_sk_a8b2c9d1e4f6',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ css: cssString })
    }
  );
  const data = await res.json();
  // data.accessibility_score: 0.0–1.0
  // data.warnings: ["Low contrast at stop 2"]
  return data;
}

const result = await analyzeGradient(
  'linear-gradient(135deg, #1e1b4b, #c084fc)'
);
// → { accessibility_score: 0.92, warnings: [] }