Cool article, but isn't the point of a palette that you limit your options so it's easier to pick a color and the colors on your site are more consistent? This article suggests every palette should have 6 colors and 9 shades for each color, which doesn't really narrow things down...
Building your color palette
31–40 of 118 posts
Re: Building your color palette
#32I'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.
Then how do monitors work with just 3 basic colors (RGB)?
Re: Building your color palette
#33I'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.
Adjustment of Value will make a red pink though, not sure why you're talking about Saturation only?
Re: Building your color palette
#34There 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…
Steve Schoger does a great job of designing with accessibility in mind! The future book that this chapter will be rolled into contains a whole discussion on it. If you check out the Refactoring UI screencasts, he uses an app (called Contrast, if you're curious) to make sure things meet AA minimum requirements.
Re: Building your color palette
#35I think it's assumed you would still use grays and whites if you use one of those palette generators.
Re: Building your color palette
#36Earlier quoted context omitted.
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
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.
Re: Building your color palette
#37Kinda 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 a monochromatic scheme with a complementary accent color. Adjacent, triad, and tetrad schemes are quite special purpose, and you use them differently. Think of Google - it's a tetrad scheme, but the base color for all Google sites is white, and all 4 colors of the logo are used as accents. You want to KISS - if you do have a multicolor palette, use the colors sparingly and pick a neutral white or grey as the primary background color.
Re: Building your color palette
#38I'm not sure (read: very new tbought) what this would look like in terms of a broader theory, or mixins, but I would imagine it might be helpful, just like with music, to think of colors as having a key; that at the very least there's some way to automatically define the colors __not__ in the key.
Okay. It's a raw idea :) Maybe someone else here can flesh it out?
Re: Building your color palette
#39I'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…
Another factor to consider is our acuity
varies across that color gamut (see https://en.wikipedia.org/wiki/MacAdam_ellipse). So we're best at distinguishing subtle differences in blues and worst at seeing variation of greens. The number of shades of blue or green you can see would be the number of MacAdam's ellipses which fit in each region - so it looks like we can see the most shades of blue but green isn't much of an outlier (depending on how you group pinks/purples etc.).
Re: Building your color palette
#40Strapless, a color library I built, automates a lot of this if you use LessCSS: http://strapless.io/