brandsweets

Named gradient · WebGradients

Warm Flame

Warm Flame is a red gradient from WebGradients (MIT) — #ff9a9e → #fad0c4 → #fad0c4 at 45°. Shown here interpolated in OKLab, next to the original sRGB, with the worst-case contrast for white and black text and every export.

#ff9a9e#fad0c4#fad0c4
Open in the makerOriginal sRGB in the maker
Aa — the quick brown fox
black text · worst 10.37:1 · AA
white 1.41 failsblack 10.37 AAbanding 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.

sRGB59%
OKLab59%
OKLCH59%

Report

  • white ink: worst 1.41:1 at 98% (fails AA); black ink: worst 10.37:1 at 0% (AA) → use black text.
  • Banding high: ~26px bands at 1440px — add grain 49 (≈3% soft-light noise) or shorten the ramp.

Export

css
.gradient {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #ff9ea1 7.07%, #ffa2a3 14.14%, #ffa6a6 21.21%, #feaaa9 28.29%, #feaeab 35.36%, #feb2ae 42.43%, #feb5b1 49.5%, #fdb9b4 56.57%, #fdbdb6 63.64%, #fcc1b9 70.71%, #fcc5bc 77.79%, #fbc8be 84.86%, #fbccc1 91.93%, #fad0c4 99%, #fad0c4 99.07%, #fad0c4 99.14%, #fad0c4 99.21%, #fad0c4 99.29%, #fad0c4 99.36%, #fad0c4 99.43%, #fad0c4 99.5%, #fad0c4 99.57%, #fad0c4 99.64%, #fad0c4 99.71%, #fad0c4 99.79%, #fad0c4 99.86%, #fad0c4 99.93%, #fad0c4 100%);
  background-image: linear-gradient(45deg in oklab, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
tailwind v4
bg-linear-to-tr/oklab from-[#ff9a9e] via-[#fad0c4] via-99% to-[#fad0c4]
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="210" y1="810" x2="1230" y2="-210"><stop offset="0%" stop-color="#ff9a9e"/><stop offset="7.07%" stop-color="#ff9ea1"/><stop offset="14.14%" stop-color="#ffa2a3"/><stop offset="21.21%" stop-color="#ffa6a6"/><stop offset="28.29%" stop-color="#feaaa9"/><stop offset="35.36%" stop-color="#feaeab"/><stop offset="42.43%" stop-color="#feb2ae"/><stop offset="49.5%" stop-color="#feb5b1"/><stop offset="56.57%" stop-color="#fdb9b4"/><stop offset="63.64%" stop-color="#fdbdb6"/><stop offset="70.71%" stop-color="#fcc1b9"/><stop offset="77.79%" stop-color="#fcc5bc"/><stop offset="84.86%" stop-color="#fbc8be"/><stop offset="91.93%" stop-color="#fbccc1"/><stop offset="99%" stop-color="#fad0c4"/><stop offset="99.07%" stop-color="#fad0c4"/><stop offset="99.14%" stop-color="#fad0c4"/><stop offset="99.21%" stop-color="#fad0c4"/><stop offset="99.29%" stop-color="#fad0c4"/><stop offset="99.36%" stop-color="#fad0c4"/><stop offset="99.43%" stop-color="#fad0c4"/><stop offset="99.5%" stop-color="#fad0c4"/><stop offset="99.57%" stop-color="#fad0c4"/><stop offset="99.64%" stop-color="#fad0c4"/><stop offset="99.71%" stop-color="#fad0c4"/><stop offset="99.79%" stop-color="#fad0c4"/><stop offset="99.86%" stop-color="#fad0c4"/><stop offset="99.93%" stop-color="#fad0c4"/><stop offset="100%" stop-color="#fad0c4"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
dtcg
{
  "warm-flame": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.604,
            0.62
          ],
          "hex": "#ff9a9e"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.98,
            0.816,
            0.769
          ],
          "hex": "#fad0c4"
        },
        "position": 0.99
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.98,
            0.816,
            0.769
          ],
          "hex": "#fad0c4"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(45deg in oklab, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)",
        "interpolation": "oklab",
        "angle": 45,
        "name": "Warm Flame",
        "contrast": {
          "white": {
            "ratio": 1.411,
            "at": 0.9841,
            "passesAA": false,
            "passesAALarge": false
          },
          "black": {
            "ratio": 10.368,
            "at": 0,
            "passesAA": true,
            "passesAALarge": true
          },
          "suggestedInk": "#000000"
        }
      }
    },
    "$description": "Warm Flame (WebGradients, MIT), rendered in OKLab."
  }
}

Tagged

Red gradientsWarmMutedLightPastelMonochromeCalm

More red 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 Warm Flame gradient (#ff9a9e, #fad0c4, #fad0c4), 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