Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Building your color palette

refactoringui.com

Post reply on HN
Print view View original

71–80 of 118 posts

Re: Building your color palette

#71

Post by ph0rque »

the_bear wrote: post #14

I've picked my fair share of colors for various businesses, and something that annoys me is that you pretty much always end up with green or blue being the main color. 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…

> For some weird reason, we call light red "pink".

This is partly cultural. In Russian, there's one word for light blue (голубое). It's the color used to describe the sky. I remember wondering why there's not an English equivalent, when there's the pink/red distinction.

Re: Building your color palette

#72

Post by albedoa »

intertextuality wrote: post #58
codetrotter wrote: post #51

Earlier quoted context omitted.

> background-color: palette(blue, "light") Having never used Sass, this syntax strikes me as odd. Is there a CSS pre-processor similar to Sass but where you would instead write it as “background-color: palette.blue.light”?

Why is it odd? You're just calling a function with two arguments.

That function call is an alias for: map-get(map-get($palettes, 'blue'), light)

Which, in a language with dot accessors, could be accessed like: $palette.blue.light

I don't think he means that the function call is odd but rather that it's odd that you have to create and call a function to be as concise. Some of the oldest and longest Sass issue threads are about this missing feature.

Re: Building your color palette

#73

Post by Nition »

ph0rque wrote: post #71
the_bear wrote: post #14

I've picked my fair share of colors for various businesses, and something that annoys me is that you pretty much always end up with green or blue being the main color. 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…

> For some weird reason, we call light red "pink". This is partly cultural. In Russian, there's one word for light blue (голубое). It's the color used to describe the sky. I remember wondering why there's not an English equivalent, when there's the pink/red distinction.

The English word for the blue of the sky is "azure". Or sometimes "cerulean".

Re: Building your color palette

#74

Post by albedoa »

porphyrogene wrote: post #21
the_bear wrote: post #14

I've picked my fair share of colors for various businesses, and something that annoys me is that you pretty much always end up with green or blue being the main color. 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…

Violet, Indigo and Red are different hues. Pink is not "light red". No adjustment of the saturation of red will ever make it pink. Brown is created with a low saturation of red, orange, yellow or green.

> Pink is not "light red". No adjustment of the saturation of red will ever make it pink.

Can you tell us what you think one has to do with the other?

Re: Building your color palette

#76

Post by swaggyBoatswain »

pg_bot wrote: post #12

Take this one step further and build the color palette into your stylesheets. If you're using Sass you can setup something like: $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') { @r…

This is an interesting idea. Seems like a good practice in larger projects though. I like your choice in words, lightest, lighter, light, base, dark, darker, darkest. Its the same naming convention as tailwinds, minus the word "base".

Is the word "pallete" really necessary? Why not just organize it like this instead?

  // Colors
  $blue-lightest: hsl(201, 75%, 66%);
  $blue-lighter:  hsl(201, 75%, 61%);
  $blue-light:    hsl(201, 75%, 56%);
  $blue           hsl(201, 75%, 51%);
  $blue-dark      hsl(201, 75%, 46%);
  $blue-darker    hsl(201, 75%, 41%);
  $blue-darkest   hsl(201, 75%, 36%);
and

  body {
    background-color: mix($red,$purple-light);
    color: $blue-dark;
  }
I am surprised the author did not mention HSL code anywhere, especially in the section about creating shades. I use HSL for everything, it should be standard practice.

Re: Building your color palette

#77

Post by sureaboutthis »

> There's no real science

> It's not a science

I preach and preach that to people on certain other forums who insist you need one of those palette generators or palette samplers, and everyone praises them, but it's ART not SCIENCE or MATH! It's why there are artists who design the look of things and not scientists or engineers.

Re: Building your color palette

#78

Post by crazygringo »

jacobolus wrote: post #45
pg_bot wrote: post #12

Take this one step further and build the color palette into your stylesheets. If you're using Sass you can setup something like: $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') { @r…

> 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) Unfortunately, the “math” of color models like HSL is only very loosely related to the science of human color perception. It was a model developed…

But let's not throw away the baby with the bath water...

A huge value of HSL is being able to verify that you're keeping hue constant. Or, to change hue everywhere slightly (when you decide you want a 214 blue instead of 217).

The second value of HSL is that it's easy to look at a code and understand its brightness and saturation semantically.

But I agree that you absolutely need to manually pick appropriate lightness and saturation values to match what you want perceptually, and that changing lightness often requires changing saturation as well.

Re: Building your color palette

#79

Post by userbinator »

This calculated and scientific approach to picking the perfect color scheme is extremely seductive, but not very useful.

Well, unless you want your site to look like this:

There's a difference between picking maximally distinctive colours (which a lot of palette generators are designed to do) for graphs and such, and picking colours for UI.

Personally, I think less colour and higher contrast is better than the trend of barely-distinguishable shades of grey; and of course, for desktop apps, please use the platform's standard UI colours because the user may have customised them for his/her preference/colour-perception and expect your app to be too.

Re: Building your color palette

#80

Post by vagab0nd »

jacobolus wrote: post #45
pg_bot wrote: post #12

Take this one step further and build the color palette into your stylesheets. If you're using Sass you can setup something like: $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') { @r…

> 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) Unfortunately, the “math” of color models like HSL is only very loosely related to the science of human color perception. It was a model developed…

I think it still has some value. A few years ago I was building my color palette, and discovered through trial and error that if I keep saturation and luminosity constant, and just change hue to cover the color space, I get a pretty good looking set of colors. I'm not sure if there's science behind it, but it works in practice, at least for me.
Post reply on HN