I used to design in flash. Sometimes I miss it, but it was the first time I started really thinking about using a grayscale for hierarchy. When your trying to make a systematic color scheme, itâs handy to keep a scale. For example if you style headers dark grey and body light grey and active states mid gray and hovers black, youâll need a reference point if there are changes to make everything a bit darker or a bit lighter or add a bit more contrast or a bit less contrast.
(Above left) Flash default color picker. (Above middle) Fireworks color picker with neutral grayscale as well as warm and cool. (Above right) Sketch color picker with grayscale added manually.
(Above, left to right) Standard 6 Color Greyscale. #FFFFFF, #CCCCCC, #999999, #666666, #333333, #000000. I will assume this is a standard because it falls within the old 256 web color standard.
16 Â (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)
(Above left to right) 16 Color Greyscale. If you can count and recite the alphabet itâs pretty easy. #FFFFFF, #EEEEEE, #DDDDDD, #CCCCCC, #BBBBBB, #AAAAAA, #999999, #888888, #777777, #666666, #555555, #444444, #333333, #222222, #111111, #000000
(Above left, middle, right) Center color is #808080 in each image.
It wasnât after a few years that I realized that the grayscale scheme I was using did not contain an absolute middle gray. And so these where made.
(Above left to right)Â #FFFFFF, #E6E6E6, #CCCCCC, #B3B3B3, #999999, #808080, #666666, #4D4D4D, #333333, #1A1A1A, #000000
(Above left to right) #FFFFFF, #F2F2F2, #E6E6E6, #D8D8D8, #CCCCCC, #C0C0C0, #B3B3B3, #A6A6A6, #999999, #8D8D8D, #808080, #737373, #666666, #595959, #4D4D4D, #404040, #333333, #262626, #1A1A1A, #0D0D0D, #000000
(Above left) Cool gray. (Above middle) Neutral gray. (Right) Warm gray.
(Above) Neutral grayscale
stormborns
vaporwave
romaincrisis
pixelskylines
titsay