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

91–100 of 118 posts

Re: Building your color palette

#91

Post by pg_bot »

swaggyBoatswain wrote: post #76
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…

The palette does two jobs. First, it makes sure you don't overwrite yourself somewhere else in the codebase. It also helps you easily see where someone has goofed since they aren't using the palette when defining a color. You could write everything that way, but you have to spend more effort maintaining the project.

Re: Building your color palette

#92

Post by [deleted] »

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…

[deleted]

Re: Building your color palette

#93

Post by beaconstudios »

crazygringo wrote: post #78
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…

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

If you want to be able to control hue still, you can use CIE LCH which is comparable to HSL but better matches our colour perception.

Re: Building your color palette

#94

Post by tchaffee »

amelius wrote: post #64

I fear that this is exactly the kind of advice that makes websites all look the same.

And books all look the same. White background with black text. Even print magazines mostly all look the same. There is only so much variation you can introduce before the design starts to draw attention away from your content. Most websites designs should be comforting and ignorable.

Re: Building your color palette

#95

Post by roryokane »

chiefalchemist wrote: post #41
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.

Here is a tool that makes it easier to pick foreground and background colors with high enough contrast according to WCAG guidelines: https://webaim.org/resources/contrastchecker/

Re: Building your color palette

#97

Post by roryokane »

beaconstudios wrote: post #93
crazygringo wrote: post #78

Earlier quoted context omitted.

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

If you want to be able to control hue still, you can use CIE LCH which is comparable to HSL but better matches our colour perception.

Yes, LCH is easier to use for picking colors than other CIELAB color spaces. To try an LCH color picker, you can use http://davidjohnstone.net/pages/lch-lab-colour-gradient-pick... (as linked in another comment).

You can also use the better-implemented color picker for the HSLuv color space at http://www.hsluv.org/. HSLuv is just like LCH except that it stretches the saturated colors for each hue so that any saturation coordinate represents a valid color, unlike LCH’s chroma coordinate. The downside is that the color’s chroma (colorfulness) can change when you drag the hue slider.

Re: Building your color palette

#98

Post by speedplane »

crazygringo wrote: post #78
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…

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

Having someone on your team that understands and values this stuff is Priceless to anyone building a user friendly product.

Re: Building your color palette

#100

Post by noir_lord »

magicbuzz wrote: post #69
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.

Every design needs more cowbell.
Post reply on HN