Re: [css-color] Material design color names

(Sorry, I meant to post this to the mailing list, so I apologize to 
Florian in advance if he receives this message twice.)

The use case I had in mind was a string-to-color converter,
programmed for use in non-CSS contexts, which parses a
color string and converts it to its red/green/blue equivalent.
For example, my color parser supports the "#XXXXXX", "rgb",
"rgba", "hsl", and "hsla" formats and SVG color names, all
of which are defined in the CSS color module level 3.  Including
the material design color names would give this color parser
a list of named colors that is varied, general-purpose, and
intuitive (just as intuitive, some may argue, as the HSL
colors, if not more so), and is more systematic than the SVG
color name list, without the feel of adding an unstandardized
extension (to the color parser) that no one else has programmed
for that purpose.

On your concern that we would "be standardizing color
names for the rest of our lives", there are certain considerations
in play here. I proposed the material design colors because they are
varied enough for general use, are openly available, and
most importantly, are widely implemented in Web sites.
Many other color naming schemes don't have all of
these advantages. For example, the Pantone color codes are
designed more for print works than the Web and are not as openly
available as the material design color codes, so I wouldn't propose
standardizing Pantone color codes for a CSS color module.
Another example is the Visibone Anglo-Centric Color Code
(VACCC) by Bob Stein, which assigns a name to each
of the historical "Web safe colors", making them about as general-
purpose as the material design colors.  But unfortunately, the
VACCC has largely not been implemented for Web sites, and
is largely unused in open-source code as I can see from my
GitHub searches, making the VACCC also unsuitable for
standardization.

--Peter

On 12/22/2016 03:28 AM, Florian Rivoal wrote:
>> 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 09:29:41 UTC