Named gradient · WebGradients

Wide Matrix

Wide Matrix is a pink gradient from WebGradients (MIT) — #fcc5e4 → #fda34b → #ff7882 → #c8699e → #7046aa → #0c1db8 → #020f75 at 0°. Shown here interpolated in OKLab, next to the original sRGB, with the worst-case contrast for white and black text and every export.

#fcc5e4 #fda34b #ff7882 #c8699e #7046aa #0c1db8 #020f75

Open in the maker Original sRGB in the maker

Aa — the quick brown fox

white text · worst 1.47:1 · fails

white 1.47 failsblack 1.33 failsbanding medium

Same stops, three spaces

The source renders this in sRGB. The number is how much chroma survives at the dullest point along the line — the difference between the first bar and the others is the grey that OKLab removes.

sRGB59%

OKLab59%

OKLCH62%

Report

white ink: worst 1.47:1 at 0% (fails AA); black ink: worst 1.33:1 at 100% (fails AA) → use white text.
Neither ink passes AA at the worst point — treat as decorative or add a scrim (rgba(0,0,0,.35) typically lifts white ink past 4:1).
Banding medium: ~5px bands at 1440px — add grain 8 (≈1% soft-light noise) or shorten the ramp.

Export

css

.gradient {
  background-image: linear-gradient(0deg, #fcc5e4 0%, #fcc3da 1.07%, #fcc1d1 2.14%, #fcbfc7 3.21%, #fcbcbd 4.29%, #fcbab4 5.36%, #fcb8aa 6.43%, #fdb59f 7.5%, #fdb395 8.57%, #fdb18a 9.64%, #fdae7f 10.71%, #fdab74 11.79%, #fda967 12.86%, #fda65a 13.93%, #fda34b 15%, #fda051 16.43%, #fd9d56 17.86%, #fe9a5a 19.29%, #fe985f 20.71%, #fe9563 22.14%, #fe9267 23.57%, #fe8f6b 25%, #fe8c6f 26.43%, #ff8872 27.86%, #ff8576 29.29%, #ff8279 30.71%, #ff7f7c 32.14%, #ff7b7f 33.57%, #ff7882 35%, #fb7784 36.21%, #f77687 37.43%, #f37589 38.64%, #ef748b 39.86%, #eb738d 41.07%, #e7728f 42.29%, #e37191 43.5%, #df7093 44.71%, #db6f95 45.93%, #d76e97 47.14%, #d46d99 48.36%, #d06b9b 49.57%, #cc6a9c 50.79%, #c8699e 52%, #c1679f 53.36%, #bb65a0 54.71%, #b463a1 56.07%, #ae61a3 57.43%, #a75ea4 58.79%, #a15ca4 60.14%, #9b5aa5 61.5%, #9457a6 62.86%, #8e54a7 64.21%, #8852a8 65.57%, #824fa8 66.93%, #7c4ca9 68.29%, #7649a9 69.64%, #7046aa 71%, #6a45ab 72.14%, #6343ac 73.29%, #5d41ad 74.43%, #573fae 75.57%, #503db0 76.71%, #4a3bb1 77.86%, #4338b2 79%, #3c36b3 80.14%, #3633b4 81.29%, #2f2fb4 82.43%, #272cb5 83.57%, #1f27b6 84.71%, #1723b7 85.86%, #0c1db8 87%, #0b1cb3 87.93%, #0a1bae 88.86%, #091aa9 89.79%, #0819a4 90.71%, #07189f 91.64%, #07179b 92.57%, #061696 93.5%, #051591 94.43%, #05148c 95.36%, #041388 96.29%, #031283 97.21%, #03117e 98.14%, #02107a 99.07%, #020f75 100%);
  background-image: linear-gradient(0deg in oklab, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);
}

tailwind v4

bg-[linear-gradient(0deg_in_oklab,#fcc5e4_0%,#fda34b_15%,#ff7882_35%,#c8699e_52%,#7046aa_71%,#0c1db8_87%,#020f75_100%)]

svg

<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="600" viewBox="0 0 1440 600"><defs><linearGradient id="bs-gradient" gradientUnits="userSpaceOnUse" x1="720" y1="600" x2="720" y2="0"><stop offset="0%" stop-color="#fcc5e4"/><stop offset="1.07%" stop-color="#fcc3da"/><stop offset="2.14%" stop-color="#fcc1d1"/><stop offset="3.21%" stop-color="#fcbfc7"/><stop offset="4.29%" stop-color="#fcbcbd"/><stop offset="5.36%" stop-color="#fcbab4"/><stop offset="6.43%" stop-color="#fcb8aa"/><stop offset="7.5%" stop-color="#fdb59f"/><stop offset="8.57%" stop-color="#fdb395"/><stop offset="9.64%" stop-color="#fdb18a"/><stop offset="10.71%" stop-color="#fdae7f"/><stop offset="11.79%" stop-color="#fdab74"/><stop offset="12.86%" stop-color="#fda967"/><stop offset="13.93%" stop-color="#fda65a"/><stop offset="15%" stop-color="#fda34b"/><stop offset="16.43%" stop-color="#fda051"/><stop offset="17.86%" stop-color="#fd9d56"/><stop offset="19.29%" stop-color="#fe9a5a"/><stop offset="20.71%" stop-color="#fe985f"/><stop offset="22.14%" stop-color="#fe9563"/><stop offset="23.57%" stop-color="#fe9267"/><stop offset="25%" stop-color="#fe8f6b"/><stop offset="26.43%" stop-color="#fe8c6f"/><stop offset="27.86%" stop-color="#ff8872"/><stop offset="29.29%" stop-color="#ff8576"/><stop offset="30.71%" stop-color="#ff8279"/><stop offset="32.14%" stop-color="#ff7f7c"/><stop offset="33.57%" stop-color="#ff7b7f"/><stop offset="35%" stop-color="#ff7882"/><stop offset="36.21%" stop-color="#fb7784"/><stop offset="37.43%" stop-color="#f77687"/><stop offset="38.64%" stop-color="#f37589"/><stop offset="39.86%" stop-color="#ef748b"/><stop offset="41.07%" stop-color="#eb738d"/><stop offset="42.29%" stop-color="#e7728f"/><stop offset="43.5%" stop-color="#e37191"/><stop offset="44.71%" stop-color="#df7093"/><stop offset="45.93%" stop-color="#db6f95"/><stop offset="47.14%" stop-color="#d76e97"/><stop offset="48.36%" stop-color="#d46d99"/><stop offset="49.57%" stop-color="#d06b9b"/><stop offset="50.79%" stop-color="#cc6a9c"/><stop offset="52%" stop-color="#c8699e"/><stop offset="53.36%" stop-color="#c1679f"/><stop offset="54.71%" stop-color="#bb65a0"/><stop offset="56.07%" stop-color="#b463a1"/><stop offset="57.43%" stop-color="#ae61a3"/><stop offset="58.79%" stop-color="#a75ea4"/><stop offset="60.14%" stop-color="#a15ca4"/><stop offset="61.5%" stop-color="#9b5aa5"/><stop offset="62.86%" stop-color="#9457a6"/><stop offset="64.21%" stop-color="#8e54a7"/><stop offset="65.57%" stop-color="#8852a8"/><stop offset="66.93%" stop-color="#824fa8"/><stop offset="68.29%" stop-color="#7c4ca9"/><stop offset="69.64%" stop-color="#7649a9"/><stop offset="71%" stop-color="#7046aa"/><stop offset="72.14%" stop-color="#6a45ab"/><stop offset="73.29%" stop-color="#6343ac"/><stop offset="74.43%" stop-color="#5d41ad"/><stop offset="75.57%" stop-color="#573fae"/><stop offset="76.71%" stop-color="#503db0"/><stop offset="77.86%" stop-color="#4a3bb1"/><stop offset="79%" stop-color="#4338b2"/><stop offset="80.14%" stop-color="#3c36b3"/><stop offset="81.29%" stop-color="#3633b4"/><stop offset="82.43%" stop-color="#2f2fb4"/><stop offset="83.57%" stop-color="#272cb5"/><stop offset="84.71%" stop-color="#1f27b6"/><stop offset="85.86%" stop-color="#1723b7"/><stop offset="87%" stop-color="#0c1db8"/><stop offset="87.93%" stop-color="#0b1cb3"/><stop offset="88.86%" stop-color="#0a1bae"/><stop offset="89.79%" stop-color="#091aa9"/><stop offset="90.71%" stop-color="#0819a4"/><stop offset="91.64%" stop-color="#07189f"/><stop offset="92.57%" stop-color="#07179b"/><stop offset="93.5%" stop-color="#061696"/><stop offset="94.43%" stop-color="#051591"/><stop offset="95.36%" stop-color="#05148c"/><stop offset="96.29%" stop-color="#041388"/><stop offset="97.21%" stop-color="#031283"/><stop offset="98.14%" stop-color="#03117e"/><stop offset="99.07%" stop-color="#02107a"/><stop offset="100%" stop-color="#020f75"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>

dtcg

{
  "wide-matrix": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.988,
            0.773,
            0.894
          ],
          "hex": "#fcc5e4"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.992,
            0.639,
            0.294
          ],
          "hex": "#fda34b"
        },
        "position": 0.15
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.471,
            0.51
          ],
          "hex": "#ff7882"
        },
        "position": 0.35
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.784,
            0.412,
            0.62
          ],
          "hex": "#c8699e"
        },
        "position": 0.52
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.439,
            0.275,
            0.667
          ],
          "hex": "#7046aa"
        },
        "position": 0.71
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.047,
            0.114,
            0.722
          ],
          "hex": "#0c1db8"
        },
        "position": 0.87
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.008,
            0.059,
            0.459
          ],
          "hex": "#020f75"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(0deg in oklab, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)",
        "interpolation": "oklab",
        "angle": 0,
        "name": "Wide Matrix",
        "contrast": {
          "white": {
            "ratio": 1.474,
            "at": 0,
            "passesAA": false,
            "passesAALarge": false
          },
          "black": {
            "ratio": 1.328,
            "at": 1,
            "passesAA": false,
            "passesAALarge": false
          },
          "suggestedInk": "#ffffff"
        }
      }
    },
    "$description": "Wide Matrix (WebGradients, MIT), rendered in OKLab."
  }
}

Tagged

white 1.06 failsblack 9.08 AA

Open in maker →

mcpConnect your agent to the gradient engine

live endpoint

Point any MCP client at the shared gradients endpoint and your agent gets the same engine as this page — make_gradient returns CSS with the interpolation space, Tailwind v4, SVG, a PNG URL, a DTCG token and the contrast report in one call; brand_gradients derives the whole contact sheet from a brand or a palette. Read-only, no key. Every gradient is a /gradients/new/… link: open it, refine, paste it back.

endpointhttps://mcp.brandsweets.com/gradients/mcp

claude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp

try this prompt

›take the Wide Matrix gradient (#fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75), re-interpolate it in oklch, and tell me the worst-case contrast for white text

Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.

Machine-readable: gradients.md · From WebGradients (MIT) — licences