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

41–50 of 118 posts

Re: Building your color palette

#41

Post by chiefalchemist »

tbarkow wrote: post #13

There actually is a science for this: it's called accessibility. WCAG guidelines would be extremely useful in determining how colors should be combined and applied to meet contrast guidelines. It would also be useful to create usage contexts to guide additions to the palette. for example: text + background, ui (border, icon) + background, background + background. These would help identify common situations and ensure…

Yes WCAG guidelines are useful. But, for me as a novice empathic but still a novice, they are not easy to use. At the very least, finding definitive examples and such often eludes me.

That aside, thanks for mentioning accessibility and #A11Y.

Re: Building your color palette

#42

Post by andy_ppp »

nostrademons wrote: post #37

Kinda ironic that he starts the article by decrying fancy color palette generators that give you 5 hex codes centered around a primary color, and then ends it by choosing a base color and filling in the gaps with 5 (possibly 10) shades from light to dark. That's exactly what color palette generators do! The mistake most people do is going hog-wild with color palette generators. The vast majority of the time, you want…

No, not ironic, that's precisely what he doesn't do; he says you probably need 5-9 shades of each colour group - Primary, Secondary, Highlight, Greys, etc.

He also says the reason you can't write a generator is because every colour looks different and needs to be judged by your eyes.

Re: Building your color palette

#43

Post by wool_gather »

ffritz wrote: post #16

Awesome blog post, providing interesting approaches. 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?

This is where the triads and tetrads that the article dismissed come in. But a good rule of thumb is to pay attention to saturation and brightness more than hue; they have a larger role in the harmoniousness of a pair of colors.

Re: Building your color palette

#44

Post by rriepe »

weinzierl wrote: post #2

> Ever used one of those fancy color palette generators? You know, the ones where you pick a starting color, tweak some options that probably include some musical jargon like "triad" or "major fourth", and are then bestowed the five perfect color swatches you should use to build your website? > This calculated and scientific approach to picking the perfect color scheme is extremely seductive, but not very useful. Jus…

I've made one so maybe I can help (http://strapless.io/)

It's only really scientific insofar as it's based on a model. We basically make a big cube with R,G,B on its sides instead of X,Y,Z. Different approaches will then "smush" that cube to try to better match how humans perceive colors. Those different smushes will usually have some scientific thinking behind them (mine is based on... historical justifications, good post here btw). Then we move around the cube to find colors.

When I get a color, I try to match the luma too. Luma is itself a weird value, which tries to work through the relative perceptual brightness differences in colors.

The relative perceptual brightness difference is, as far as I can tell, the thing that really makes a color look "wrong" in a color scheme. I didn't solve that with problem with Strapless, but instead relied on whomever figured out luma. I think if you looked into how luma works you'd find the current best scientific model for whether two colors "fit" together.

I'd agree that color-generating isn't a science (definitely more of an art) but any good approach will have a bunch of underlying science and math.

Re: Building your color palette

#45

Post by jacobolus »

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 by computer graphics researchers of the 1970s who were not very knowledgeable about 20th century color science and dealing with very limited hardware capabilities compared to today, roughly based on outdated ideas from the 17th–19th century... and frankly not very well designed even within those constraints. As a result, leaning too heavily on HSL (especially for novices) typically leads to garbage results. An experienced artist picking colors visually will do much better than someone largely relying on HSL numbers.

If you want to pick colors based on numbers, look up the Munsell color system (a big lookup table from the early 20th century; the “modern” version was developed by the leading American color scientists of the 1940s), CIELAB (from the 1970s, an inferior but based-on-a-simple-formula Munsell clone), or CIECAM or IPT models (more recent and more complicated formulas).

Re: Building your color palette

#46

Post by rriepe »

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…

If you're using Less, try http://strapless.io/ (my take on organizing colors in a project)

Re: Building your color palette

#47

Post by jacobolus »

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…

One reason is that computer displays are just not very good at reproducing colorful light reds, a limitation of the 3-primary emissive display technology. As a result light reds on typical computer displays are always pale/faded looking. This can make it hard to build a useful range of UI colors of red hue, depending on the needs of the UI.

Re: Building your color palette

#48

Post by jacobolus »

porphyrogene wrote: post #36
sgustard wrote: post #28

Earlier quoted context omitted.

Pink is a "light tint of red", not a different hue. https://en.wikipedia.org/wiki/Shades_of_red

That is a purely semantic argument. It's also a contradictory one. That article says in the first sentence that they are considering adjusted hues as "shades" or "tints" of red. Using terminology beyond HSV only introduces semantic complexities to confuse the topic.

Wikipedia is a terrible source for this type of thing.

“Pink” was until recently a synonym for “light red”.

However, when it became possible and fashionable to produce more bright purple-red colors, these were also called “pink” (“hot pink”, etc.) by marketers, and now our late 20th/early 21st century concept of the denotation of the word “pink” is considerably broader than 50+ years ago.

Re: Building your color palette

#49

Post by weinzierl »

guitarbill wrote: post #29
weinzierl wrote: post #2

> Ever used one of those fancy color palette generators? You know, the ones where you pick a starting color, tweak some options that probably include some musical jargon like "triad" or "major fourth", and are then bestowed the five perfect color swatches you should use to build your website? > This calculated and scientific approach to picking the perfect color scheme is extremely seductive, but not very useful. Jus…

I'm happy to give them the benefit of the doubt, and I think many colour pickers wanted to do the right thing. HSL or HSV was a step up from RGB, so it made sense to use it to derive other colours quickly. Because if you're an underpaid freelance developer, the primary colour is usually set by the client, but they usually son't have a full colour scheme. Using a colour wheel based tool gave good enough results fast.…

> If you need them to "look good", well that's art, not science.

I'm not so much interested in "look good" but in "look pleasing or harmonious together" and I think that's a question science might have an answer to.

It's no coincidence that the palette generators borrow musical jargon. In music the definitions of minor second and perfect octave are completely uncontroversial. That these two intervals have different musical qualities, we call them dissonance and consonance, is uncontroversial too. Sure, some cultures use dissonant intervals heavily in their music but they still recognize the different qualities. Most importantly there has been a ton of research in this field.

Contrast this with the state of the art in color science: When it comes to color harmony there is not even a single universal definition of opposite or complementary. Look at the Wikipedia article about that topic [1]. It mixes up three completely separate topics:

1. Colors that when mixed together give a neutral hue

2. Colors that are opposite of each other on some wheel

3. Colors that supposedly have a certain effect, like contrast or harmony, when perceived next to each other

Color wheels are a dime a dozen. There is no shortage of claims that this and that color go well together but there doesn't seem to be any serious research.

I wonder if that is just my impression because it's not my field, or if maybe color science really is just not developed enough to tackle these kind of questions.

[1] https://en.wikipedia.org/wiki/Complementary_colors

Re: Building your color palette

#50

Post by jacobolus »

weinzierl wrote: post #2

> Ever used one of those fancy color palette generators? You know, the ones where you pick a starting color, tweak some options that probably include some musical jargon like "triad" or "major fourth", and are then bestowed the five perfect color swatches you should use to build your website? > This calculated and scientific approach to picking the perfect color scheme is extremely seductive, but not very useful. Jus…

> Just recently I wondered if there is any scientific basis behind these approaches.

No, not really. It’s mostly 17th–19th century pseudoscience, propagated by generations of uncritical art teachers. (Note: not all art teachers; some are amazing.)

Complementary colors (which mix to neutral when you e.g. paint two sides of a top with them and spin it) are a thing though.

Post reply on HN