brandsweets
Directions

Cobalttriadic

A rich blue primary on cool slate, with a red accent — editorial by request; an artist's-wheel triad brings energy without breaking the value structure.

primary h 263 · L 0.51 · k 0.28 · secondary h 104 · L 0.62 · accent h 15 · L 0.39 · triadic on the ryb wheel · cool slate neutral

Primary

light · 1 – 12

dark · 1 – 12

Secondary

light · 1 – 12

dark · 1 – 12

Accent

light · 1 – 12

dark · 1 – 12

Neutral

light · 1 – 12

dark · 1 – 12

SemanticValidator: pass · greyscale ΔL 0.11 · CVD ΔE 0.12
AcmeProductPricingDocsGet started

NewSpring release · what changed →

Ship the brand your agents already know.

One structured brand document, served to every session. Colours, type and voice — no re-briefing.

Start freeSee a demoRead the docs →
Extract

From a domain to a brand doc in a minute.

Direct

Named colour directions, not random swatches.

Serve

Every agent reads the same source of truth. MCP →

Light · surface #fafbff

AcmeProductPricingDocsGet started

NewSpring release · what changed →

Ship the brand your agents already know.

One structured brand document, served to every session. Colours, type and voice — no re-briefing.

Start freeSee a demoRead the docs →
Extract

From a domain to a brand doc in a minute.

Direct

Named colour directions, not random swatches.

Serve

Every agent reads the same source of truth. MCP →

Dark · surface #0b0b16

Export

Surface tokens plus all 12-step scales, light and dark. Semantic colours included.

Apply this to a brand → sign in

/* Cobalt — A rich blue primary on cool slate, with a red accent — editorial by request; an artist's-wheel triad brings energy without breaking the value structure. */
:root {
  color-scheme: light dark;
  --color-background: #fafbff;
  --color-subtle: #f6f6fc;
  --color-elevated: #eeeef6;
  --color-border: #c9cad8;
  --color-border-strong: #b6b7c8;
  --color-text: #252536;
  --color-text-muted: #67687f;
  --color-primary: #506793;
  --color-primary-hover: #4a5d83;
  --color-primary-ink: #ffffff;
  --color-primary-text: #475268;
  --color-primary-subtle: #ebeced;
  --color-secondary: #87877b;
  --color-secondary-hover: #7d7c72;
  --color-secondary-ink: #ffffff;
  --color-secondary-text: #6e6d68;
  --color-secondary-subtle: #f0f0ec;
  --color-accent: #5f3a3d;
  --color-accent-hover: #523335;
  --color-accent-ink: #ffffff;
  --color-accent-text: #3f2d2e;
  --color-accent-subtle: #eae6e6;
  --color-success: #3a7059;
  --color-success-text: #3f544a;
  --color-warning: #9f832d;
  --color-warning-text: #766d54;
  --color-danger: #6e1b1b;
  --color-danger-text: #3c2220;
  --color-info: #467eda;
  --color-info-text: #516b96;
  --color-primary-1: #fafafb;
  --color-primary-2: #f5f5f6;
  --color-primary-3: #ebeced;
  --color-primary-4: #dddfe3;
  --color-primary-5: #cdd1d8;
  --color-primary-6: #b9bfcb;
  --color-primary-7: #9ea8bc;
  --color-primary-8: #7c8caa;
  --color-primary-9: #506793;
  --color-primary-10: #4a5d83;
  --color-primary-11: #475268;
  --color-primary-12: #353b48;
  --color-secondary-1: #fbfbfb;
  --color-secondary-2: #f7f7f6;
  --color-secondary-3: #f0f0ec;
  --color-secondary-4: #e7e7de;
  --color-secondary-5: #dddcd2;
  --color-secondary-6: #cfcfc4;
  --color-secondary-7: #bebdb1;
  --color-secondary-8: #a8a79a;
  --color-secondary-9: #87877b;
  --color-secondary-10: #7d7c72;
  --color-secondary-11: #6e6d68;
  --color-secondary-12: #3e3e3c;
  --color-accent-1: #fafafa;
  --color-accent-2: #f4f3f3;
  --color-accent-3: #eae6e6;
  --color-accent-4: #ddd4d5;
  --color-accent-5: #d1c0c1;
  --color-accent-6: #c2a6a8;
  --color-accent-7: #b38386;
  --color-accent-8: #8f5e62;
  --color-accent-9: #5f3a3d;
  --color-accent-10: #523335;
  --color-accent-11: #3f2d2e;
  --color-accent-12: #251c1d;
  --color-neutral-1: #fafbff;
  --color-neutral-2: #f6f6fc;
  --color-neutral-3: #eeeef6;
  --color-neutral-4: #e3e4ed;
  --color-neutral-5: #d8d9e4;
  --color-neutral-6: #c9cad8;
  --color-neutral-7: #b6b7c8;
  --color-neutral-8: #9e9fb3;
  --color-neutral-9: #7d7e94;
  --color-neutral-10: #73748a;
  --color-neutral-11: #67687f;
  --color-neutral-12: #252536;
  --color-success-1: #fafbfa;
  --color-success-2: #f2f7f4;
  --color-success-3: #dff0e8;
  --color-success-4: #c2e8d6;
  --color-success-5: #a9dec5;
  --color-success-6: #92ccb2;
  --color-success-7: #76b599;
  --color-success-8: #58977c;
  --color-success-9: #3a7059;
  --color-success-10: #366451;
  --color-success-11: #3f544a;
  --color-success-12: #2f3d36;
  --color-warning-1: #fbfbfa;
  --color-warning-2: #f9f7f3;
  --color-warning-3: #f4f0e3;
  --color-warning-4: #f0e6cb;
  --color-warning-5: #ecdbab;
  --color-warning-6: #e6cc83;
  --color-warning-7: #d7ba67;
  --color-warning-8: #c2a34a;
  --color-warning-9: #9f832d;
  --color-warning-10: #927930;
  --color-warning-11: #766d54;
  --color-warning-12: #433e2f;
  --color-danger-1: #fafaf9;
  --color-danger-2: #f5f2f2;
  --color-danger-3: #ede3e2;
  --color-danger-4: #e5cfcc;
  --color-danger-5: #deb7b3;
  --color-danger-6: #da958f;
  --color-danger-7: #d95f5a;
  --color-danger-8: #ab3a38;
  --color-danger-9: #6e1b1b;
  --color-danger-10: #5d1818;
  --color-danger-11: #3c2220;
  --color-danger-12: #231210;
  --color-info-1: #fbfbfb;
  --color-info-2: #f6f7f8;
  --color-info-3: #edeff3;
  --color-info-4: #e0e5ed;
  --color-info-5: #d2dae8;
  --color-info-6: #becce3;
  --color-info-7: #a2bae0;
  --color-info-8: #7ea2dd;
  --color-info-9: #467eda;
  --color-info-10: #3c73ce;
  --color-info-11: #516b96;
  --color-info-12: #303e57;
}
[data-theme="dark"] {
  --color-background: #0b0b16;
  --color-subtle: #0e0e1a;
  --color-elevated: #141421;
  --color-border: #323245;
  --color-border-strong: #434459;
  --color-text: #e3e4ed;
  --color-text-muted: #b1b1c3;
  --color-primary: #506793;
  --color-primary-hover: #5d7199;
  --color-primary-ink: #ffffff;
  --color-primary-text: #acb3c0;
  --color-primary-subtle: #111318;
  --color-secondary: #b1b0a2;
  --color-secondary-hover: #bcbbad;
  --color-secondary-ink: #000000;
  --color-secondary-text: #c8c8be;
  --color-secondary-subtle: #1a1a19;
  --color-accent: #b8757a;
  --color-accent-hover: #bc8487;
  --color-accent-ink: #ffffff;
  --color-accent-text: #c5adae;
  --color-accent-subtle: #1b1515;
  --color-success: #3a7059;
  --color-success-text: #8fbca7;
  --color-warning: #9f832d;
  --color-warning-text: #c0b28b;
  --color-danger: #b13031;
  --color-danger-text: #d1a9a4;
  --color-info: #467eda;
  --color-info-text: #a3b4ce;
  --color-primary-1: #0b0c0d;
  --color-primary-2: #0d0e11;
  --color-primary-3: #111318;
  --color-primary-4: #161a20;
  --color-primary-5: #1c212b;
  --color-primary-6: #242b39;
  --color-primary-7: #2e384d;
  --color-primary-8: #3b4a68;
  --color-primary-9: #506793;
  --color-primary-10: #5d7199;
  --color-primary-11: #acb3c0;
  --color-primary-12: #e3e4e8;
  --color-secondary-1: #0d0d0d;
  --color-secondary-2: #111111;
  --color-secondary-3: #1a1a19;
  --color-secondary-4: #262624;
  --color-secondary-5: #343331;
  --color-secondary-6: #464642;
  --color-secondary-7: #61605a;
  --color-secondary-8: #84847a;
  --color-secondary-9: #b1b0a2;
  --color-secondary-10: #bcbbad;
  --color-secondary-11: #c8c8be;
  --color-secondary-12: #e5e5dc;
  --color-accent-1: #0e0c0c;
  --color-accent-2: #120f0f;
  --color-accent-3: #1b1515;
  --color-accent-4: #261d1d;
  --color-accent-5: #342627;
  --color-accent-6: #463233;
  --color-accent-7: #614244;
  --color-accent-8: #85585b;
  --color-accent-9: #b8757a;
  --color-accent-10: #bc8487;
  --color-accent-11: #c5adae;
  --color-accent-12: #e8e3e3;
  --color-neutral-1: #0b0b16;
  --color-neutral-2: #0e0e1a;
  --color-neutral-3: #141421;
  --color-neutral-4: #1c1c2b;
  --color-neutral-5: #252536;
  --color-neutral-6: #323245;
  --color-neutral-7: #434459;
  --color-neutral-8: #5b5c72;
  --color-neutral-9: #7d7e94;
  --color-neutral-10: #88899e;
  --color-neutral-11: #b1b1c3;
  --color-neutral-12: #e3e4ed;
  --color-success-1: #0b0c0c;
  --color-success-2: #0c0f0e;
  --color-success-3: #0f1412;
  --color-success-4: #131b17;
  --color-success-5: #18231e;
  --color-success-6: #1e2d26;
  --color-success-7: #243c32;
  --color-success-8: #2c5041;
  --color-success-9: #3a7059;
  --color-success-10: #437a63;
  --color-success-11: #8fbca7;
  --color-success-12: #ccecdc;
  --color-warning-1: #0d0c0b;
  --color-warning-2: #11100c;
  --color-warning-3: #181610;
  --color-warning-4: #221f15;
  --color-warning-5: #2e2819;
  --color-warning-6: #3e361f;
  --color-warning-7: #554824;
  --color-warning-8: #746129;
  --color-warning-9: #9f832d;
  --color-warning-10: #aa8d39;
  --color-warning-11: #c0b28b;
  --color-warning-12: #ede4c9;
  --color-danger-1: #0f0b0b;
  --color-danger-2: #130c0c;
  --color-danger-3: #1c0f0e;
  --color-danger-4: #261412;
  --color-danger-5: #331816;
  --color-danger-6: #441d1b;
  --color-danger-7: #5c2220;
  --color-danger-8: #7d2826;
  --color-danger-9: #b13031;
  --color-danger-10: #be3b3a;
  --color-danger-11: #d1a9a4;
  --color-danger-12: #eee2e0;
  --color-info-1: #0b0c0f;
  --color-info-2: #0d1014;
  --color-info-3: #10161f;
  --color-info-4: #151e2c;
  --color-info-5: #1b283d;
  --color-info-6: #223453;
  --color-info-7: #294575;
  --color-info-8: #325ca3;
  --color-info-9: #467eda;
  --color-info-10: #5a8ad9;
  --color-info-11: #a3b4ce;
  --color-info-12: #dfe5ed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #0b0b16;
    --color-subtle: #0e0e1a;
    --color-elevated: #141421;
    --color-border: #323245;
    --color-border-strong: #434459;
    --color-text: #e3e4ed;
    --color-text-muted: #b1b1c3;
    --color-primary: #506793;
    --color-primary-hover: #5d7199;
    --color-primary-ink: #ffffff;
    --color-primary-text: #acb3c0;
    --color-primary-subtle: #111318;
    --color-secondary: #b1b0a2;
    --color-secondary-hover: #bcbbad;
    --color-secondary-ink: #000000;
    --color-secondary-text: #c8c8be;
    --color-secondary-subtle: #1a1a19;
    --color-accent: #b8757a;
    --color-accent-hover: #bc8487;
    --color-accent-ink: #ffffff;
    --color-accent-text: #c5adae;
    --color-accent-subtle: #1b1515;
    --color-success: #3a7059;
    --color-success-text: #8fbca7;
    --color-warning: #9f832d;
    --color-warning-text: #c0b28b;
    --color-danger: #b13031;
    --color-danger-text: #d1a9a4;
    --color-info: #467eda;
    --color-info-text: #a3b4ce;
    --color-primary-1: #0b0c0d;
    --color-primary-2: #0d0e11;
    --color-primary-3: #111318;
    --color-primary-4: #161a20;
    --color-primary-5: #1c212b;
    --color-primary-6: #242b39;
    --color-primary-7: #2e384d;
    --color-primary-8: #3b4a68;
    --color-primary-9: #506793;
    --color-primary-10: #5d7199;
    --color-primary-11: #acb3c0;
    --color-primary-12: #e3e4e8;
    --color-secondary-1: #0d0d0d;
    --color-secondary-2: #111111;
    --color-secondary-3: #1a1a19;
    --color-secondary-4: #262624;
    --color-secondary-5: #343331;
    --color-secondary-6: #464642;
    --color-secondary-7: #61605a;
    --color-secondary-8: #84847a;
    --color-secondary-9: #b1b0a2;
    --color-secondary-10: #bcbbad;
    --color-secondary-11: #c8c8be;
    --color-secondary-12: #e5e5dc;
    --color-accent-1: #0e0c0c;
    --color-accent-2: #120f0f;
    --color-accent-3: #1b1515;
    --color-accent-4: #261d1d;
    --color-accent-5: #342627;
    --color-accent-6: #463233;
    --color-accent-7: #614244;
    --color-accent-8: #85585b;
    --color-accent-9: #b8757a;
    --color-accent-10: #bc8487;
    --color-accent-11: #c5adae;
    --color-accent-12: #e8e3e3;
    --color-neutral-1: #0b0b16;
    --color-neutral-2: #0e0e1a;
    --color-neutral-3: #141421;
    --color-neutral-4: #1c1c2b;
    --color-neutral-5: #252536;
    --color-neutral-6: #323245;
    --color-neutral-7: #434459;
    --color-neutral-8: #5b5c72;
    --color-neutral-9: #7d7e94;
    --color-neutral-10: #88899e;
    --color-neutral-11: #b1b1c3;
    --color-neutral-12: #e3e4ed;
    --color-success-1: #0b0c0c;
    --color-success-2: #0c0f0e;
    --color-success-3: #0f1412;
    --color-success-4: #131b17;
    --color-success-5: #18231e;
    --color-success-6: #1e2d26;
    --color-success-7: #243c32;
    --color-success-8: #2c5041;
    --color-success-9: #3a7059;
    --color-success-10: #437a63;
    --color-success-11: #8fbca7;
    --color-success-12: #ccecdc;
    --color-warning-1: #0d0c0b;
    --color-warning-2: #11100c;
    --color-warning-3: #181610;
    --color-warning-4: #221f15;
    --color-warning-5: #2e2819;
    --color-warning-6: #3e361f;
    --color-warning-7: #554824;
    --color-warning-8: #746129;
    --color-warning-9: #9f832d;
    --color-warning-10: #aa8d39;
    --color-warning-11: #c0b28b;
    --color-warning-12: #ede4c9;
    --color-danger-1: #0f0b0b;
    --color-danger-2: #130c0c;
    --color-danger-3: #1c0f0e;
    --color-danger-4: #261412;
    --color-danger-5: #331816;
    --color-danger-6: #441d1b;
    --color-danger-7: #5c2220;
    --color-danger-8: #7d2826;
    --color-danger-9: #b13031;
    --color-danger-10: #be3b3a;
    --color-danger-11: #d1a9a4;
    --color-danger-12: #eee2e0;
    --color-info-1: #0b0c0f;
    --color-info-2: #0d1014;
    --color-info-3: #10161f;
    --color-info-4: #151e2c;
    --color-info-5: #1b283d;
    --color-info-6: #223453;
    --color-info-7: #294575;
    --color-info-8: #325ca3;
    --color-info-9: #467eda;
    --color-info-10: #5a8ad9;
    --color-info-11: #a3b4ce;
    --color-info-12: #dfe5ed;
  }
}
mcpConnect your agent to the color tools
live endpoint

Point any MCP client at the shared colors endpoint and your agent gets the same engine as this page — direct_palette, edit_direction, check_palette, check_contrast — read-only, no key. Every direction it proposes comes with a /colors/d/… link: open it, lock what you like, paste the link back, and the agent edits rather than re-rolls.

endpointhttps://mcp.brandsweets.com/colors/mcp
claude mcp add --transport http brandsweets-colors https://mcp.brandsweets.com/colors/mcp
try this prompt

›direct 3 colour directions for a editorial brand and hand me the URLs

this direction, as a URL

https://brandsweets.com/colors/d/eyJ2IjoyLCJzIjpbMjQ4LjI3MSwwLjM2NCwwLjI4MiwwLDAsImVkaXRvcmlhbCIsMCwwLDBdLCJyIjpbMiw0LDEsWzI2My4yNzEsMTA0LjIyLDE0Ljc1OV0sWzAuNTE0LDAuNjIsMC4zOTRdLFswLjI4MiwwLjEyNywwLjMzMl0sMCwxXSwiTCI6W119

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