brandsweets
Directions

Harboranalogous

A rich sky primary on cool slate, with an indigo accent — editorial by request; the accent stays in the family, so the system feels tonal and calm.

primary h 233 · L 0.51 · k 0.28 · secondary h 200 · L 0.62 · accent h 268 · L 0.39 · analogous on the rgb 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.10 · CVD ΔE 0.10
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 #f8fbff

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 #060d16

Export

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

Apply this to a brand → sign in

/* Harbor — A rich sky primary on cool slate, with an indigo accent — editorial by request; the accent stays in the family, so the system feels tonal and calm. */
:root {
  color-scheme: light dark;
  --color-background: #f8fbff;
  --color-subtle: #f3f7fd;
  --color-elevated: #eaf0f6;
  --color-border: #c3ccd8;
  --color-border-strong: #aebac8;
  --color-text: #1d2836;
  --color-text-muted: #5c6c7f;
  --color-primary: #576b76;
  --color-primary-hover: #4f606a;
  --color-primary-ink: #ffffff;
  --color-primary-text: #4a545a;
  --color-primary-subtle: #e9eced;
  --color-secondary: #7c898a;
  --color-secondary-hover: #737e7f;
  --color-secondary-ink: #ffffff;
  --color-secondary-text: #686e6f;
  --color-secondary-subtle: #eef0f0;
  --color-accent: #324375;
  --color-accent-hover: #2c3a64;
  --color-accent-ink: #ffffff;
  --color-accent-text: #293248;
  --color-accent-subtle: #e6e7ea;
  --color-success: #3a7059;
  --color-success-text: #3f544a;
  --color-warning: #9f832d;
  --color-warning-text: #766d54;
  --color-danger: #6e1b1b;
  --color-danger-text: #3c2220;
  --color-info: #4487b4;
  --color-info-text: #546e81;
  --color-primary-1: #fafbfb;
  --color-primary-2: #f5f6f6;
  --color-primary-3: #e9eced;
  --color-primary-4: #dae0e3;
  --color-primary-5: #c9d3d8;
  --color-primary-6: #b2c2cb;
  --color-primary-7: #94acba;
  --color-primary-8: #788f9d;
  --color-primary-9: #576b76;
  --color-primary-10: #4f606a;
  --color-primary-11: #4a545a;
  --color-primary-12: #373d40;
  --color-secondary-1: #fbfbfb;
  --color-secondary-2: #f7f7f7;
  --color-secondary-3: #eef0f0;
  --color-secondary-4: #e2e7e8;
  --color-secondary-5: #d4dede;
  --color-secondary-6: #c5d1d1;
  --color-secondary-7: #b2bfc0;
  --color-secondary-8: #9ba9aa;
  --color-secondary-9: #7c898a;
  --color-secondary-10: #737e7f;
  --color-secondary-11: #686e6f;
  --color-secondary-12: #3c3e3f;
  --color-accent-1: #fafafa;
  --color-accent-2: #f3f3f4;
  --color-accent-3: #e6e7ea;
  --color-accent-4: #d4d7dd;
  --color-accent-5: #c0c5d0;
  --color-accent-6: #a7aec0;
  --color-accent-7: #8591af;
  --color-accent-8: #5b6c9b;
  --color-accent-9: #324375;
  --color-accent-10: #2c3a64;
  --color-accent-11: #293248;
  --color-accent-12: #1a1f2b;
  --color-neutral-1: #f8fbff;
  --color-neutral-2: #f3f7fd;
  --color-neutral-3: #eaf0f6;
  --color-neutral-4: #dfe6ed;
  --color-neutral-5: #d3dae4;
  --color-neutral-6: #c3ccd8;
  --color-neutral-7: #aebac8;
  --color-neutral-8: #95a2b3;
  --color-neutral-9: #738294;
  --color-neutral-10: #68778a;
  --color-neutral-11: #5c6c7f;
  --color-neutral-12: #1d2836;
  --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: #ebf0f3;
  --color-info-4: #dde6ed;
  --color-info-5: #ccdce8;
  --color-info-6: #b5cfe3;
  --color-info-7: #92bfe0;
  --color-info-8: #61a9da;
  --color-info-9: #4487b4;
  --color-info-10: #427ca3;
  --color-info-11: #546e81;
  --color-info-12: #313f4a;
}
[data-theme="dark"] {
  --color-background: #060d16;
  --color-subtle: #08101a;
  --color-elevated: #0d1621;
  --color-border: #283545;
  --color-border-strong: #394759;
  --color-text: #dee5ed;
  --color-text-muted: #a8b4c2;
  --color-primary: #576b76;
  --color-primary-hover: #607581;
  --color-primary-ink: #ffffff;
  --color-primary-text: #a3b5bf;
  --color-primary-subtle: #121415;
  --color-secondary: #a3b3b4;
  --color-secondary-hover: #aebebf;
  --color-secondary-ink: #000000;
  --color-secondary-text: #bfc9ca;
  --color-secondary-subtle: #191a1a;
  --color-accent: #7a89b3;
  --color-accent-hover: #8694b8;
  --color-accent-ink: #ffffff;
  --color-accent-text: #acb3c2;
  --color-accent-subtle: #13161e;
  --color-success: #3a7059;
  --color-success-text: #8fbca7;
  --color-warning: #9f832d;
  --color-warning-text: #c0b28b;
  --color-danger: #b13031;
  --color-danger-text: #d1a9a4;
  --color-info: #4487b4;
  --color-info-text: #97b7cd;
  --color-primary-1: #0c0c0c;
  --color-primary-2: #0e0f0f;
  --color-primary-3: #121415;
  --color-primary-4: #171a1c;
  --color-primary-5: #1d2224;
  --color-primary-6: #262c30;
  --color-primary-7: #313a3f;
  --color-primary-8: #3f4d55;
  --color-primary-9: #576b76;
  --color-primary-10: #607581;
  --color-primary-11: #a3b5bf;
  --color-primary-12: #e0e5e7;
  --color-secondary-1: #0d0d0d;
  --color-secondary-2: #111111;
  --color-secondary-3: #191a1a;
  --color-secondary-4: #242626;
  --color-secondary-5: #313434;
  --color-secondary-6: #424747;
  --color-secondary-7: #5a6162;
  --color-secondary-8: #7a8686;
  --color-secondary-9: #a3b3b4;
  --color-secondary-10: #aebebf;
  --color-secondary-11: #bfc9ca;
  --color-secondary-12: #e0e6e6;
  --color-accent-1: #0c0c0e;
  --color-accent-2: #0e1014;
  --color-accent-3: #13161e;
  --color-accent-4: #1b1f2b;
  --color-accent-5: #23293b;
  --color-accent-6: #2d3752;
  --color-accent-7: #3b4a73;
  --color-accent-8: #526495;
  --color-accent-9: #7a89b3;
  --color-accent-10: #8694b8;
  --color-accent-11: #acb3c2;
  --color-accent-12: #e3e4e8;
  --color-neutral-1: #060d16;
  --color-neutral-2: #08101a;
  --color-neutral-3: #0d1621;
  --color-neutral-4: #141f2b;
  --color-neutral-5: #1d2836;
  --color-neutral-6: #283545;
  --color-neutral-7: #394759;
  --color-neutral-8: #506072;
  --color-neutral-9: #738294;
  --color-neutral-10: #7d8c9e;
  --color-neutral-11: #a8b4c2;
  --color-neutral-12: #dee5ed;
  --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: #0b0d0e;
  --color-info-2: #0d1012;
  --color-info-3: #11161a;
  --color-info-4: #171f25;
  --color-info-5: #1d2932;
  --color-info-6: #243744;
  --color-info-7: #2c4a5e;
  --color-info-8: #376382;
  --color-info-9: #4487b4;
  --color-info-10: #4f92bf;
  --color-info-11: #97b7cd;
  --color-info-12: #dce6ed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #060d16;
    --color-subtle: #08101a;
    --color-elevated: #0d1621;
    --color-border: #283545;
    --color-border-strong: #394759;
    --color-text: #dee5ed;
    --color-text-muted: #a8b4c2;
    --color-primary: #576b76;
    --color-primary-hover: #607581;
    --color-primary-ink: #ffffff;
    --color-primary-text: #a3b5bf;
    --color-primary-subtle: #121415;
    --color-secondary: #a3b3b4;
    --color-secondary-hover: #aebebf;
    --color-secondary-ink: #000000;
    --color-secondary-text: #bfc9ca;
    --color-secondary-subtle: #191a1a;
    --color-accent: #7a89b3;
    --color-accent-hover: #8694b8;
    --color-accent-ink: #ffffff;
    --color-accent-text: #acb3c2;
    --color-accent-subtle: #13161e;
    --color-success: #3a7059;
    --color-success-text: #8fbca7;
    --color-warning: #9f832d;
    --color-warning-text: #c0b28b;
    --color-danger: #b13031;
    --color-danger-text: #d1a9a4;
    --color-info: #4487b4;
    --color-info-text: #97b7cd;
    --color-primary-1: #0c0c0c;
    --color-primary-2: #0e0f0f;
    --color-primary-3: #121415;
    --color-primary-4: #171a1c;
    --color-primary-5: #1d2224;
    --color-primary-6: #262c30;
    --color-primary-7: #313a3f;
    --color-primary-8: #3f4d55;
    --color-primary-9: #576b76;
    --color-primary-10: #607581;
    --color-primary-11: #a3b5bf;
    --color-primary-12: #e0e5e7;
    --color-secondary-1: #0d0d0d;
    --color-secondary-2: #111111;
    --color-secondary-3: #191a1a;
    --color-secondary-4: #242626;
    --color-secondary-5: #313434;
    --color-secondary-6: #424747;
    --color-secondary-7: #5a6162;
    --color-secondary-8: #7a8686;
    --color-secondary-9: #a3b3b4;
    --color-secondary-10: #aebebf;
    --color-secondary-11: #bfc9ca;
    --color-secondary-12: #e0e6e6;
    --color-accent-1: #0c0c0e;
    --color-accent-2: #0e1014;
    --color-accent-3: #13161e;
    --color-accent-4: #1b1f2b;
    --color-accent-5: #23293b;
    --color-accent-6: #2d3752;
    --color-accent-7: #3b4a73;
    --color-accent-8: #526495;
    --color-accent-9: #7a89b3;
    --color-accent-10: #8694b8;
    --color-accent-11: #acb3c2;
    --color-accent-12: #e3e4e8;
    --color-neutral-1: #060d16;
    --color-neutral-2: #08101a;
    --color-neutral-3: #0d1621;
    --color-neutral-4: #141f2b;
    --color-neutral-5: #1d2836;
    --color-neutral-6: #283545;
    --color-neutral-7: #394759;
    --color-neutral-8: #506072;
    --color-neutral-9: #738294;
    --color-neutral-10: #7d8c9e;
    --color-neutral-11: #a8b4c2;
    --color-neutral-12: #dee5ed;
    --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: #0b0d0e;
    --color-info-2: #0d1012;
    --color-info-3: #11161a;
    --color-info-4: #171f25;
    --color-info-5: #1d2932;
    --color-info-6: #243744;
    --color-info-7: #2c4a5e;
    --color-info-8: #376382;
    --color-info-9: #4487b4;
    --color-info-10: #4f92bf;
    --color-info-11: #97b7cd;
    --color-info-12: #dce6ed;
  }
}
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/eyJ2IjoyLCJzIjpbMjQ4LjI3MSwwLjM2NCwwLjI4MiwwLDAsImVkaXRvcmlhbCIsMCwwLDBdLCJyIjpbMSwxLDAsWzIzMy4yNzEsMjAwLjI3MSwyNjguMjcxXSxbMC41MTQsMC42MiwwLjM5NF0sWzAuMjgyLDAuMTQxLDAuMzMyXSwwLDFdLCJMIjpbXX0

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