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

21–30 of 118 posts

Re: Building your color palette

#21

Post by porphyrogene »

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.

Re: Building your color palette

#22

Post by carapace »

Light grey sans-serif body font means you hate your readers' eyes. At least they didn't make it tiny as well.

Also, the color advice is bad. The garish "calculated and scientific" example is more readable than the "What you actually need" example.

- - - -

Edit: The differences between people's eyes and between monitors' color output mean that you probably shouldn't spend more than an hour or two (or a couple of hundred bucks) picking out a dependable conservative color pallet. In fact, the time it took to read that article should be enough to pick a pallet, unless you just want to play with colors, which is fine.

Re: Building your color palette

#24

Post by thoughtexplorer »

porphyrogene wrote: post #6
zachkatz wrote: post #3

I actually really love that first example. Wish more sites looked like that.

For people with blue-yellow color blindness that page is a nightmare.

If it makes you feel any better, it's also a nightmare when you can see blue-yellow.

Re: Building your color palette

#25

Post by justinpombrio »

And make sure to use LAB color space!

https://en.wikipedia.org/wiki/Lab_color_space

In LAB space, the distance between two colors approximate perceptual distance (how different two colors look). Its not exact---it can't be, because the space isn't actually Euclidean---but it's close.

RGB, on the other hand, isn't close. Here's a visualization of RGB space embedded in LAB space:

https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i...

If RGB space corresponded to what our eyes saw, that would be a hexagon.

Re: Building your color palette

#26

Post by chazzyluc »

weinzierl wrote: post #18
davidivadavid wrote: post #10

Earlier quoted context omitted.

Whether you see it as having science behind it or not really depends on what problem you're considering. There are some interesting in-depth articles about how people build those palettes and ramps that you might find interesting: https://uxplanet.org/designing-systematic-colors-b5d2605b15c https://design.lyft.com/re-approaching-color-9e604ba22c88

Thanks for the links, I skimmed the articles, they are very interesting and I will certainly read them later. They are not what I'm looking for, however. 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 combi…

May not be exactly what you want but you could look into the World Color Survey:

http://www1.icsi.berkeley.edu/wcs/

https://youtu.be/gMqZR3pqMjg

Re: Building your color palette

#27

Post by epse »

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…

The point of a palette is that if your blue is your accent colour, the grey will already be a bit blueish and work great with it

Re: Building your color palette

#28

Post by sgustard »

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 a "light tint of red", not a different hue. https://en.wikipedia.org/wiki/Shades_of_red

Re: Building your color palette

#29

Post by guitarbill »

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.

Not only are perceptual uniform models like CIE Lab*, and the derived CIELCh or CIEHLC mindbending to understand and code, but monitor colour gamuts sucked, and so it was overkill.

So is it scientific? If what you wanted was an easy way to derive a number of colours, sort of. If you need them to "look good", well that's art, not science. So ultimately, IDK what answer you're looking for. Colour wheels have always just been a nice way to visualise hue.

Re: Building your color palette

#30

Post by vivekseth »

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…

I think humans can see a wider range of blues and greens than they can yellows and reds. Check out: https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/CI...

I believe this chart roughly corresponds to the colors humans can perceive for different light combinations. I see greens/blues in most of the chart and the colors I consider to be red, orange, or yellow occupy very small regions of the image.

Since greens/blues have a wider range, maybe that's why designers tend to use them as the main color?

Post reply on HN