[HN Gopher] Common color mistakes and how to avoid them
___________________________________________________________________
Common color mistakes and how to avoid them
Author : hunvreus
Score : 564 points
Date : 2020-09-06 13:05 UTC (9 hours ago)
(HTM) web link (blog.datawrapper.de)
(TXT) w3m dump (blog.datawrapper.de)
| [deleted]
| adontz wrote:
| Time had shown I have no designer talent and such articles always
| make me sad and angry. The tragedy is that I can actually
| recognize a good design, but cannot produce one.
|
| To me these articles are like showing paralyzed man detailed
| physical explanation of walking, Boston Dynamics' robots, other
| people. Very informational and absolutely not helpful.
|
| Probably some designers looking at software development tutorials
| feel the same.
| azinman2 wrote:
| Which is why people specialize and work in teams. Sometimes
| even being made aware of the challenges can allow someone to
| realize they should ask for help and not produce crap-tastic
| work without realizing it.
| adontz wrote:
| Yeah, but like taking an HTML/CSS template and replacing a
| few standard colors with new ones should not that
| challenging? Or should it?
| phosphophyllite wrote:
| Why she uses "NOT IDEAL" for BAD examples, is this some kind of
| fancy-talk?
| AkelaA wrote:
| I can't help but notice that many of the "non ideal" examples are
| pretty much identical to the colors used by companies like
| Google:
| https://blog.datawrapper.de/img/full-200805_goodcolors28.png.
| Apple is another company that's not afraid to use extremely bold,
| saturated colors in their UI designs:
| https://developer.apple.com/design/human-interface-guideline... -
| in fact the colors chosen in that UI goes against a large amount
| of the advice found on this article, that green to lime gradient
| is pretty much 100% saturated for example, with a background that
| is absolute #000000 black.
|
| The main theme of this article is to try to use complementary
| colors that aren't overly saturated or "pure", which is decent
| enough advice most of the time, but I feel that in an attempt to
| find color schemes that are more "professional looking", the
| author has used colors that come across as overly staid for most
| applications - navy blues and olive greens that are more
| associated with serious banking institutions then anything else.
| Which I guess is fine for infographics that need to display a
| level of trust and seriousness, but maybe not so much for a
| mobile app or social network that wishes to put on a more
| playful, friendlier face.
| dmitriid wrote:
| Google is absolutely horrible when it comes to graphs in GCP
| and IIRC analytics. Indistinguishable shades of blue? Yup.
| Displaying errors with green or blue and displaying other
| values with red and orange? Yup.
| saagarjha wrote:
| Apple's charts are meant to pop out, though; they serve a very
| different purpose than a graph in an article about energy
| consumption in Cambodia. It seems to me that if you're using
| color just for the sake of distinguishing things then you want
| to make them more muted, and if you are trying to draw the eye
| towards something, or give it personality, you go towards more
| vibrant hues.
| [deleted]
| TheOtherHobbes wrote:
| Which is a very relevant point that should have been included
| in the article.
|
| There's also the gender difference. Men are more likely to be
| colour blind, women are more likely to have better colour
| differentiation and also to have a subtly different colour
| hue perception. So women see subtle distinctions with more
| clarity, and see hues biased slightly away from red compared
| to men, with green being seen as slightly more yellow.
|
| https://www.psychologytoday.com/us/blog/brain-
| babble/201504/...
|
| A lot of the work in this area - including ColorBrewer - is
| by Cynthia Brewer, and I suspect that men and women don't
| just use colours and textures in a slightly different way,
| but are also attracted, convinced, and reassured by different
| colours and textures.
|
| This absolutely makes a difference if you're working on a
| site that is gender-specific. Using a generic low-saturation
| palette is going to destroy the appeal of a site with
| predominantly male customers, while a black/brown/grey/red
| site will fail with women.
|
| I've always been impressed by Apple's ability to make
| distinctive designs that bridge the gap and manage to be
| gender neutral. While most laptops are black and angular, an
| MBP appears to have no gender distinction of any kind. This
| is a very cool trick, and much harder to do than it looks.
|
| The point being the target audience matters, and colour is a
| _hard problem_ in design with a lot of context sensitivity,
| and certainly not something that can be reduced to simple
| guidance.
| blackearl wrote:
| It seems like most of these are just "use pastels"
| MattRix wrote:
| You might need to read the article again if that's all you got
| out of it.
| blackearl wrote:
| 3-7 are "use pastels"
| trollied wrote:
| You need to be really careful with picking colours. In a previous
| role I created some reports & associated graphs for the CEO. I
| was really pleased with the visual representations of the data.
|
| He wasn't. He's colour blind.
| allenu wrote:
| This is great practical advice! As a non-designer, I've found it
| hard to find good, succinct resources on color theory that
| actually gets to ground-level suggestions like this. Well done to
| the author.
| dClauzel wrote:
| This is possibly a pretty and interesting article, but the author
| does forget that about 4% (8% men, 0,5% women) of the human
| population suffer from daltonism. So yeah, we like our colours to
| be clearly separated.
|
| Having linear gradients of colours leads to the impossibility of
| distinguishing the data categories, so nop. If you do this you
| MUST also provide another kind of representation, like ColorAdd
| http://www.coloradd.net/ .
| hprotagonist wrote:
| Pick not-Jet and perceptually uniform we're off to a great start.
| The_Double wrote:
| As a color blind person, a lot of his "better" suggestions were
| absolutely impossible to discern to me, while his "worse"
| examples were fine.
|
| I wish more people made visualizations based on brightness rather
| than a hue scale.
| matonias wrote:
| Just that the title says they are mistakes, does not mean they
| really are. I think his 'worse' examples where a lot better
| from a color balance perspective.
|
| Sometimes over-engineering gets you no where.
| HenryBemis wrote:
| From experience: The only thing I agree with on the "do not
| use the basic colors", is that some C-level stakeholder 5
| forwarded emails down the road (and never present on the
| status calls), will not bother to read the damn thing fully,
| and will see the RED on statistic-X and will think that the
| X-thing is doomed and we need to slash this
| project/product/function. Yes, I agree, it's not a color
| thing, it's a RTFpresentation-thing. But the use of non-
| standard colors (red-amber/yellow-green) will avoid these
| mishaps.
| neilk wrote:
| I noticed that too.
|
| The stricture "get it right in black and white" would help, but
| color-blind folks map colors to lightnesses differently. A
| color-blind co-worker believed yellow on white was perfectly
| legible, but a scatterplot with red and blue was
| indecipherable.
|
| Do color blind folks have any tools, like browser plugins, to
| remap images?
| wereHamster wrote:
| Chrome DevTools has a builtin feature to simulate various
| color deficiencies:
| https://twitter.com/mathias/status/1237393102635012101
| dkersten wrote:
| Thanks for this! Very interesting. I just tried it on the
| article and, sure enough, the "better" version of the first
| circles, a number of them do, indeed, look the same when
| emulating any vision deficiency except blurred vision while
| they are perfectly discernible in the "not ideal" versions.
| moron4hire wrote:
| *her
| joshvm wrote:
| These are called perceptually uniform colormaps and are also
| useful for grayscale printing, as the scale will still be
| valid. This is now the default in Matplotlib (eg viridis,
| magma, etc)
|
| https://jakevdp.github.io/blog/2014/10/16/how-bad-is-your-co...
|
| I have found occasion to use Jet though, it's good for
| highlighting transitions between close values when the colour
| scale is large (but not large enough to use a log map).
| chobytes wrote:
| Yeah, I was thinking this was going to be an article about
| making colors easier to see for colorblind people... but it
| actually appears to be the opposite.
|
| Having some degree color blindness is extremely common. Its
| depressing how designers just refuse to take this into account.
| edfletcher_t137 wrote:
| This is excellent thank you. As a non-designer who very often
| struggles with color palette decisions, I feel this will become
| an oft-used bookmark.
| mihaaly wrote:
| I have color vision deficiency, like other 1 in 12 male. Even
| healthy male will not appreciate subtle color variations as far
| as I heard. Putting so much effort into 'pretty' and subtle
| colors to aid understanding will be counterproductive! Focus on
| other means if understanding the message is dear for you.
| Fnoord wrote:
| What is the name of this specific deficiency? I'm curious about
| it, given you state the rarity of 1 in 12 male (which equals to
| ~4% of population).
| mihaaly wrote:
| "red-green" colour vision deficiency
|
| https://www.nhs.uk/conditions/colour-vision-deficiency/
|
| apparently there are other types in addition
| renewiltord wrote:
| Very cool article. I usually just use Kuler and pick out an
| option but that's limiting if you're trying to make it fit in the
| palette of something that already exists. The justifications and
| actions suggested are pretty good here.
| amai wrote:
| It should be noted that the author also has a series of articles
| on visualization for colorblind people in the same blog:
|
| - https://blog.datawrapper.de/colorblindness-part1/
|
| - https://blog.datawrapper.de/colorblindness-part2/
|
| - https://blog.datawrapper.de/colorblindness-part3/
| kuon wrote:
| HSLuv has helped me a lot in creating color scheme.
| samch93 wrote:
| For all things related to color in data visualization, I can
| fully recommend the R-package colorspace. For example, the
| package features colorblind friendly palettes and also the
| possibility to emulate different forms of color vision deficieny.
| See the paper on https://arxiv.org/pdf/1903.06490.pdf and the
| webpage of the project
| https://colorspace.r-forge.r-project.org/index.html
| msla wrote:
| This sounds like someone's personal opinions with, admittedly, a
| certain amount of verifiable information thrown in.
|
| Is this person a known designer? How seriously should we take
| their personal opinion?
| roland35 wrote:
| I think the colors look nice in these visualizations, but I do
| believe it is possible to drift so far in making visualizations
| pretty to the detriment of being clear!
|
| First of all, one advantage of highly distinct colors which is
| discouraged in this article is that.. the colors are more
| distinct across all sorts of mediums. Sometimes you don't know if
| your chart will be printed off on a cheap inkjet and showed to
| the CEO, or blurrily presented on a zoom call over poor WiFi to
| someone who is colorblind. I think the push to usability should
| consider these types of scenarios.
| m12k wrote:
| I'd say if you care about consistency across media, try to make
| your colors have different luminosity, so they can still be
| distinguished somewhat when someone invariably prints them on a
| monochrome printer. Also, pure yellow (and to some extent pure
| green) tends to end up nearly invisible on a lot of color
| inkjet printers, so tweaking the luminosity is also important
| there. Overall I think most of the tips this article advocates
| will also help across various mediums.
| pbhjpbhj wrote:
| For data display luminosity can skew the impression of which
| data dominates. That's a reason not to use luminosity changes
| IMO. However, if you want to convince people you can skew
| their impression of the data without technically lying ...
| [deleted]
| MattRix wrote:
| The article talks specifically about colorblindness and how you
| should look at your visualizations in greyscale to ensure the
| colours are still distinct.
| crazygringo wrote:
| > _one advantage of highly distinct colors which is discouraged
| in this article is that.. the colors are more distinct across
| all sorts of mediums_
|
| Actually this is precisely the opposite. If I understand you
| correctly, you're saying that the advice in the article -- to
| avoid super-saturated colors, super-bright colors, or colors
| evenly spaced around the color wheel -- is bad, because all
| these help increase distinctiveness.
|
| But the reality is that when translating across mediums, like
| inkjet or black and white, these have the problem of _blowing
| out_ , where light colors turn white and dark colors turn
| black. And with colorblindness, you encounter the problem of
| radically different colors becoming indistinguishable.
|
| Whereas if you stick to _less_ contrast but still maintain
| meaningful differences in both hue and lightness, it translates
| _well_ across mediums. Shades don 't get blown out, and levels
| of lightness remain distinguishable.
|
| And as for colorblindness, the article specifically recommends
| using warm colors vs. blue precisely for this reason: "And they
| are accessible: colorblind people can easily distinguish blue
| and orange/red from each other." This is why you _don 't_ want
| to use the whole range of distinctive colors, like red, yellow,
| green, blue, purple all together.
| [deleted]
| [deleted]
| RobertKerans wrote:
| The article is [extremely] explicitly _not_ discouraging
| distinct colours. If you think the opposite to the article is
| true, then I 'm not sure what you're advocating, because it
| isn't distinct colours. The article does talk at length about
| how to adjust for aesthetics, but at no point does it skimp on
| also ensuring distinctness.
| umvi wrote:
| > It will look more professional - and therefore more trustworthy
| - when it only uses a few hues and their neighbors
|
| This sentence rubs me the wrong way for some reason but can't
| seem to articulate why. Maybe because I feel like in an ideal
| world, trustworthiness of information should not be coupled to
| how slick its presentation is.
| nxpnsv wrote:
| You certainly can produce a terribly useless plot with pretty
| colors. If this then adds to trustworthiness, then that's a
| problem. I'd say misleading plots is a bigger issue than choice
| of color or font... however, all other things being equal- go
| for pretty...
| goldenchrome wrote:
| That ideal world is never going to exist because perceptions of
| beauty is coded in our DNA. There are countless studies that
| show that beauty is universally desirable and more objective
| than people think, to a large extent.
|
| https://en.m.wikipedia.org/wiki/Physical_attractiveness_ster...
|
| https://www.nngroup.com/articles/aesthetic-usability-effect/
|
| https://vimeo.com/209961130
| bonestamp2 wrote:
| I know what you mean, but I think there's a bit of nuance here.
| It's not about excessive slickness to the point where the
| design itself is more substantial than the data, it's about
| just enough design so that the presentation doesn't look
| amateur.
|
| I agree that appearance shouldn't impact our trust, but it
| often does. If we showed up to a talk on investing, we might be
| surprised if Rapper 50 Cent took the stage. With his off axis
| baseball cap, his team jersey and gold chains, we might be
| questioning whether we should really listen to his investment
| advice... until he tells us he walked away with $7 million from
| one of his moves, or $60+ million from another.
|
| On the other hand, if he had just walked out in khakis and a
| dress shirt, we probably wouldn't have questioned him before he
| spoke. Nobody is impressed by khakis and a dress shirt, but
| it's just enough that we don't question his trustworthiness,
| giving the data a fair chance to come through and be trusted
| (or questioned) on its own merit.
| dahart wrote:
| > in an ideal world, trustworthiness of information should not
| be coupled to how slick its presentation is.
|
| On the surface and without context, this sounds like an ideal,
| but it's an interesting question and I wonder if you and I
| would really want that ideal. I'm not so sure that
| trustworthiness and presentation are separable nor whether I
| think they should be. Just Google "ugly web pages" and really
| imagine how many of them you could see yourself trusting. When
| there are clear signs that some information has had no thought
| put into the presentation, isn't it reasonable and natural to
| start assuming that lack of attention extends to the
| information itself? Presentation is a very important part of
| how information is interpreted. It's easy, for example, with
| bad color choices to accidentally emphasize one piece of data
| over another, and therefore to mislead the viewer - like how
| something yellow or bright green tends to dominate next to dark
| grey. By choosing colors carefully like in the article, the
| presentation can actually make the information more neutral.
|
| An interesting followup question might be: what characteristics
| should make information trustworthy? What other cues should I
| look for in a presentation to know whether something is
| trustworthy? Ideally, the trustworthiness of information should
| depend solely on whether it's true, right? But ignoring that
| there are points of view and shades of true, in the world we
| live in, we use other cues like who is the presenter and what
| are their credentials, whether we agree with the conclusions
| beforehand, whether we were seeking the information or it was
| pushed, whether the presentation is informational or agenda
| driven, and lots of other things... since it's often impossible
| to know whether information is true or not without resorting to
| original research. What cues should we use to establish trust
| in information without having to do original research?
| MattRix wrote:
| This just common sense. Go take a scientific paper and format
| it in large pink comic sans and see how it changes your
| perception of it.
|
| The presentation of information is important. Not just the
| visuals, but even word choice. For example, you chose to
| criticize "professional" presentation as "slick", a word that
| more easily conveys a negative meaning.
| mjw1007 wrote:
| These days on the web, I think my brain is taking
| non-"professional" presentation as a positive signal.
|
| Compare these two sites:
|
| https://lygte-info.dk/
|
| https://www.lifewire.com/best-rechargeable-battery-
| chargers-...
|
| Before looking at the content, my bias is that the former is
| going to provide more reliable information.
| lifeisstillgood wrote:
| I have always felt that a polished presentation shows
| (heuristic) that the author has got past the poring of trying
| to work out what they wanted to say and then gotten to the
| point of making the visuals follow their theme - in other words
| it shows they have a clear idea of what they wanted to say and
| have had suffice t time left over to work the presentation.
|
| I am reminded a bit of a jeff below story and a kissinger
| story.
| srtjstjsj wrote:
| It's also possible they skipped over trying to work out what
| they want to say, or more likely and worse, they know what
| they want to say but they skipped over the work of collecting
| good data that supports what they are trying to say.
| KineticLensman wrote:
| > a polished presentation shows (heuristic) that the author
| has got past the poring of trying to work out what they
| wanted to say
|
| Yes, although equally sometimes polish can draw attention
| away from a lack of substantive content
| bigyikes wrote:
| If I've done my job right, the visuals are beautiful and
| also the least important part of my presentation.
| mathgenius wrote:
| I'm very interested, but also skeptical. How do I know this isn't
| just fashion ? I would be more convinced if this was backed up by
| scientific studies, or even just showed examples more than a few
| years old. What were they doing in the 1960's ? People have done
| studies showing that fonts with serif's increase comprehension
| (at least in printed form) of words. Have similar studies been
| done with colours? Otherwise this article could be complete bs
| written by someone with a fetish for pastels. Five years from now
| this same person could be writing about how colours need to have
| more zing, and reversing all these "not ideal / better" diagrams.
| Remember when webdesigners went crazy using low-contrast fonts
| that were barely readable ?
| bjt wrote:
| Exactly the point I came to make. In a blog about data, I would
| like to see color recommendations backed by research and data,
| not just the author's aesthetic preferences.
| rivo wrote:
| For a visualization project, I needed to be able to automatically
| generate a visually pleasing colour palette. Customers would
| provide one or more base colours (e.g. based on their corporate
| design rules) and the generated palette should then complement
| those base colours. So it didn't help to manually pick those
| colours in advance because they may not play well with the base
| colours.
|
| If you find yourself in a similar situation, I wrote a blog post
| on how such a palette can be calculated:
|
| https://rentafounder.com/generating-colour-palettes-for-char...
|
| The algorithm basically picks colours one by one, each being the
| most distant colour to all previous colours within the same
| saturation plane, all in CIE94 space.
|
| It ended up working quite well.
| kstenerud wrote:
| "In the video above, I used the color tool Paletton to start with
| a tetradic harmony and then decrease the distance. Note how more
| beautiful the color combinations become."
|
| Uhhh... no, I don't get how the end is more "beautiful". How do
| you determine what is a beautiful color combination, and what is
| not?
| austinhutch wrote:
| Great article! Another nice resource for picking colors in data
| visualizations is from Stephen Few:
| http://www.perceptualedge.com/articles/visual_business_intel...
| davidivadavid wrote:
| Can also recommend his book, _Show me the numbers_. A nice
| companion when you 're done with Tufte.
| vharuck wrote:
| My go-to has been Color Brewer: https://colorbrewer2.org
|
| But this article will help me make my own palettes for specific
| goals. A lot of categories have "common sense" colors (e.g.,
| blues for male, pinks for female). Using those makes it easier
| for people to read charts without repeatedly looking at a
| legend or annotation. But I'd like to have the colors show
| multiple categorical variables. It should be just as easy to
| identify and compare white men versus white woman as it is to
| compare white men versus black men.
| fbelzile wrote:
| Very well written and surprisingly practical information in here.
|
| I've used Paletton before when trying to make a good colour
| scheme but I've never been impressed with the results. I guess I
| was using it wrong:
|
| _> In the video above, I used the color tool Paletton to start
| with a tetradic harmony and then decrease the distance. Note how
| more beautiful the color combinations become.
|
| > Our colors are opposite each other on the color wheel, so
| they're clearly complementary. Yay! But they're also unusable:
| The two oranges are way too similar. And everything looks so...
| bright. There's where we need to change the saturation and
| lightness._
| jacobolus wrote:
| > _The green is...can you even call it a green ?_
|
| Nadieh's questioned green is much closer to "unique green" (a
| typical observer wouldn't think it looked partly blue or yellow)+
| than the CSS color "green" (based on the display's "G" primary),
| which is shifted way toward yellow and should properly be called
| "yellowish green" or the like. It's also much less colorful (the
| hues would be easier to compare if both had the same
| colorfulness).
|
| Likewise Nadieh's red closer to unique red (and much less
| colorful) than the RGB "R" primary, which should really be called
| "orangish red".
|
| > _Avoid pure colors_
|
| All three of the colors in the "better" picture are close to
| unique hues (yellow, blue, green). All three of the colors in the
| "not ideal" category are based on the display's primaries
| ("orangish red" R, "purplish blue" B, "yellowish green" G), not
| at all close to "pure".
|
| +: Unique hues vary from person to person, and unique green in
| particular has wide inter-observer variability.
|
| * * *
|
| The extremely poor naming of CSS/HTML colors and the rather
| arbitrary constraints imposed by 3-primary RGB emissive displays
| and inadequate/misleading graphical tools for picking colors have
| seriously skewed many people's color concepts.
|
| To restate the main idea from this article: don't use overly
| intense colors. Stay away from CSS named colors, because they are
| based on the furthest extremes of the display's gamut, and are
| overly colorful.
| tibbar wrote:
| Great stuff. My team recently had to create visualizations using
| a very large number of colors (dozens, plus some gradients),
| because we were representing many distinct values in a number of
| dimensions. It was very difficult to make it work, but
| considerations like the ones here helped a lot.
| hansvm wrote:
| The author touched on colorblindness, but I think it's important
| to point out that:
|
| (1) It can be a fair chunk of your audience -- 1/10 men are
| colorblind in some locales.
|
| (2) There are many flavors of colorblindness. Tools like
| https://www.color-blindness.com/coblis-color-blindness-simul...
| are helpful to make sure your palette works for most of them.
|
| As a practical matter, adjusting some parameter like texture in
| addition to hue is helpful. If you adjust lightness or saturation
| it'll serve the dual purpose of making your charts understandable
| when printed in black-and-white.
| Chris_Newton wrote:
| _(2) There are many flavors of colorblindness. Tools
| likehttps://www.color-blindness.com/coblis-color-blindness-
| simul.... are helpful to make sure your palette works for most
| of them._
|
| For those doing web work, Chrome has a helpful way to simulate
| some of the most common vision deficiencies in its developer
| tools. From the menu, open the More tools - Rendering panel,
| then down at the bottom there is a setting called "Emulate
| vision deficiencies". It can do blurred vision as well as
| several types of colour blindness.
| mpetroff wrote:
| Adding to this, the Chrome (83+) and Firefox (81+) developer
| tools both do a reasonable job at the simulation, using the
| method of Machado et al. (2009) [1].
|
| Unfortunately, the linked to simulator, like many of the
| online simulators, does a very poor job. When simulating
| protanopia, reds should appear darker, due the lack of L
| cones. However, many simulators incorrectly display red as
| bright green instead.
|
| I've also written a color picker that uses the Machado et al.
| method to enforce CAM02-UCS minimum perceptual distance for
| normal vision and color vision deficiency [2].
|
| [1] https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulat
| ion... [2] https://colorcyclepicker.mpetroff.net/
| Chris_Newton wrote:
| _I 've also written a color picker that uses the Machado et
| al. method to enforce CAM02-UCS minimum perceptual distance
| for normal vision and color vision deficiency
| [https://colorcyclepicker.mpetroff.net/]._
|
| That seems like a very useful tool for planning new colour
| schemes. I wish there were more discussion and tools based
| on true human perception of colours, not just numerical
| representations that aren't necessarily calibrated to how
| human vision works.
| eat_veggies wrote:
| For this there are things like the Lab color space!
|
| https://en.wikipedia.org/wiki/CIELAB_color_space
| Chris_Newton wrote:
| Yes, much better ways of representing and working with
| colours are known. Sadly, support for them is missing in
| most of the software we use, including Adobe Illustrator
| and Photoshop, the Affinity suite, Sketch, Figma and all
| major browsers. The best we get out of the box is usually
| HSB/HSL.
|
| Of course, you _can_ make the effort to construct a
| colour palette using a better model and then convert the
| colours. However, as soon as you start deviating from
| those carefully chosen colours -- to build a gradient, or
| to apply filters or transparency, for example -- you're
| back to relying on the software to do the maths, and if
| its internal colour model is weak, the results will
| reflect that.
| rriepe wrote:
| > Machado et al. method
|
| Can you share the specific resource you used? Very
| interested in writing something like this into my own
| project.
| sndwnm wrote:
| All the articles I've seen about the topic talk about how to
| select a palette of 2-4 colors. How would one go about picking
| something like 8 hues, with different levels of emphasis for some
| of them?
|
| I'm trying to do something akin to designing a terminal color
| scheme. I've seen some websites that let you put in values and
| see how the color scheme would look like, but I'm more interested
| in insight to how to make it look aesthetic. Colorblind
| friendliness is not a high priority.
| spajus wrote:
| I recently tried to answer the same question for myself when I
| wanted to figure out what color palette to use in my game.
| Basically the idea is that you can divide the 360 degree hue
| into even sections and get colors from that. Put different
| luminosities in the mix and set same saturation of everything,
| and you've got yourself a beautiful palette with tons of
| coherent colors.
|
| I haven't found a tool that would help generating such
| palettes, so I built one for myself, feel free to use it:
|
| https://kodolinija.com/tools/hsl-color-palette-generator/
| sndwnm wrote:
| Excellent! Thank you.
| sosborn wrote:
| https://color.adobe.com/create/color-wheel
| Chris_Newton wrote:
| _How would one go about picking something like 8 hues, with
| different levels of emphasis for some of them?_
|
| I'm not sure what you are looking for in terms of emphasis, but
| if you want to work with lots of hues, I recommend looking into
| "perceptually uniform colour spaces".
|
| It's not unusual to see a colour wheel with "pure" red, green
| and blue (in the RGB-on-your-screen sense) at angles of 0deg,
| 120deg and 240deg. Then you "interpolate" and get yellow, cyan
| and magenta at 60deg, 180deg and 300deg. More colours get
| filled in to complete the wheel.
|
| Now, there are all kinds of things wrong with this. However,
| possibly the biggest problem is that you can't just pick evenly
| spaced colours around a wheel set up like this, say ten hues
| that are 36deg apart, and get a good set of perceptually
| distinct colours as perceived by a human looking at them. Go
| ahead and try it; you'll find that some of the colours you get
| around the green part of the wheel _appear_ much more similar
| than most of the others.
|
| This sort of problem was recognised long ago by Munsell, who
| attempted through experimental research to find a way to
| represent colours where the steps _appeared_ even to a human
| viewer. This resulted in the Munsell colour system, which is
| essentially a huge but quite useful look-up table that will
| give you perceptually even colours just by varying say the hue
| or value by the same number of steps. Later efforts by the CIE
| would try to codify those ideas in more mathematically
| tractable ways, and the CIE colour spaces in expert use today
| still have much the same ideas underlying them.
|
| If you took a Munsell colour wheel and picked hues in 10 even
| steps around the wheel (for the same value and chroma), and
| then converted the resulting colours back to the bad but
| popular colour wheel described above, what you'd find is that
| the converted hues would have bigger changes in some areas,
| particularly around the greens, and smaller changes in others,
| which would compensate for the problem described above and give
| a more visually even palette.
|
| This rabbit hole goes pretty deep, because this is already
| quite a long comment and I've only talked about hue so far. It
| turns out that getting perceptual uniformity on the other axes
| is not always trivial either, not least because the available
| value and chroma options differ from one hue to another: we
| can't perceive any blue that looks anywhere near as strong as
| the strongest yellows we can see, for example. Depending on
| what your palette is for, this can be very important, because
| as others have noted, it's a good idea to vary more than just
| hues if you're trying to construct a palette of clearly
| distinct colours for things like drawing charts or other data
| viz work.
| ChrisMarshallNY wrote:
| Quite common sense, but not a new issue. "Color Set" books have
| been sold for decades, and there's a number of sites (I have a
| few bookmarked [0]-[4]), that have great JS implementations.
|
| But it's a great explanation. I think this is something that
| everyone should know, so the more material out there, the better.
|
| [0] W3Schools is not everyone's cup of tea, but they have a great
| section on colors: https://www.w3schools.com/colors
|
| [1] Colorblind design is important. This helps with that:
| https://www.toptal.com/designers/colorfilter
|
| [2] I've found this tool useful: http://paletton.com
|
| [3] "Clickbaity," but also fairly useful:
| https://www.colorcombos.com
|
| [4] This is a cool tool: https://www.colorbox.io
| OJFord wrote:
| > [1] Colorblind design is important. This helps with that:
| https://www.toptal.com/designers/colorfilter
|
| I'm colour-blind; I've never known exactly what type (for sure
| red/green).
|
| I can tell the difference between original/filtered at that
| link for both protanopia and deutanopia, though they _are_
| close. Perhaps that means I have both /a mixture. (They're
| described there as being anomalous red vs. green cones, so it
| seems reasonable that I could have anomalous both.)
|
| When it comes to 'colour-blind mode' settings I set my mild
| annoyance (could you not just pick a friendly default? It's not
| like I can't see any reds (for example) at all) aside and just
| pick whichever type is most visually pleasing or easily
| distinguishable.
| abhgh wrote:
| Thank you for the links!
|
| I find Adobe Color quite helpful to find a palette for
| visualization [1]. Its been around for years now, although I
| think the original website was called Adobe Kuler.
|
| For categorical colormaps, I have found the python Glasbey [2]
| library helpful. Note: the first run can be slow.
|
| [1] https://color.adobe.com/explore For popular themes filter
| using "View" (right side of the screen under the main banner)
| and pick "Color Themes" => "Most Popular"
|
| [2] https://github.com/taketwo/glasbey
| scns wrote:
| colorhexa.com is my goto for colors. Shows how colors are
| perceived by colour blind and much more.
| cullinap wrote:
| This is a great article.
| cjohnson318 wrote:
| > It's fascinating to see how desaturated many colors are around
| us!
|
| I do a lot of watercolor, and it truly is amazing how much of our
| world is some shade of mud, and how far you can get with a couple
| of muddy pigments. Sargent did a lot of watercolor in sketches in
| Venice with just ultramarine, cerulean, raw sienna, burnt sienna,
| and a tube of white. James Gurney gets a lot of mileage out of
| the "six-pack" white, black, raw umber, yellow ochre, venetian
| red, and cobalt.
| kumarvvr wrote:
| Awesome article. Colors make or break everything visual. This
| guide is also very useful for web sites.
|
| Edit : Perhaps someone can create a color selector that
| incorporates her recommendations, like avoiding primary or
| saturated colors, avoiding certain colors, etc.
| Brajeshwar wrote:
| My friend has a tool that we often use - https://colorcolor.in
| andrepd wrote:
| Eh, the article title should actually be just "how to pick more
| beautiful colours" period, since it talks very little about
| actually choosing colours _for data visualisation_ , that is, how
| to choose a visual presentation that helps make sense of the data
| you're showing. Example: https://colorbrewer2.org/
| gerbler wrote:
| I completely agree - this is almost entirely around visual
| presentation (which is subjective) and not around practical
| limitations for color choice. I'm a big fan of colorbrewer to
| help make these choices for me!
| jeffbee wrote:
| For visualizations you will probably reach for a convenient
| palette already provided by your software, like
| https://ggplot2.tidyverse.org/reference/scale_brewer.html or
| https://observablehq.com/@d3/color-schemes.
| JadeNB wrote:
| For some reason the HN title, which was originally the actual
| title, has been changed to "Common color mistakes and how to
| avoid them", which seems weird. The actual title ("How to pick
| more beautiful colors for your data visualizations") doesn't
| seem clickbait-y, so why take the subtitle instead?
| tomrod wrote:
| I think this article is great. I don't like to be contrarian;
| however, I'm going to nitpick two small items.
|
| [1] The color blind focus is red-green in the descriptions. The
| author acknowledges other forms of color blindness, and I would
| recommend more emphasis outside of red-green.
|
| [2] The tradeoff of visualizations is the visualizer guiding the
| narrative discussion and the audience wanting to triangulate
| additional information based off the visual. I have worked in
| organizations where the piechart (leading the "Avoid bright,
| saturated colors" section) would be reamed since there isn't
| enough visual difference between Laos and Japan. Especially in
| instances like line charts where this visualization methodology
| is used.
|
| Beyond that, I felt like this was a well-written article on the
| subject.
| tsimionescu wrote:
| Regarding nitpick 2, all of the blue colors are identical
| between the two charts, I think the only point that chart makes
| is about the yellow/ochre(?) for the USA slice.
|
| However, I absolutely agree that there is no way for me to read
| that chart, other than looking at the order of the blue slices
| (they are in the same order clockwise as the legend).
|
| I think one additional factor that should be considered when
| choosing colors specifically for presentations is "will the
| speaker be able to describe the color of one particular item
| based on its color, in terms the audience will understand?" For
| example, if you have to say "Japan is the ochre line" or
| "people 45 or older are the vermillion line, while people 20 or
| younger are the carmine line", that may be a problem in some
| circles, even if the two colors are easy to distinguish
| visually. This is likely not a problem when you have the option
| of saying "the darker red" vs "the ligher red", but if you
| start having more versions of the same general hue, you may
| quickly run out of words.
___________________________________________________________________
(page generated 2020-09-06 23:00 UTC)