Sapphiresplit

A deep blue primary on warm sand, with an orange accent — editorial by request; the accent sits across the wheel, so it reads as a deliberate highlight.

primary h 248 · L 0.36 · k 0.28 · secondary h 218 · L 0.60 · accent h 38 · L 0.48 · split on the rgb wheel · warm sand 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.12 · CVD ΔE 0.10

Harmony

Brand name

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 #fbfaff

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 #0c0b16

Export

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

Apply this to a brand → sign in

/* Sapphire — A deep blue primary on warm sand, with an orange accent — editorial by request; the accent sits across the wheel, so it reads as a deliberate highlight. */
:root {
  color-scheme: light dark;
  --color-background: #fbfaff;
  --color-subtle: #f7f6fc;
  --color-elevated: #eeeef6;
  --color-border: #cac9d7;
  --color-border-strong: #b7b7c7;
  --color-text: #1f1e2d;
  --color-text-muted: #69677e;
  --color-primary: #33404c;
  --color-primary-hover: #2c3641;
  --color-primary-ink: #ffffff;
  --color-primary-text: #262c32;
  --color-primary-subtle: #e4e6e8;
  --color-secondary: #788488;
  --color-secondary-hover: #6f797c;
  --color-secondary-ink: #ffffff;
  --color-secondary-text: #676d6f;
  --color-secondary-subtle: #eeeff0;
  --color-accent: #7d5346;
  --color-accent-hover: #6f4b3f;
  --color-accent-ink: #ffffff;
  --color-accent-text: #59453e;
  --color-accent-subtle: #ede9e8;
  --color-success: #3a7059;
  --color-success-text: #3f544a;
  --color-warning: #9f832d;
  --color-warning-text: #766d54;
  --color-danger: #6e1b1b;
  --color-danger-text: #3c2220;
  --color-info: #4385c1;
  --color-info-text: #546d86;
  --color-primary-1: #fafafa;
  --color-primary-2: #f2f3f4;
  --color-primary-3: #e4e6e8;
  --color-primary-4: #d0d5da;
  --color-primary-5: #bbc3cc;
  --color-primary-6: #9eacba;
  --color-primary-7: #7a8fa3;
  --color-primary-8: #57697a;
  --color-primary-9: #33404c;
  --color-primary-10: #2c3641;
  --color-primary-11: #262c32;
  --color-primary-12: #16181b;
  --color-secondary-1: #fbfbfb;
  --color-secondary-2: #f7f7f7;
  --color-secondary-3: #eeeff0;
  --color-secondary-4: #e3e6e7;
  --color-secondary-5: #d6dbdd;
  --color-secondary-6: #c4ced0;
  --color-secondary-7: #afbcc0;
  --color-secondary-8: #97a5a9;
  --color-secondary-9: #788488;
  --color-secondary-10: #6f797c;
  --color-secondary-11: #676d6f;
  --color-secondary-12: #3c3e3f;
  --color-accent-1: #fbfafa;
  --color-accent-2: #f6f5f4;
  --color-accent-3: #ede9e8;
  --color-accent-4: #e3dbd8;
  --color-accent-5: #d9cac6;
  --color-accent-6: #ceb5ad;
  --color-accent-7: #c2978a;
  --color-accent-8: #a87666;
  --color-accent-9: #7d5346;
  --color-accent-10: #6f4b3f;
  --color-accent-11: #59453e;
  --color-accent-12: #3e322e;
  --color-neutral-1: #fbfaff;
  --color-neutral-2: #f7f6fc;
  --color-neutral-3: #eeeef6;
  --color-neutral-4: #e4e4ed;
  --color-neutral-5: #d9d8e4;
  --color-neutral-6: #cac9d7;
  --color-neutral-7: #b7b7c7;
  --color-neutral-8: #a09fb2;
  --color-neutral-9: #7f7d94;
  --color-neutral-10: #75738a;
  --color-neutral-11: #69677e;
  --color-neutral-12: #1f1e2d;
  --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: #eceff3;
  --color-info-4: #dfe6ed;
  --color-info-5: #cfdbe8;
  --color-info-6: #b9cee3;
  --color-info-7: #99bde0;
  --color-info-8: #6da6dd;
  --color-info-9: #4385c1;
  --color-info-10: #417aaf;
  --color-info-11: #546d86;
  --color-info-12: #313f4e;
}
[data-theme="dark"] {
  --color-background: #0c0b16;
  --color-subtle: #0f0e19;
  --color-elevated: #151421;
  --color-border: #333245;
  --color-border-strong: #454358;
  --color-text: #e4e4ed;
  --color-text-muted: #b2b1c2;
  --color-primary: #4f6274;
  --color-primary-hover: #596c7f;
  --color-primary-ink: #ffffff;
  --color-primary-text: #a8b4bf;
  --color-primary-subtle: #111315;
  --color-secondary: #9baaaf;
  --color-secondary-hover: #a5b5ba;
  --color-secondary-ink: #000000;
  --color-secondary-text: #b6c0c4;
  --color-secondary-subtle: #18191a;
  --color-accent: #aa7361;
  --color-accent-hover: #b57d6b;
  --color-accent-ink: #ffffff;
  --color-accent-text: #c7ada4;
  --color-accent-subtle: #191413;
  --color-success: #3a7059;
  --color-success-text: #8fbca7;
  --color-warning: #9f832d;
  --color-warning-text: #c0b28b;
  --color-danger: #b13031;
  --color-danger-text: #d1a9a4;
  --color-info: #4385c1;
  --color-info-text: #9db6ce;
  --color-primary-1: #0c0c0d;
  --color-primary-2: #0d0e0f;
  --color-primary-3: #111315;
  --color-primary-4: #16191c;
  --color-primary-5: #1b2024;
  --color-primary-6: #23292f;
  --color-primary-7: #2c353e;
  --color-primary-8: #394652;
  --color-primary-9: #4f6274;
  --color-primary-10: #596c7f;
  --color-primary-11: #a8b4bf;
  --color-primary-12: #e2e4e8;
  --color-secondary-1: #0d0d0d;
  --color-secondary-2: #101111;
  --color-secondary-3: #18191a;
  --color-secondary-4: #232425;
  --color-secondary-5: #2f3233;
  --color-secondary-6: #3f4445;
  --color-secondary-7: #565d5f;
  --color-secondary-8: #747f82;
  --color-secondary-9: #9baaaf;
  --color-secondary-10: #a5b5ba;
  --color-secondary-11: #b6c0c4;
  --color-secondary-12: #e1e5e6;
  --color-accent-1: #0d0c0c;
  --color-accent-2: #110f0e;
  --color-accent-3: #191413;
  --color-accent-4: #241c1a;
  --color-accent-5: #302521;
  --color-accent-6: #42312b;
  --color-accent-7: #5a4038;
  --color-accent-8: #7b5549;
  --color-accent-9: #aa7361;
  --color-accent-10: #b57d6b;
  --color-accent-11: #c7ada4;
  --color-accent-12: #e9e3e1;
  --color-neutral-1: #0c0b16;
  --color-neutral-2: #0f0e19;
  --color-neutral-3: #151421;
  --color-neutral-4: #1d1c2b;
  --color-neutral-5: #272536;
  --color-neutral-6: #333245;
  --color-neutral-7: #454358;
  --color-neutral-8: #5d5b72;
  --color-neutral-9: #7f7d94;
  --color-neutral-10: #89889e;
  --color-neutral-11: #b2b1c2;
  --color-neutral-12: #e4e4ed;
  --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: #11161b;
  --color-info-4: #161f27;
  --color-info-5: #1c2935;
  --color-info-6: #243648;
  --color-info-7: #2c4964;
  --color-info-8: #36628a;
  --color-info-9: #4385c1;
  --color-info-10: #4d90cd;
  --color-info-11: #9db6ce;
  --color-info-12: #dee5ec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #0c0b16;
    --color-subtle: #0f0e19;
    --color-elevated: #151421;
    --color-border: #333245;
    --color-border-strong: #454358;
    --color-text: #e4e4ed;
    --color-text-muted: #b2b1c2;
    --color-primary: #4f6274;
    --color-primary-hover: #596c7f;
    --color-primary-ink: #ffffff;
    --color-primary-text: #a8b4bf;
    --color-primary-subtle: #111315;
    --color-secondary: #9baaaf;
    --color-secondary-hover: #a5b5ba;
    --color-secondary-ink: #000000;
    --color-secondary-text: #b6c0c4;
    --color-secondary-subtle: #18191a;
    --color-accent: #aa7361;
    --color-accent-hover: #b57d6b;
    --color-accent-ink: #ffffff;
    --color-accent-text: #c7ada4;
    --color-accent-subtle: #191413;
    --color-success: #3a7059;
    --color-success-text: #8fbca7;
    --color-warning: #9f832d;
    --color-warning-text: #c0b28b;
    --color-danger: #b13031;
    --color-danger-text: #d1a9a4;
    --color-info: #4385c1;
    --color-info-text: #9db6ce;
    --color-primary-1: #0c0c0d;
    --color-primary-2: #0d0e0f;
    --color-primary-3: #111315;
    --color-primary-4: #16191c;
    --color-primary-5: #1b2024;
    --color-primary-6: #23292f;
    --color-primary-7: #2c353e;
    --color-primary-8: #394652;
    --color-primary-9: #4f6274;
    --color-primary-10: #596c7f;
    --color-primary-11: #a8b4bf;
    --color-primary-12: #e2e4e8;
    --color-secondary-1: #0d0d0d;
    --color-secondary-2: #101111;
    --color-secondary-3: #18191a;
    --color-secondary-4: #232425;
    --color-secondary-5: #2f3233;
    --color-secondary-6: #3f4445;
    --color-secondary-7: #565d5f;
    --color-secondary-8: #747f82;
    --color-secondary-9: #9baaaf;
    --color-secondary-10: #a5b5ba;
    --color-secondary-11: #b6c0c4;
    --color-secondary-12: #e1e5e6;
    --color-accent-1: #0d0c0c;
    --color-accent-2: #110f0e;
    --color-accent-3: #191413;
    --color-accent-4: #241c1a;
    --color-accent-5: #302521;
    --color-accent-6: #42312b;
    --color-accent-7: #5a4038;
    --color-accent-8: #7b5549;
    --color-accent-9: #aa7361;
    --color-accent-10: #b57d6b;
    --color-accent-11: #c7ada4;
    --color-accent-12: #e9e3e1;
    --color-neutral-1: #0c0b16;
    --color-neutral-2: #0f0e19;
    --color-neutral-3: #151421;
    --color-neutral-4: #1d1c2b;
    --color-neutral-5: #272536;
    --color-neutral-6: #333245;
    --color-neutral-7: #454358;
    --color-neutral-8: #5d5b72;
    --color-neutral-9: #7f7d94;
    --color-neutral-10: #89889e;
    --color-neutral-11: #b2b1c2;
    --color-neutral-12: #e4e4ed;
    --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: #11161b;
    --color-info-4: #161f27;
    --color-info-5: #1c2935;
    --color-info-6: #243648;
    --color-info-7: #2c4964;
    --color-info-8: #36628a;
    --color-info-9: #4385c1;
    --color-info-10: #4d90cd;
    --color-info-11: #9db6ce;
    --color-info-12: #dee5ec;
  }
}

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/eyJ2IjoyLCJzIjpbMjQ4LjI3MSwwLjM2NCwwLjI4MiwwLDAsImVkaXRvcmlhbCIsMCwwLDBdLCJyIjpbMCwzLDAsWzI0OC4yNzEsMjE4LjI3MSwzOC4yNzFdLFswLjM2NCwwLjYwNCwwLjQ4NF0sWzAuMjgyLDAuMTQxLDAuMzgyXSwxLDFdLCJMIjpbXX0

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