0

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?

https://style.helpscout.com/visual-elements/

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

Improve this question
8
  • 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
    Commented Nov 14, 2020 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
    Commented Nov 14, 2020 at 18:48
  • 3
    Does this answer your question? How does one generate a palette similar to the ones in Google's material design?
    – Zach Saucier
    Commented Nov 14, 2020 at 22:12
  • 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
    Commented Nov 17, 2020 at 10:35
  • 1
    just by pure coincidence I stumbled upon this today, might interest you refactoringui.com/previews/building-your-color-palette
    – Luciano
    Commented Nov 23, 2020 at 13:59

2 Answers 2

Reset to default
1

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.

Examples

enter image description here

Improve this answer
2
  • 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
    Commented Dec 2, 2020 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
    Commented Dec 3, 2020 at 0:06
1

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.

Improve this answer
2
  • 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
    Commented Nov 15, 2020 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
    Commented Nov 16, 2020 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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