A color-system instrument · v0.5

Make color mean more.

One brand color in. A complete light-and-dark color system out: 28 role tokens, every contrast pair enforced, and status colors engineered to stay apart for color-blind eyes. This page is wearing one right now.

Play the paletteOpen the lab

24/24 pairs passstatic build

Drag the hue, type a hex or pick a color. Nothing leaves your browser.

  1. canvas#FBF5F7
  2. surface#FFFDFD
  3. raised#F1E9EC
  4. text#1F181B
  5. muted#6B6064
  6. border#918489
  7. primary#1F6F5C
  8. primary hover#06614E
  9. primary active#005444
  10. on primary#F5FCFA
  11. secondary#F08DB7
  12. on secondary#1F181B
  13. accent#9ADBFF
  14. on accent#1F181B
  15. focus#1F6F5C
  16. selection#F08DB7
  17. on selection#1F181B
  18. success#417B29
  19. success bg#E7F5E2
  20. warning#7E5400
  21. warning bg#FCEEDB
  22. danger#7F2021
  23. danger bg#FFEBE9
  24. info#24418D
  25. info bg#E9F0FF
  26. link#1F6F5C
  27. disabled bg#F1E9EC
  28. disabled fg#6B6064
The score 28 roles, each bar as tall as its lightness. Counterpoint · #1F6F5C

01

Play the palette.

Every key is a color and a note. Press one and the whole page takes the color you played, generated into a full accessible system between one note and the next. Or let this system play itself: each of its 28 roles becomes a note, with hue choosing the pitch, lightness the octave and colorfulness the touch. Every brand has its own tune.

Sound is synthesized in your browser, in D major pentatonic, so any keys you press together stay in harmony. With a key focused, the letters Z–B, A–G and Q–T play three octaves.

02

Five ways to hear one color.

The same brand, five structurally different systems. Anchored tints the whole structure; counterpoint answers it from across the wheel; tonal stays inside one hue; triad spreads the energy; temperature-split sets warm against cool. Wear one and the whole page changes key.

anchored
OverviewReportsBeta

Workspace

Quarterly review

Revenue is up 12% and two checks need attention. See details

ApproveLater
  • Synced
  • Expiring
  • Failed
  • Update

The brand hue tints the whole structure; one analogous support plane and a quiet complementary accent.

counterpoint
OverviewReportsBeta

Workspace

Quarterly review

Revenue is up 12% and two checks need attention. See details

ApproveLater
  • Synced
  • Expiring
  • Failed
  • Update

A cool, quiet structure lets a saturated complementary plane answer the brand action.

tonal
OverviewReportsBeta

Workspace

Quarterly review

Revenue is up 12% and two checks need attention. See details

ApproveLater
  • Synced
  • Expiring
  • Failed
  • Update

The brand family carries surfaces and planes; colorfulness is concentrated in one small spark.

triad
OverviewReportsBeta

Workspace

Quarterly review

Revenue is up 12% and two checks need attention. See details

ApproveLater
  • Synced
  • Expiring
  • Failed
  • Update

Three evenly spaced hue families with separate jobs; neutrals stay almost achromatic.

temperature split
OverviewReportsBeta

Workspace

Quarterly review

Revenue is up 12% and two checks need attention. See details

ApproveLater
  • Synced
  • Expiring
  • Failed
  • Update

The structure takes the temperature opposite to the brand, so the brand reads as the one warm (or cool) voice.

Why it exists

Most palettes are chosen for how they look in a swatch, then fail in a warning banner, a disabled button or dark mode. Huemantics designs the roles first.

03

Contrast is not a vibe.

Every system assigns 24 foreground/background pairs per mode and checks each against its WCAG 2.2 ratio before you ever see it. When a brand color cannot carry text, the generator moves it and tells you why. These are the live numbers for the system this page is wearing.

24 of 24 pass

  1. text on canvas 16.19:1 ≥ 4.5
  2. muted on canvas 5.60:1 ≥ 4.5
  3. link on canvas 5.59:1 ≥ 4.5
  4. focus on canvas 5.59:1 ≥ 3
  5. text on surface 17.20:1 ≥ 4.5
  6. muted on surface 5.95:1 ≥ 4.5
  7. link on surface 5.94:1 ≥ 4.5
  8. focus on surface 5.94:1 ≥ 3
  9. text on raised 14.61:1 ≥ 4.5
  10. muted on raised 5.06:1 ≥ 4.5
  11. link on raised 5.05:1 ≥ 4.5
  12. focus on raised 5.05:1 ≥ 3
  13. on primary on primary 5.79:1 ≥ 4.5
  14. on primary on primary hover 7.14:1 ≥ 4.5
  15. on primary on primary active 8.58:1 ≥ 4.5
  16. on secondary on secondary 7.64:1 ≥ 4.5
  17. on accent on accent 11.58:1 ≥ 4.5
  18. on selection on selection 7.64:1 ≥ 4.5
  19. success on success bg 4.54:1 ≥ 4.5
  20. warning on warning bg 5.83:1 ≥ 4.5
  21. danger on danger bg 8.59:1 ≥ 4.5
  22. info on info bg 8.29:1 ≥ 4.5
  23. border on surface 3.53:1 ≥ 3
  24. border on raised 3.00:1 ≥ 3

04

Seen by everyone.

About one in twelve men sees red and green differently. In the first generator, every system had at least one pair of status colors that collapsed together under simulation. Status colors are now searched jointly to stay apart. Below is the same interface through the Machado 2009 model, with the measured distance between each status pair.

100%of first-generation systems had a status collision under simulation

7.0%still do, and every one of them is disclosed with a fix

0.07ΔE OK flag threshold, about 3.5 just-noticeable differences

Typical
  • success/danger0.250
  • warning/danger0.130
  • success/warning0.130
  • info/success0.266
Protanopia
  • success/danger0.224
  • warning/danger0.133
  • success/warning0.094
  • info/success0.259
Deuteranopia
  • success/danger0.119
  • warning/danger0.084
  • success/warning0.045
  • info/success0.256
Tritanopia
  • success/danger0.254
  • warning/danger0.108
  • success/warning0.156
  • info/success0.127
See this whole page as

Dichromat simulation is a model of average perception, not a test with people. Pale status tints are not separable for everyone, so meaning must also live in icons and words, as it does above.

05

Dark mode, designed, not inverted.

Dark mode is derived with its own rules. A deep brand keeps its identity: it is lifted only as far as text needs and given a little extra chroma, so navy stays navy instead of turning pastel. Drag the divider to compare.

NorthwindProductPricingSign in

New in 4.2

Plans that keep up with your team.

Automate reviews, ship reports and keep every approval in one place. Read the changelog

Start free trialBook a demo

Usage

82% of quota

Email

you@example.comDomain not verified

Tip

Invite a reviewer to approve faster.

New

06

Ship it today.

Every system exports as a drop-in theme.css (light by default, dark from the OS, data-theme to override), a Tailwind v4 mapping and DTCG design tokens. This is the real file for the system this page is wearing.

/* Huemantics counterpoint-1f6f5c (generated-heuristic). Opaque sRGB role tokens.
   Assigned pairs pass their declared WCAG 2.2 ratios; the rendered UI still needs review. */
:root {
  color-scheme: light;
  --hm-canvas: #FBF5F7;
  --hm-surface: #FFFDFD;
  --hm-raised: #F1E9EC;
  --hm-text: #1F181B;
  --hm-muted: #6B6064;
  --hm-border: #918489;
  --hm-primary: #1F6F5C;
  --hm-primary-hover: #06614E;
  --hm-primary-active: #005444;
  --hm-on-primary: #F5FCFA;
  --hm-secondary: #F08DB7;
  --hm-on-secondary: #1F181B;
  --hm-accent: #9ADBFF;
  --hm-on-accent: #1F181B;
  --hm-focus: #1F6F5C;
  --hm-selection: #F08DB7;
  --hm-on-selection: #1F181B;
  --hm-success: #417B29;
  --hm-success-bg: #E7F5E2;
  --hm-warning: #7E5400;
  --hm-warning-bg: #FCEEDB;
  --hm-danger: #7F2021;
  --hm-danger-bg: #FFEBE9;
  --hm-info: #24418D;
  --hm-info-bg: #E9F0FF;
  --hm-link: #1F6F5C;
  --hm-disabled-bg: #F1E9EC;
  --hm-disabled-fg: #6B6064;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --hm-canvas: #120E10;
    --hm-surface: #1A1617;
    --hm-raised: #241F21;
    --hm-text: #F6EBEF;
    --hm-muted: #B4A7AB;
    --hm-border: #73686C;
    --hm-primary: #67C6AC;
    --hm-primary-hover: #77D6BC;
    --hm-primary-active: #85E3C9;
    --hm-on-primary: #0C1915;
    --hm-secondary: #DC7AA5;
    --hm-on-secondary: #1B1416;
    --hm-accent: #65CAFF;
    --hm-on-accent: #1B1416;
    --hm-focus: #67C6AC;
    --hm-selection: #DC7AA5;
    --hm-on-selection: #1B1416;
    --hm-success: #BBE6AC;
    --hm-success-bg: #21341A;
    --hm-warning: #D3A96F;
    --hm-warning-bg: #3C2A0E;
    --hm-danger: #CA827C;
    --hm-danger-bg: #442321;
    --hm-info: #95B0EB;
    --hm-info-bg: #212D47;
    --hm-link: #67C6AC;
    --hm-disabled-bg: #241F21;
    --hm-disabled-fg: #B4A7AB;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --hm-canvas: #120E10;
  --hm-surface: #1A1617;
  --hm-raised: #241F21;
  --hm-text: #F6EBEF;
  --hm-muted: #B4A7AB;
  --hm-border: #73686C;
  --hm-primary: #67C6AC;
  --hm-primary-hover: #77D6BC;
  --hm-primary-active: #85E3C9;
  --hm-on-primary: #0C1915;
  --hm-secondary: #DC7AA5;
  --hm-on-secondary: #1B1416;
  --hm-accent: #65CAFF;
  --hm-on-accent: #1B1416;
  --hm-focus: #67C6AC;
  --hm-selection: #DC7AA5;
  --hm-on-selection: #1B1416;
  --hm-success: #BBE6AC;
  --hm-success-bg: #21341A;
  --hm-warning: #D3A96F;
  --hm-warning-bg: #3C2A0E;
  --hm-danger: #CA827C;
  --hm-danger-bg: #442321;
  --hm-info: #95B0EB;
  --hm-info-bg: #212D47;
  --hm-link: #67C6AC;
  --hm-disabled-bg: #241F21;
  --hm-disabled-fg: #B4A7AB;
}

07

Honest by construction.

An instrument for inquiry, not an oracle of taste. Every non-obvious move the generator makes comes with a written diagnostic, and the claims below are the ones we can show evidence for.

100,000random systems generated and audited in the last sweep, with 0 failing pairs

20,009colors checked against an independent color library, with exact WCAG agreement

2independent code reviews by other AI products, every finding reproduced and fixed

Working now

  • One or two brand colors → five strategy-distinct systems
  • All 24 assigned pairs per mode enforced, in light and dark
  • Diagnostics for every adjustment: unsafe brand text, hue collisions, dark derivation, color-vision risks
  • Color-vision simulation and separated feedback colors
  • Drop-in theme CSS, Tailwind v4 mapping, DTCG tokens, standalone preview

Deliberately not claimed

  • A learned or preference-validated taste model
  • Whole-interface WCAG conformance; your rendered UI still needs review
  • Guaranteed color-vision safety, or results for anomalous trichromacy
  • Results from a user study (there are none yet)
  • Wide-gamut P3 or translucent colors

What the generator told us about this page’s colors

  • WarningThe brand color #1F6F5C sits near the success hue; success was shifted in both modes and should always carry an icon or label, not color alone.
  • NoteDark mode uses #67C6AC, a lighter same-hue derivative of #1F6F5C at OKLCH L 0.76, so the action reads on the dark canvas without glaring.
  • WarningIn light mode, success and warning may be hard to tell apart with deuteranopia (simulated). Pair them with distinct icons, labels or shapes.

Your color, explained.

The lab compares candidates side by side, shows every diagnostic and exports all formats. It runs entirely in your browser: no account, no tracking, no network calls.

Open the lab