NYCPlanning / nyc-planning-style-guide

Base styles for NYC Department of City Planning (using Foundation for Sites)
https://nyc-planning-style-guide.netlify.com/
1 stars 1 forks source link

Darker color swatches #24

Open andycochran opened 4 years ago

andycochran commented 4 years ago

@daragoldberg points out that it'd be beneficial to have an even darker version of each hue in the color palette.

andycochran commented 4 years ago

First, a note: In the existing color palette, the darkest colors were established by making them all generally the same luminosity, while also being visually distinct from each other and visually distinct from black. They are already so dark that their use is extremely limited by accessibility.


Here's a first pass at adding an almost-black version to each hue. I took the current dark colors, increased their saturation to 100%, then adjusted their luminosity individually so that they're each not quite black:

dcp-color-palette-tmp

One problem with creating these almost-blacks this way is that… 

  1. The almost-blacks are not very visually distinct from each other
  2. The difference between the dark and almost-black is more apparent in some hues and less in others

Another method would be to make some hues more black than others, so that so that each hue has a similar visual difference between its dark and almost-black:

dcp-color-palette-tmp

This makes all the the almost-blacks a bit more visually distinct from each other. But only the reds/blues are "almost black." The greens/golds aren't as dark.

A HUGE caveat here is that (with either method) these colors are not visually distinct enough and their use will be extremely limited by accessibility.