Re: [css-color] Material design color names

> On Dec 22, 2016, at 08:18, Peter Occil <poccil14@gmail.com> wrote:
> 
> (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.

I think this would be good to allow use of names like this, without necessarily hardcoding them in the standards, because there are so many naming schemes out there that if we start down that route, we going to be standardizing color names for the rest of our lives.

First, you can already sort of roll your own using custom propoerties

:root {
--md-red-a400: #ff1744;
--md-red-500: #f44336;
/*...*/
}
foo {
  background: var(--md-red-500);
}

Support is already pretty decent:
http://caniuse.com/#feat=css-variables

Further down, css-color level 4 offers a mechanism that would allow for a nicer and more specialized syntax:

@color-profile md {
  src: url("https://www.exammple.com/material-design-colors.icc");
}

foo {
  background: color(md, "red-500");
}

—Florian

Received on Thursday, 22 December 2016 08:28:38 UTC