brandsweets

Named gradient · WebGradients

Burning Spring

Burning Spring is a green gradient from WebGradients (MIT) — #4fb576 → #44c489 → #28a9ae → #28a2b7 → #4c7788 → #6c4f63 → #432c39 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.

#4fb576#44c489#28a9ae#28a2b7#4c7788#6c4f63#432c39
Open in the makerOriginal sRGB in the maker
Aa — the quick brown fox
white text · worst 2.21:1 · fails
white 2.21 failsblack 1.66 failsbanding high

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.

sRGB35%
OKLab33%
OKLCH45%

Report

  • white ink: worst 2.21:1 at 30% (fails AA); black ink: worst 1.66: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 high: ~23px bands at 1440px — add grain 44 (≈3% soft-light noise) or shorten the ramp.

Export

css
.gradient {
  background-image: linear-gradient(0deg, #4fb576 0%, #4eb677 2.14%, #4eb779 4.29%, #4db87a 6.43%, #4cb97b 8.57%, #4cba7d 10.71%, #4bbb7e 12.86%, #4abc80 15%, #49be81 17.14%, #48bf82 19.29%, #48c084 21.43%, #47c185 23.57%, #46c286 25.71%, #45c388 27.86%, #44c489 30%, #42c28c 31.14%, #40c08f 32.29%, #3ebe92 33.43%, #3cbd95 34.57%, #3abb98 35.71%, #38b99a 36.86%, #36b79d 38%, #34b59f 39.14%, #32b3a2 40.29%, #30b1a4 41.43%, #2eafa7 42.57%, #2cada9 43.71%, #2aabac 44.86%, #28a9ae 46%, #28a9af 46.93%, #28a8af 47.86%, #28a8b0 48.79%, #28a7b1 49.71%, #28a7b1 50.64%, #28a6b2 51.57%, #28a6b3 52.5%, #28a5b3 53.43%, #28a5b4 54.36%, #28a4b4 55.29%, #28a4b5 56.21%, #28a3b6 57.14%, #28a3b6 58.07%, #28a2b7 59%, #2d9fb4 59.86%, #329cb0 60.71%, #3599ad 61.57%, #3996a9 62.43%, #3c92a6 63.29%, #3e8fa3 64.14%, #418c9f 65%, #43899c 65.86%, #458699 66.71%, #478395 67.57%, #488092 68.43%, #4a7d8f 69.29%, #4b7a8b 70.14%, #4c7788 71%, #507485 71.64%, #537183 72.29%, #566f80 72.93%, #596c7d 73.57%, #5b697b 74.21%, #5e6678 74.86%, #606375 75.5%, #626173 76.14%, #645e70 76.79%, #665b6d 77.43%, #68586b 78.07%, #695568 78.71%, #6b5266 79.36%, #6c4f63 80%, #694c60 81.43%, #664a5d 82.86%, #63475a 84.29%, #604557 85.71%, #5d4254 87.14%, #5a4051 88.57%, #573d4e 90%, #543b4b 91.43%, #513848 92.86%, #4e3645 94.29%, #4c3342 95.71%, #49313f 97.14%, #462e3c 98.57%, #432c39 100%);
  background-image: linear-gradient(0deg in oklab, #4fb576 0%, #44c489 30%, #28a9ae 46%, #28a2b7 59%, #4c7788 71%, #6c4f63 80%, #432c39 100%);
}
tailwind v4
bg-[linear-gradient(0deg_in_oklab,#4fb576_0%,#44c489_30%,#28a9ae_46%,#28a2b7_59%,#4c7788_71%,#6c4f63_80%,#432c39_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="#4fb576"/><stop offset="2.14%" stop-color="#4eb677"/><stop offset="4.29%" stop-color="#4eb779"/><stop offset="6.43%" stop-color="#4db87a"/><stop offset="8.57%" stop-color="#4cb97b"/><stop offset="10.71%" stop-color="#4cba7d"/><stop offset="12.86%" stop-color="#4bbb7e"/><stop offset="15%" stop-color="#4abc80"/><stop offset="17.14%" stop-color="#49be81"/><stop offset="19.29%" stop-color="#48bf82"/><stop offset="21.43%" stop-color="#48c084"/><stop offset="23.57%" stop-color="#47c185"/><stop offset="25.71%" stop-color="#46c286"/><stop offset="27.86%" stop-color="#45c388"/><stop offset="30%" stop-color="#44c489"/><stop offset="31.14%" stop-color="#42c28c"/><stop offset="32.29%" stop-color="#40c08f"/><stop offset="33.43%" stop-color="#3ebe92"/><stop offset="34.57%" stop-color="#3cbd95"/><stop offset="35.71%" stop-color="#3abb98"/><stop offset="36.86%" stop-color="#38b99a"/><stop offset="38%" stop-color="#36b79d"/><stop offset="39.14%" stop-color="#34b59f"/><stop offset="40.29%" stop-color="#32b3a2"/><stop offset="41.43%" stop-color="#30b1a4"/><stop offset="42.57%" stop-color="#2eafa7"/><stop offset="43.71%" stop-color="#2cada9"/><stop offset="44.86%" stop-color="#2aabac"/><stop offset="46%" stop-color="#28a9ae"/><stop offset="46.93%" stop-color="#28a9af"/><stop offset="47.86%" stop-color="#28a8af"/><stop offset="48.79%" stop-color="#28a8b0"/><stop offset="49.71%" stop-color="#28a7b1"/><stop offset="50.64%" stop-color="#28a7b1"/><stop offset="51.57%" stop-color="#28a6b2"/><stop offset="52.5%" stop-color="#28a6b3"/><stop offset="53.43%" stop-color="#28a5b3"/><stop offset="54.36%" stop-color="#28a5b4"/><stop offset="55.29%" stop-color="#28a4b4"/><stop offset="56.21%" stop-color="#28a4b5"/><stop offset="57.14%" stop-color="#28a3b6"/><stop offset="58.07%" stop-color="#28a3b6"/><stop offset="59%" stop-color="#28a2b7"/><stop offset="59.86%" stop-color="#2d9fb4"/><stop offset="60.71%" stop-color="#329cb0"/><stop offset="61.57%" stop-color="#3599ad"/><stop offset="62.43%" stop-color="#3996a9"/><stop offset="63.29%" stop-color="#3c92a6"/><stop offset="64.14%" stop-color="#3e8fa3"/><stop offset="65%" stop-color="#418c9f"/><stop offset="65.86%" stop-color="#43899c"/><stop offset="66.71%" stop-color="#458699"/><stop offset="67.57%" stop-color="#478395"/><stop offset="68.43%" stop-color="#488092"/><stop offset="69.29%" stop-color="#4a7d8f"/><stop offset="70.14%" stop-color="#4b7a8b"/><stop offset="71%" stop-color="#4c7788"/><stop offset="71.64%" stop-color="#507485"/><stop offset="72.29%" stop-color="#537183"/><stop offset="72.93%" stop-color="#566f80"/><stop offset="73.57%" stop-color="#596c7d"/><stop offset="74.21%" stop-color="#5b697b"/><stop offset="74.86%" stop-color="#5e6678"/><stop offset="75.5%" stop-color="#606375"/><stop offset="76.14%" stop-color="#626173"/><stop offset="76.79%" stop-color="#645e70"/><stop offset="77.43%" stop-color="#665b6d"/><stop offset="78.07%" stop-color="#68586b"/><stop offset="78.71%" stop-color="#695568"/><stop offset="79.36%" stop-color="#6b5266"/><stop offset="80%" stop-color="#6c4f63"/><stop offset="81.43%" stop-color="#694c60"/><stop offset="82.86%" stop-color="#664a5d"/><stop offset="84.29%" stop-color="#63475a"/><stop offset="85.71%" stop-color="#604557"/><stop offset="87.14%" stop-color="#5d4254"/><stop offset="88.57%" stop-color="#5a4051"/><stop offset="90%" stop-color="#573d4e"/><stop offset="91.43%" stop-color="#543b4b"/><stop offset="92.86%" stop-color="#513848"/><stop offset="94.29%" stop-color="#4e3645"/><stop offset="95.71%" stop-color="#4c3342"/><stop offset="97.14%" stop-color="#49313f"/><stop offset="98.57%" stop-color="#462e3c"/><stop offset="100%" stop-color="#432c39"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
dtcg
{
  "burning-spring": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.31,
            0.71,
            0.463
          ],
          "hex": "#4fb576"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.267,
            0.769,
            0.537
          ],
          "hex": "#44c489"
        },
        "position": 0.3
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.157,
            0.663,
            0.682
          ],
          "hex": "#28a9ae"
        },
        "position": 0.46
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.157,
            0.635,
            0.718
          ],
          "hex": "#28a2b7"
        },
        "position": 0.59
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.467,
            0.533
          ],
          "hex": "#4c7788"
        },
        "position": 0.71
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.424,
            0.31,
            0.388
          ],
          "hex": "#6c4f63"
        },
        "position": 0.8
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.263,
            0.173,
            0.224
          ],
          "hex": "#432c39"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(0deg in oklab, #4fb576 0%, #44c489 30%, #28a9ae 46%, #28a2b7 59%, #4c7788 71%, #6c4f63 80%, #432c39 100%)",
        "interpolation": "oklab",
        "angle": 0,
        "name": "Burning Spring",
        "contrast": {
          "white": {
            "ratio": 2.21,
            "at": 0.3,
            "passesAA": false,
            "passesAALarge": false
          },
          "black": {
            "ratio": 1.658,
            "at": 1,
            "passesAA": false,
            "passesAALarge": false
          },
          "suggestedInk": "#ffffff"
        }
      }
    },
    "$description": "Burning Spring (WebGradients, MIT), rendered in OKLab."
  }
}

Tagged

Green gradientsPink gradientsTeal gradientsMuted

More green gradients

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 Burning Spring gradient (#4fb576, #44c489, #28a9ae, #28a2b7, #4c7788, #6c4f63, #432c39), 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