Oh my gosh, I’ve spent months of 2018 working on my color system. It’s a HUGE undertaking, so bravo! That said, my system differed in a few respects, it’s all about sharing right?

While you have 11 tones, my system only has 4 — the center hue, then 2 higher and 1 lower. With 11 steps for each hue, you have more flexibility, but also more opportunity to mix hues that will not pass the contrast tests especially when printing in greyscale or Monochromacy. I also went with a lighter medium grey (your #909090) for my baseline, and I think something might be a smidge off with your yellow and red in comparison to the others as a result of that.

The other thing I did was omit many of the darker colors from my system, so I only have the 20% darker color, as the darker tones began to flatten out and become effectively black. (side note, I’m in data visualization so darker colors actually read as more important — humm!)

You may also want to begin experimenting with presenting colors in your system that do and do not pair well. I’ve found that making the system was one thing, but putting it to use and understanding what colors I can match with each other changed my understanding of what should and should not be allowed. I have examples of 2 and 3 color combinations that are both attractive and pass the test.

The last aspect that I’m wrestling with — and by no means do I have it sorted out yet — is that it might be better to use an algorithmic value and hue derived system instead one cut by such basic percentages. By this, I mean setting only 1 “base” color, then allowing tools such as Chroma.js and Colorbox to help determine the scales from there.

What do you think? Each color system is a journey so I’m happy to chat more.

links:

Chroma.js: https://github.com/gka/chroma.js

Colorbox: https://www.colorbox.io/