Building your color palette

    $palettes: (
      blue: (
        lightest: hsl(201, 75%, 66%),
        lighter:  hsl(201, 75%, 61%),
        light:    hsl(201, 75%, 56%),
        base:     hsl(201, 75%, 51%),
        dark:     hsl(201, 75%, 46%),
        darker:   hsl(201, 75%, 41%),
        darkest:  hsl(201, 75%, 36%)
      ),
      red: (...),
      gray: (...)
    )

    @function palette($palette, $tone: 'base') {
      @return map-get(map-get($palettes, $palette), $tone);
    }

I typically use hsl instead of hex codes because it is easier to understand and modify. You can quickly build up a palette by just modifying the lightness scale on each color by a constant percentage. (This is where I disagree with the author, all of design is just math)

It is often useful to combine colors for your designs and Sass has you covered with the `mix` function. Using this setup you can call `mix(palette(blue), palette(gray))` to combine colors in your palette. You typically want to do this with text on a colored background to make it look more visually appealing.

This is the only way I've found to stay sane managing your colors in a big project. In my experience, everything else goes off the rails when you introduce multiple people into the picture. Please steal this idea, your projects will be better because of it.

I tried to figure out why, and I think it's a really dumb reason: like this article says, if you don't really know what you're doing with design, you want a spectrum of light-to-dark colors to choose from. Light green -> normal green -> dark green.

For some weird reason, we call light red "pink". And dark orange/yellow is "brown". If you pick one of those as your main color, it becomes much harder to just use lighter or darker shades without it becoming something else entirely. Great designers can make pink or brown work, but if you're a programmer who's just trying to find a "good enough" color scheme, it's way easier to go with green or blue.

I don't really have a good reason why we all think of pink as a different color from red, but we do.

What I always struggle with is not the different shades, but finding suitable other colors which go along with a given one. Let’s say your company already has a hex code for a blue. How do you find appropriate greens and reds to go along with it?

What I'm looking for are empiric, preferably cross-cultural, studies on color harmony. I'm interested in work similar to what has been done for Unique Hues and Focal Colors but for combinations of two or more colors and for the notion whether people find these combinations pleasing, neutral or displeasing. I wouldn't be surprised too much if we couldn't find universal pleasing combinations but I'm surprised that apparently no one has done these type of studies.