[css-color] Material design color names

(This message was originally sent to this mailing list on December 8, but
I found out just now that I should be subscribed first.  A detail that I 
didn't
mention in the original message, but believe I should do in the interest
of disclosure, is that I am not a Google employee.)

As I see, Google's material design color palette and its color names
(<http://www.google.com/design/spec/style/color.html>) have been very
widely implemented on Web sites (an example is
<https://github.com/angular/material2>, a set of material design
components for Angular).  The material design palette consists of
nineteen "primary color" hues, sixteen "accent color" hues, as well as
black and white.  The "main" color of each hue has the value "500",
tints have lower values (from 50 to 400), and shades have higher values
(from 600 to 900).

Examples of material design color names seem to be "red-500",
"red-a400", "gray-500", and "deep-purple-50".  These names have come to
represent very specific colors from the material design color palette,
as I can see from doing GitHub searches for those color names
(especially in LESS and SASS stylesheets).

I would like some thoughts on whether these color names should be
included in the CSS level 4 color module or a future level of CSS.
(Whether the names should have hyphens is to be discussed afterward.)

A related suggestion would be to include support for creating "500",
"800", "A400", etc. versions of any color based on the gradations used
in the material design palette (even though the material design colors
don't seem to follow a specific algorithm), but this is not a priority
for now.

--Peter

Received on Wednesday, 21 December 2016 23:18:51 UTC