Color Palette Generator API

Generate a palette from one base colour: complementary, analogous, triadic, tetradic, split-complementary and monochromatic harmonies, plus a 50–950 tint and shade scale as CSS variables and a Tailwind theme.

POST /api/v1/tools/color-palette-generatorMCP color_palette_generatorDesign & Colour

Build colour palettes from one base colour: complementary, analogous, triadic and more, plus a 50–950 tint and shade scale you can export as CSS or Tailwind.

Input

Send these as a JSON object. Unknown fields are rejected.

color: Base colour: hex, rgb(), hsl(), hwb(), oklch() or a CSS colour name. (string, up to 100 characters, required)
name: Token name for the CSS variables and Tailwind theme, e.g. brand. (string, up to 40 characters, default "brand")

Try it in the browser JSON Schema Get an API key

curl https://pithlab.com/api/v1/tools/color-palette-generator \n  -H "Authorization: Bearer $PITHLAB_KEY" \n  -H "Content-Type: application/json" \n  -d '{"color":"#0f766e","name":"teal"}'

Example response

{
  "ok": true,
  "result": {
    "base": "#0f766e",
    "formats": {
      "hex": "#0f766e",
      "rgb": "rgb(15 118 110)",
      "hsl": "hsl(175.3 77.4% 26.1%)",
      "hwb": "hwb(175.3 5.9% 53.7%)",
      "cmyk": "cmyk(87.3% 0% 6.8% 53.7%)",
      "oklch": "oklch(0.5109 0.0861 186.39)",
      "name": null
    },
    "harmonies": {
      "complementary": [
        "#0f766e",
        "#760f17"
      ],
      "analogous": [
        "#0f763b",
        "#0f766e",
        "#0f4b76"
      ],
      "triadic": [
        "#0f766e",
        "#6e0f76",
        "#766e0f"
      ],
      "tetradic": [
        "#0f766e",
        "#3b0f76",
        "#760f17",
        "#4b760f"
      ],
      "split-complementary": [
        "#0f766e",
        "#760f4b",
        "#763b0f"
      ],
      "monochromatic": [
        "#09443f",
        "#0f766e",
        "#1de2d3",
        "#6eede3",
        "#bbf6f2"
      ]
    },
    "scale": [
      {
        "step": 50,
        "hex": "#f2f7f6"
      },
      {
        "step": 100,
        "hex": "#e2eceb"
      },
      {
        "step": 200,
        "hex": "#c8dfdb"
      },
      {
        "step": 300,
        "hex": "#9ecbc5"
      },
      {
        "step": 400,
        "hex": "#67afa7"
      },
      {
        "step": 500,
        "hex": "#439c93"
      },
      {
        "step": 600,
        "hex": "#2e8a81"
      },
      {
        "step": 700,
        "hex": "#21736c"
      },
      {
        "step": 800,
        "hex": "#1c6059"
      },
      {
        "step": 900,
        "hex": "#1d504b"
      },
      {
        "step": 950,
        "hex": "#082a26"
      }
    ],
    "cssVariables": ":root {\n  --teal-50: #f2f7f6;\n  --teal-100: #e2eceb;\n  --teal-200: #c8dfdb;\n  --teal-300: #9ecbc5;\n  --teal-400: #67afa7;\n  --teal-500: #439c93;\n  --teal-600: #2e8a81;\n  --teal-700: #21736c;\n  --teal-800: #1c6059;\n  --teal-900: #1d504b;\n  --teal-950: #082a26;\n}",
    "tailwindTheme": "@theme {\n  --color-teal-50: #f2f7f6;\n  --color-teal-100: #e2eceb;\n  --color-teal-200: #c8dfdb;\n  --color-teal-300: #9ecbc5;\n  --color-teal-400: #67afa7;\n  --color-teal-500: #439c93;\n  --color-teal-600: #2e8a81;\n  --color-teal-700: #21736c;\n  --color-teal-800: #1c6059;\n  --color-teal-900: #1d504b;\n  --color-teal-950: #082a26;\n}"
  }
}