: How do I color a table to look neutral? This is a web table I'm working on!, What tweaks should I do to make it look neutral? This table is responsive as 2 columns will be displayed on

@Rambettina927

Neutrality has two meanings:


A color with low to zero saturation.
A lack of differentiation compared to the surroundings.


If you're going for #1 , switch to HSB color mode and set S to something under 30.

For #2 , you'll have to consider factors crossing hue, saturation, brightness, texture, style, etc. It's a relative measure of an element's uniqueness in it's surroundings. That's not something we can accurately assess without the rest of the view.

Vote Up Vote Down

@Nimeshi706

First you need to define what you think is "neutral". I'm uncertain if you are referring to a neutral color palette or something else. So, I'll assume you mean an palette.

Most often neutral colors elude to greyscale and sometimes beige or tans. The point of a "neutral" palette is that it is not vibrant or eye-catching, but rather understated and unobtrusive. Clearly bright blue cells don't fit this, no matter how you arrange them or how much contrast between cells there may be. Your blues are essentially "screaming" at users because they are so bright and vibrant.

You could just drop the saturation of all the colors and get closer to grey values to create a more neutral color scheme:



You could still keep a "blue" feel to it by just retaining some saturation.... (although I'd probably drop the value of the "America" cell so it's not such a stark contrast.)



.. nothing too bright or too dark. Everything roughly in the middle of a color spectrum.

Or you could shift things to a warmer neutral by using browns....



In any event, bright, vibrant colors almost never indicate a "neutral" palette.

An easy way to do this is to start with only grey values. Color everything grey adding enough variation so that the cells can be independently seen against each other when they are different values, but not so much variation that any of the cells immediately catch the eye (unless you want it to). then slowly add the color you'd like to use to the greyscale table. Stop with the color once you get to a point where it clearly looks "tinted" with that color, but still basically a greyscale table.

Trying to do this by changing hex values can be challenging. I'd suggest you use Photoshop and just play with your screenshots as I have until you find an overall color scheme you feel works, then pull hex values from that Photoshop file.

Vote Up Vote Down

@Michele215

Identify the non-neutral elements of your table and figure out how to fix them.


the table has an uneven color distribution, with very bright cells and very dark cells, both of which attract attention, and so are not neutral.
several table cells have the same color, these also draw the eye and brain into finding a connection, and so again, not neutral
some cells have lots of text, some none, same effect with the colors, and again, not neutral


I would add an outer border and differently styled inner borders to make the table more official looking and hence more neutral.

And neutral colors are typically white/beige/gray, and so consider toning down the overall color scheme.

Vote Up Vote Down

@Si6392903

My 2 cents.

1) If you are refering to Joonas coment. You need that some cells doesn't stand out more than others, do not randomize the colors. Do it more mechanical. A Checkboard pattern? The same color for all with a white border in between? The same color each 2 rows?

2) If you refer to context? The blue + the title America at the beguinning looks political or flag-dependent. Inclusive America, Buenos Aires. So, probably you need a gray table.

Vote Up Vote Down