colors for generation clock

[pixelzoom]

Related to colors used for the generations clock...

In #92 (comment), @amanda-phet said:

• Might using shades of green for both food and fur lead to color-coding misconceptions?

This is something I've wondered about, but it is difficult to find colors to associate with traits in a helpful way, so we picked three colors that are recommended for color-blindness. I suppose we could find a different color for food, or use the same color for both food and wolves (since they are in different regions now).

• Should the food color-coding be reviewed for color-blindness compatibility?

I did a color-blind test and the green and pink regions in the generation clock aren't great for red-blind folks. Let me try playing with the colors a bit.

[pixelzoom]

We're getting close to publishing a public preview version for #116. @amanda-phet is this issue something that you want to address before we publish the preview?

[amanda-phet]

The illustrator protanopia color-filter doesn't make it seem like the pink+green is a problem. However my color blinding Chrome add-on makes it seem like it is a problem. Since I'm not color-blind, I'm not sure which is more "accurate."

In either case, can you confirm that the pink you are using is #f473a7? It seems bolder than the pink I'm seeing in the sim, which is registering as #CB78A2 using a color-picker add-on. If we make it bolder, it might fix this situation.

[pixelzoom]

There are no clock colors specified in the design doc. I picked the pink out of one of your mockups using the Digital Color Meter app on macOS, which tells me that it's rgb( 203, 120, 162 ). I've been using that color since 6/2/2020.

Easy to change it. But where did you get #f473a7? Did I miss something?

[pixelzoom]

Clock color changed to #f473a7 in master (and verified that Digital Color Meter app is accurate).

Here's the complete set of colors used by the clock, from NaturalSelectionColors.js:

  // Generation Clock
  CLOCK_FILL: '#f473a7', // pink
  CLOCK_STROKE: 'black',
  CLOCK_REVEAL_COLOR: 'rgba( 255, 255, 255, 0.4 )', // transparent white
  CLOCK_FOOD_SLICE_COLOR: 'rgb( 0, 210, 0 )', // green
  CLOCK_WOLVES_SLICE_COLOR: 'rgb( 102, 102, 102 )', // grey

[amanda-phet]

This is looking a lot better on my color-blindness plug-in, in addition to illustrator. I think these colors are suitable now for color-blind individuals.