In short, I want to know what the theory is behind the Helpscout colour palette. I think it has something to do with material.io?


Now I've always had my own way of generating shades of brand colours (which works pretty damn well!) but I thought I'd try to move to something more conventional which would help the design team (and devs) generate palettes for themselves easily and extend palettes.

So I post as I can't figure out what the pattern is here after playing around for a bit. I feel like I'm missing something very obvious and being a bit of a noob ...or maybe just snow-blind working late.

So what's the math behind this? Thanks in advance!

Helpscount colour palettes

  • 2
    What makes you think there's math behind it and not merely a visual selection of colors? (I edited your title. This isn't really about color theory. This is about a specific color breakout for a brand guideline.) – Scott Nov 14 '20 at 18:45
  • I tried briefly to figure if there was some "math" involved with their palette and numbering and got nowhere- maybe best to check directly with Helpscout. – Kyle Nov 14 '20 at 18:48
  • 3
  • 1
    Can I add that that is quite possibly one of the most impressive brand guides I’ve seen? It’s very specific, very in depth, and simple. I’ve gotten brand guidelines before that are over 100 pages of ridiculous explanations and details. – Alith7 Nov 17 '20 at 10:35
  • 1
    just by pure coincidence I stumbled upon this today, might interest you refactoringui.com/previews/building-your-color-palette – Luciano Nov 23 '20 at 13:59

I'm not a mathematician so I can't answer that part of your question, however these are not a hundred miles away from simple step blends made in Illustrator (or similar vector software) from three basic colours:- 1 light, 1 bright saturated/mid toned, and 1 darker. You could literally do this with any three colours.


enter image description here

  • I think I might be overcomplicating things here Billy! But does Illustrator auto-generate these based on a colour to two? Or is it something you've created using blend layers? Looks real close though and to be honest although I do tweak colours by eye anyways, I find this stuff interesting to see if there is patterns :) – user1406440 Dec 2 '20 at 19:26
  • @user1406440 The colours are generated as a result of making a blend from one filled object to another filled with a different colour. In the examples, there are actually three objects in each Blend. Blends in Illustrator have nothing to do with layers however. See more info about making Blends here helpx.adobe.com/illustrator/using/blending-objects.html – Billy Kerr Dec 3 '20 at 0:06

There are many models to represent colors with numbers, the most widely known one is RGB where you have a color represented by its values for RED, GREEN and BLUE from 0 to 255

There's also CMYK (cyan, magenta, yellow, black), HSL (hue/saturation/lightness), HSB (hue/saturation/brightness)

These models are very useful in general, but they have the drawback that human perception is slightly different from digital representations of colors, so probably whoever created the palettes made some adjustments for visual similarity between the colors.

If I look at the blue one, I would say that the math aproximation is like this in HSL model (hue stays the same):

  • 100 - 5% saturation 100% brightness
  • 200 - 15% saturation 100% brightness
  • 300 - 35% saturation 100% brightness
  • 400 - 65% saturation 100% brightness
  • 500 - 95% saturation 100% brightness
  • 600 - 100% saturation 80% brightness
  • 700 - 100% saturation 65% brightness

Usually color similarity is calculated with special color space models like CIELab: https://en.wikipedia.org/wiki/CIE_1931_color_space

but there, the math becomes a bit complicated.

  • Yeah I figured it was something like this, as I tried overlaying white/black and it didn't really work (especially for the darker tones). Maybe it's in relation to this: material.io/design/color/… ? Yeah I know the RGB/CMYK ...I might play around with HSB, that sounds like it'd be easier to control % as the values go up to 100? – user1406440 Nov 15 '20 at 14:38
  • The numbering thing is for sure a reference to the Material Design principles. However, it seems that there's no actual rules for assigning those numbers, it's just a convention: higher number means darker/more accent. See this discussion also graphicdesign.stackexchange.com/questions/43021/… – JohnNegoita Nov 16 '20 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.