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

51–60 of 118 posts

Re: Building your color palette

#51

Post by codetrotter »

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

Re: Building your color palette

#52

Post by rudedogg »

I think the key is to build the palette from a mental model of relationships. You start with a base color, and choose "adjustments" down the line to describe accent colors, etc.

The other perk about this approach is that you can then adjust the base color, and everything referencing it usually looks pretty good or only needs slightly adjusted.

I've been working on a tool for this off and on since 2015 (https://www.colorproducer.com/). The app has some really annoying issues, mainly around UI. I think the main thing I did wrong was to make it work on a per CSS selector/color property basis. Most websites will have 50+ unique selectors with color value, so it becomes a lot of work. I'm trying to address this, and have been thinking of a "mapping" step, where the user picks out what selectors are a primary color, accent color, etc., and then works solely with those groupings.

Hopefully this makes sense, I've been thinking about it a lot and may be a little too stuck in my own head/thoughts.

Re: Building your color palette

#53

Post by PavlovsCat »

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 made something like that for myself before SASS etc. were a thing, and it's been working so great for me that I keep using it, even though it's kinda derpy. First, I have a bunch of vars, such as

    hue9, top_bg_sat, top_bg1_lum, top_bg2_lum
Only those get changed when making new color schemes, and the colors are made up from them like so:

    hsl top bg1: [hsl hue9 [float top_bg_sat] [float top_bg1_lum]]
    hsl top bg2: [hsl hue9 [float top_bg_sat] [float top_bg2_lum]]
Those colors in I use in the CSS so they can get replaced by the final HSLA color:

    background:	;
    background:	linear-gradient(to bottom,  0%,  10%,  90%,  100%);
allowing modifiers, such e.g. "use this color, but with luminance divided by 1.125".

I would look into options before rolling my own again, but even rolling my own made my life so much easier, so quickly, I would still recommend it just because it's fun.

Re: Building your color palette

#54

Post by pg_bot »

jacobolus wrote: post #45
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…

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

Re: Building your color palette

#55

Post by jacobolus »

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?

Pick up any color science book from the last 50 years (you should hopefully be able to find a few at any medium-sized public library).

If you want an online resource, try https://www.handprint.com/LS/CVS/color.html

Re: Building your color palette

#56

Post by chevas »

This was really helpful to see how the author thought through the palette's creation. In my experience, I came to similar results, but over a long period of time and rather haphazardly after endless tweaking.

I would add that often times it's helpful to define a "light on dark bg palette" and "dark on light bg palette."

Re: Building your color palette

#57

Post by joemaffei »

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

Not really a preprocessor per se, but look into JSS. Since it’s just JavaScript, you could use the object syntax you asked about.

Re: Building your color palette

#58

Post by intertextuality »

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

Why is it odd? You're just calling a function with two arguments.

Re: Building your color palette

#59

Post by jungler »

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…

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

Re: Building your color palette

#60

Post by jungler »

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?

Here are some common techniques:

1. Hue shift your complements towards the primary instead of trying to use the full range. This mimicks what we experience in different lighting conditions: under a red light, everything looks red.

2. Create ramps of saturation within the palette. If you have a dark blue primary, add a grayish transition and pastels to complement.

3. Make a larger palette than you need right now and then trim it down. When making palettes for pixel art(a great way to learn color), there's an iteration between making color ramps and making test images to spot the flexibility of the palette. You can do similarly for the site design: you don't want to have tons of colors, you want colors that can be used in many different roles.

Post reply on HN