brandsweets

Named gradient · uiGradients

Whinehouse

Whinehouse is a red gradient from uiGradients (MIT) — #f7f7f7 → #b9a0a0 → #794747 → #4e2020 → #111111 at 90°. Shown here interpolated in OKLab, next to the original sRGB, with the worst-case contrast for white and black text and every export.

#f7f7f7#b9a0a0#794747#4e2020#111111
Open in the makerOriginal sRGB in the maker
Aa — the quick brown fox
black text · worst 1.11:1 · fails
white 1.07 failsblack 1.11 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.

sRGB100%
OKLab100%
OKLCH100%

Report

  • white ink: worst 1.07:1 at 0% (fails AA); black ink: worst 1.11:1 at 100% (fails AA) → use black 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: ~8px bands at 1440px — add grain 17 (≈2% soft-light noise) or shorten the ramp.

Export

css
.gradient {
  background-image: linear-gradient(90deg, #f7f7f7 0%, #f3f1f1 1.79%, #eeeaea 3.57%, #eae4e4 5.36%, #e5dedd 7.14%, #e1d7d7 8.93%, #dcd1d1 10.71%, #d8cbcb 12.5%, #d3c5c4 14.29%, #cfbebe 16.07%, #cbb8b8 17.86%, #c6b2b2 19.64%, #c2acac 21.43%, #bda6a6 23.21%, #b9a0a0 25%, #b49999 26.79%, #b09393 28.57%, #ab8c8c 30.36%, #a78685 32.14%, #a27f7f 33.93%, #9e7978 35.71%, #997372 37.5%, #956c6c 39.29%, #906665 41.07%, #8c605f 42.86%, #875959 44.64%, #825353 46.43%, #7e4d4d 48.21%, #794747 50%, #764444 51.79%, #734141 53.57%, #703e3e 55.36%, #6c3c3b 57.14%, #693939 58.93%, #663636 60.71%, #633333 62.5%, #603030 64.29%, #5d2e2d 66.07%, #5a2b2b 67.86%, #572828 69.64%, #542525 71.43%, #512323 73.21%, #4e2020 75%, #491f1f 76.79%, #451e1e 78.57%, #401d1d 80.36%, #3c1c1c 82.14%, #381b1b 83.93%, #331a1a 85.71%, #2f1919 87.5%, #2b1818 89.29%, #261716 91.07%, #221615 92.86%, #1e1514 94.64%, #1a1413 96.43%, #151212 98.21%, #111111 100%);
  background-image: linear-gradient(90deg in oklab, #f7f7f7 0%, #b9a0a0 25%, #794747 50%, #4e2020 75%, #111111 100%);
}
tailwind v4
bg-[linear-gradient(90deg_in_oklab,#f7f7f7_0%,#b9a0a0_25%,#794747_50%,#4e2020_75%,#111111_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="0" y1="300" x2="1440" y2="300"><stop offset="0%" stop-color="#f7f7f7"/><stop offset="1.79%" stop-color="#f3f1f1"/><stop offset="3.57%" stop-color="#eeeaea"/><stop offset="5.36%" stop-color="#eae4e4"/><stop offset="7.14%" stop-color="#e5dedd"/><stop offset="8.93%" stop-color="#e1d7d7"/><stop offset="10.71%" stop-color="#dcd1d1"/><stop offset="12.5%" stop-color="#d8cbcb"/><stop offset="14.29%" stop-color="#d3c5c4"/><stop offset="16.07%" stop-color="#cfbebe"/><stop offset="17.86%" stop-color="#cbb8b8"/><stop offset="19.64%" stop-color="#c6b2b2"/><stop offset="21.43%" stop-color="#c2acac"/><stop offset="23.21%" stop-color="#bda6a6"/><stop offset="25%" stop-color="#b9a0a0"/><stop offset="26.79%" stop-color="#b49999"/><stop offset="28.57%" stop-color="#b09393"/><stop offset="30.36%" stop-color="#ab8c8c"/><stop offset="32.14%" stop-color="#a78685"/><stop offset="33.93%" stop-color="#a27f7f"/><stop offset="35.71%" stop-color="#9e7978"/><stop offset="37.5%" stop-color="#997372"/><stop offset="39.29%" stop-color="#956c6c"/><stop offset="41.07%" stop-color="#906665"/><stop offset="42.86%" stop-color="#8c605f"/><stop offset="44.64%" stop-color="#875959"/><stop offset="46.43%" stop-color="#825353"/><stop offset="48.21%" stop-color="#7e4d4d"/><stop offset="50%" stop-color="#794747"/><stop offset="51.79%" stop-color="#764444"/><stop offset="53.57%" stop-color="#734141"/><stop offset="55.36%" stop-color="#703e3e"/><stop offset="57.14%" stop-color="#6c3c3b"/><stop offset="58.93%" stop-color="#693939"/><stop offset="60.71%" stop-color="#663636"/><stop offset="62.5%" stop-color="#633333"/><stop offset="64.29%" stop-color="#603030"/><stop offset="66.07%" stop-color="#5d2e2d"/><stop offset="67.86%" stop-color="#5a2b2b"/><stop offset="69.64%" stop-color="#572828"/><stop offset="71.43%" stop-color="#542525"/><stop offset="73.21%" stop-color="#512323"/><stop offset="75%" stop-color="#4e2020"/><stop offset="76.79%" stop-color="#491f1f"/><stop offset="78.57%" stop-color="#451e1e"/><stop offset="80.36%" stop-color="#401d1d"/><stop offset="82.14%" stop-color="#3c1c1c"/><stop offset="83.93%" stop-color="#381b1b"/><stop offset="85.71%" stop-color="#331a1a"/><stop offset="87.5%" stop-color="#2f1919"/><stop offset="89.29%" stop-color="#2b1818"/><stop offset="91.07%" stop-color="#261716"/><stop offset="92.86%" stop-color="#221615"/><stop offset="94.64%" stop-color="#1e1514"/><stop offset="96.43%" stop-color="#1a1413"/><stop offset="98.21%" stop-color="#151212"/><stop offset="100%" stop-color="#111111"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
dtcg
{
  "whinehouse": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.969,
            0.969,
            0.969
          ],
          "hex": "#f7f7f7"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.725,
            0.627,
            0.627
          ],
          "hex": "#b9a0a0"
        },
        "position": 0.25
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.475,
            0.278,
            0.278
          ],
          "hex": "#794747"
        },
        "position": 0.5
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.306,
            0.125,
            0.125
          ],
          "hex": "#4e2020"
        },
        "position": 0.75
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.067,
            0.067,
            0.067
          ],
          "hex": "#111111"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(90deg in oklab, #f7f7f7 0%, #b9a0a0 25%, #794747 50%, #4e2020 75%, #111111 100%)",
        "interpolation": "oklab",
        "angle": 90,
        "name": "Whinehouse",
        "contrast": {
          "white": {
            "ratio": 1.071,
            "at": 0,
            "passesAA": false,
            "passesAALarge": false
          },
          "black": {
            "ratio": 1.112,
            "at": 1,
            "passesAA": false,
            "passesAALarge": false
          },
          "suggestedInk": "#000000"
        }
      }
    },
    "$description": "Whinehouse (uiGradients, MIT), rendered in OKLab."
  }
}

Tagged

Red gradientsWarmMuted

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 Whinehouse gradient (#f7f7f7, #b9a0a0, #794747, #4e2020, #111111), 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 uiGradients (MIT) — licences