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

61–70 of 118 posts

Re: Building your color palette

#61

Post by clarry »

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.…

> Not only are perceptual uniform models like CIE Lab*, and the derived CIELCh or CIEHLC mindbending to understand and code

Conversion from srgb to lab and back (through xyz) is a handful of functions, all under a dozen lines of javascript. Lab to lch and back are a pair of functions, about two lines of code each.

If you're implementing a user interface with sliders, you might also want to clamp the values to avoid producing out of gamut colours. The weird shape is probably the hardest thing to understand (user point of view), but the controls remain very intuitive.

Re: Building your color palette

#62

Post by katsura »

codetrotter wrote: post #51
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…

> 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”?

You can use CSS variables, no preprocessor necessary for newer browsers:

  :root {
    --palette-blue-light: blue;
  }
  background-color: var(--palette-blue-light);

Re: Building your color palette

#63

Post by pfranz »

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…

Most of those generators are showing you sets of colors that all compliment each other. When you're designing an interface you have different priorities, you need a more of a fill and accent colors, as well as other colors that give contextual clues (like confirmations or warnings).

I think both concepts are useful, but this article is a way better approach.

Re: Building your color palette

#65

Post by jaypea »

jungler wrote: post #59
jaypea wrote: post #39

Earlier quoted context omitted.

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 o…

Most folks would disagree and say that blue is actually the least sensitive to changes and green the most, and allocate precision accordingly. See remarks here: https://en.m.wikipedia.org/wiki/High_color

sorry I misspoke by saying shades - the MacAdam's ellipses are measured for the same brightness so only apply to variation in hue/saturation. So I think we can see more shades of green but more hues/saturations of blue?

Re: Building your color palette

#66

Post by skosch »

pg_bot wrote: post #54
jacobolus wrote: post #45

Earlier quoted context omitted.

> 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…

Can you point me to any resources where I can learn more?

More than you ever wanted to know, in one well-illustrated blog post: http://jamie-wong.com/post/color/

Re: Building your color palette

#67

Post by vobios »

jaypea wrote: post #39
vivekseth wrote: post #30

Earlier quoted context omitted.

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 o…

Speaking of distinguishing subtle differences in blues, there is actually a linguistic component.

English and Russian color terms divide the color spectrum differently. Unlike English, Russian makes an obligatory distinction between lighter blues (“goluboy”) and darker blues (“siniy”). We investigated whether this linguistic difference leads to differences in color discrimination. We tested English and Russian speakers in a speeded color discrimination task using blue stimuli that spanned the siniy/goluboy border. We found that Russian speakers were faster to discriminate two colors when they fell into different linguistic categories in Russian (one siniy and the other goluboy) than when they were from the same linguistic category (both siniy or both goluboy). Moreover, this category advantage was eliminated by a verbal, but not a spatial, dual task. These effects were stronger for difficult discriminations (i.e., when the colors were perceptually close) than for easy discriminations (i.e., when the colors were further apart). English speakers tested on the identical stimuli did not show a category advantage in any of the conditions. These results demonstrate that (i) categories in language affect performance on simple perceptual color tasks and (ii) the effect of language is online (and can be disrupted by verbal interference).

Source: https://doi.org/10.1073/pnas.0701644104

Re: Building your color palette

#68

Post by Jarwain »

vivekseth wrote: post #30
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…

This reminds me of the development of 'color words'. Most languages start off creating words to differentiate light from dark, followed by a word to describe red, then yellow (or green), followed by green (or yellow), then blue, then brown.

Re: Building your color palette

#69

Post by magicbuzz »

noir_lord wrote: post #19

While there are no absolutes when it comes to taste. One design language that I really like is the Atlassian/Bitbucket one. https://atlassian.design/guidelines/brand/color-1 I've generally really liked the changes to bitbucket over the last few years in terms of UI and UX. They also have an impressive component archive. https://atlaskit.atlassian.com/packages A lot of the packages are under an Apache 2 license, I can…

Those colour names in the Atlassian palette are hilarious.

Re: Building your color palette

#70

Post by cormacrelf »

pg_bot wrote: post #54
jacobolus wrote: post #45

Earlier quoted context omitted.

> 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…

Can you point me to any resources where I can learn more?

http://davidjohnstone.net/pages/lch-lab-colour-gradient-pick...

You could learn more, or just use Lch! The colours you can pull out of this tool are amazing.

Post reply on HN