Colour Mixer API

Mix two colours in sRGB, linear RGB and OKLab, with the equivalent CSS color-mix() and an evenly spaced blend scale in each space.

POST /api/v1/tools/color-mixerMCP color_mixerDesign & Colour

Mix two colours at any ratio and compare the result in sRGB, linear RGB and OKLab side by side, with a stepped blend scale and copyable color-mix() CSS.

Input

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

first: First colour: hex, rgb(), hsl() or a CSS colour name. (string, up to 100 characters, required)
second: Second colour. (string, up to 100 characters, required)
percent: How much of the second colour, in %: 0 is all first, 100 is all second. (number, 0 to 100, default 50)
steps: Swatches in each blend scale, including both ends. (integer, 2 to 20, default 5)

Try it in the browser JSON Schema Get an API key

curl https://pithlab.com/api/v1/tools/color-mixer \n  -H "Authorization: Bearer $PITHLAB_KEY" \n  -H "Content-Type: application/json" \n  -d '{"first":"#ff0000","second":"#0000ff","percent":50,"steps":3}'

Example response

{
  "ok": true,
  "result": {
    "mixes": [
      {
        "space": "srgb",
        "hex": "#800080",
        "rgb": "rgb(128 0 128)",
        "hsl": "hsl(300 100% 25%)",
        "css": "color-mix(in srgb, #ff0000 50%, #0000ff)"
      },
      {
        "space": "linear",
        "hex": "#bc00bc",
        "rgb": "rgb(188 0 188)",
        "hsl": "hsl(300 100% 36.8%)",
        "css": "color-mix(in srgb-linear, #ff0000 50%, #0000ff)"
      },
      {
        "space": "oklab",
        "hex": "#8c53a2",
        "rgb": "rgb(140 83 162)",
        "hsl": "hsl(283.4 32.3% 48.1%)",
        "css": "color-mix(in oklab, #ff0000 50%, #0000ff)"
      }
    ],
    "scales": {
      "srgb": [
        "#ff0000",
        "#800080",
        "#0000ff"
      ],
      "linear": [
        "#ff0000",
        "#bc00bc",
        "#0000ff"
      ],
      "oklab": [
        "#ff0000",
        "#8c53a2",
        "#0000ff"
      ]
    }
  }
}