Brand colors

BrandSweets colors

BrandSweets's 8 brand colors as structured tokens — every role's hex with copy buttons, contrast pairs measured against the brand's own surface, and CSS / DTCG downloads. Ask your agent for a palette inspired by BrandSweets via the colors MCP.

Full brand page →brand infrastructure / developer tools

primarya4501c surfacefbf7ef surfaceMutedf1e8d8 text241c14 textMuted6b5d4c bordere7dcc9 dangerb23a2b success2f7d51

Role tokens

primary#a4501c · Caramel
surface#fbf7ef · Sugar Paper
surfaceMuted#f1e8d8 · Marzipan
text#241c14 · Cocoa Ink
textMuted#6b5d4c · Toffee Grey
border#e7dcc9 · Wafer
danger#b23a2b · Redcurrant
success#2f7d51 · Pistachio

Open in palette tool Contrast checker

Contrast pairs

Pair	Ratio	AA	AA large	AAA	Fix
Aaprimary on surface	5.25:1	pass	pass	fail	AAA: primary → #834016 (7.25:1)
AasurfaceMuted on surface	1.14:1	fail	fail	fail	AA: surfaceMuted → #8b6a32 (4.67:1)
Aatext on surface	15.71:1	pass	pass	pass	—
AatextMuted on surface	5.96:1	pass	pass	fail	AAA: textMuted → #5f5344 (7:1)
Aaborder on surface	1.27:1	fail	fail	fail	AA: border → #896e3e (4.5:1)
Aadanger on surface	5.56:1	pass	pass	fail	AAA: danger → #943124 (7.21:1)
Aasuccess on surface	4.71:1	pass	pass	fail	AAA: success → #235c3c (7.37:1)
Aatext on primary	2.99:1	fail	fail	fail	AA: text → #ede6de (4.54:1)

Measured against the brand's own surface where it has one; fixes move lightness only so they stay on-hue.

Download

The same tokens as CSS custom properties, a Tailwind theme block, and a W3C DTCG color group — or fetch tokens.json / brand.css for the full brand.

css · brandsweets-colors.css

:root {
  --color-primary: #a4501c;
  --color-surface: #fbf7ef;
  --color-surfaceMuted: #f1e8d8;
  --color-text: #241c14;
  --color-textMuted: #6b5d4c;
  --color-border: #e7dcc9;
  --color-danger: #b23a2b;
  --color-success: #2f7d51;
}

tailwind · tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#a4501c",
        surface: "#fbf7ef",
        surfaceMuted: "#f1e8d8",
        text: "#241c14",
        textMuted: "#6b5d4c",
        border: "#e7dcc9",
        danger: "#b23a2b",
        success: "#2f7d51",
      },
    },
  },
};

dtcg · brandsweets-colors.tokens.json

{
  "$description": "BrandSweets brand colors",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#a4501c"
    },
    "surface": {
      "$type": "color",
      "$value": "#fbf7ef"
    },
    "surfaceMuted": {
      "$type": "color",
      "$value": "#f1e8d8"
    },
    "text": {
      "$type": "color",
      "$value": "#241c14"
    },
    "textMuted": {
      "$type": "color",
      "$value": "#6b5d4c"
    },
    "border": {
      "$type": "color",
      "$value": "#e7dcc9"
    },
    "danger": {
      "$type": "color",
      "$value": "#b23a2b"
    },
    "success": {
      "$type": "color",
      "$value": "#2f7d51"
    }
  }
}

Similar brand palettes

Public brands whose primary sits closest on the hue wheel.

mcpConnect your agent — riff on BrandSweets

live endpoint

Point any MCP client at the shared colors endpoint and your agent gets the same engine as this page — generate_palette, check_contrast, analyze_color — read-only, no key. Every palette it proposes comes with a /palettes/new/… link: open it, lock what you like, paste the link back.

endpointhttps://mcp.brandsweets.com/colors/mcp

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

try this prompt

›build a palette inspired by BrandSweets for a brand infrastructure / developer tools startup — keep the feel, change the primary, and give me the /palettes/new link

tool url/palettes/new/a4501c-fbf7ef-f1e8d8-241c14-6b5d4c?lock=0

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