W3C home > Mailing lists > Public > www-style@w3.org > October 2006

Re: CSS color palettes

From: Damian Vila <damianvila@gmail.com>
Date: Mon, 30 Oct 2006 21:18:16 +0100
Message-ID: <45465E08.4080409@gmail.com>
To: Garrett Smith <dhtmlkitchen@gmail.com>
CC: www-style@w3.org

Garrett Smith escribió:
> I hear you, Damian.
>
> A "maroon" and color00 are not semantic. .
>
> I prefer not "maroon", but instead "header-border-color". That way, 
> you know what it's applied to.
>
> What you've done is added an extra layer of abstraction. e.g. "here is 
> my color palette, not saying what it will be used for, color00 is 
> def'd with a value (#800) and a name ("maroon").
Yes, that is precisely my intention. To create a new layer of 
abstraction for color. To separate color from content.
In practical terms it means that you can change the color of the content 
as you wish.
The creation process will be made in layers: first put (get in the case 
of the user agent) content, then style it, then color it.
My intention is to find a way to recolor it without re-styling it. If 
you have low vision, or are color-blind you can re-color the content 
without re-styling it. You can create several color palettes for 
low-vision or color-blind people, black and white for B&W printers or 
different sections of the site, if you wish. The browser may get the 
style once and then change the color accordingly.
As I told before, I'm not a programmer, but I belive it will be more 
efficient to get the style once and then the color and keep the colors 
sepparated from the style in order to recolor it if you want to re-use 
the style but not the color.
>
> You have to maintain the keyword name and the hex value in parallel, 
> and this is not good.
>
There's no need to keep them in parallel. You can get rid of the keyword 
(in wich case the value is ignored and the defaul browser color is 
used), re-define the keyword, asign the keyword to another pre-defined 
color, etc.
I'm sure a better syntax for the palette is needed.
> Instead, you can just define colors separately. It is annoying, but 
> makes skinning more modular. All you have to do is change the CSS file 
> and you're done.\
>
> This approach is cumbersome, but actually works farily well:
>
> .header-border-color, form-border-color {
>     border-color: #800;
> }
>
> .header-background-color {
>     background-color:
> }
>
> The important thing is to be semantic because otherwise, you get 
> confused. I once worked on a project where everything was like ".c4-bk 
> { color: #7898f9; }" I'm sure it made sense to the guy who wrote it. 
> That was annoying....
>
> Garrett
Yes, I'm trying to think a way to make it more consistent. But frankly, 
not all header-border-colors are always the same color, you are probably 
talking about the header-border-color of the element identified as 
"#logo", or the header-border-color of the "#news-title" element. Both 
may be "red" or not. You can define them using a color definition or an 
existing keyword.Why not give the designers tha ability to expand that 
keyword palette or pre-define colors?
I think "color01" id pretty semantic, independently of it's color 
definition or keyword.
I hope you understant what I'm trying to say. I know we designers are 
not always very logic. :-)
Thanks for your reply.
>
> On 10/30/06, *Garrett Smith* <dhtmlkitchen@gmail.com 
> <mailto:dhtmlkitchen@gmail.com>> wrote:
>
>     I hear you, Damian.
>
>     A semantic way should be used to address the color usage.
>
>     Not: "maroon", but "header-border-color".
>
>     But what you've done is turned it around and added an extra layer
>     of abstraction. e.g. "here is my color palette, not saying what it
>     will be used for, color00 is def'd with a value and a name.
>
>     You have to maintain the keyword name and the hex value in
>     parallel, and this is not good.
>
>     Instead, you can just define colors separately. It is annoying,
>     but makes skinning more modular.
>     This approach is cumbersome, but actually works farily well:
>
>     .header-border-color, form-border-color {
>         border-color: #800;
>     }
>
>     .header-background-color {
>         background-color:
>     }
>
>     The important thing is to be semantic because otherwise, you get
>     confused. I once worked on a project where everything was like
>     ".c4-bk { color: #7898f9; }" I'm sure it made sense to the guy who
>     wrote it. That was annoying....
>
>     Garrett
>
>
>
>     On 10/30/06, *Damian Vila* < damianvila@gmail.com
>     <mailto:damianvila@gmail.com>> wrote:
>
>
>         David Woolley escribió:
>         >> If you want to read an argument for its use you can browse
>         to my blog:
>         >>
>         http://damianvila.wordpress.com/2006/10/23/css-color-palettes-2/
>         <http://damianvila.wordpress.com/2006/10/23/css-color-palettes-2/>
>         >>
>         > You need to give the essence of the use case here; some
>         people read
>         > mail offline.
>         You are right. Sorry for the inconvenience.
>         This is the rationale behind the proposed idea. Keep in mind
>         that it was
>         taken from a blog intended for graphic and web designers:
>         "One of the best features of CSS is implied in its own name:
>         cascading.
>         It means that, if you change a style definition, all elements
>         of a page
>         that have that style applied will change at the same time in a
>         "cascade".
>         As recomended by ths W3C designers must not rely on color alone to
>         convey information. That's a reasonable recomendation that we
>         designers
>         must always follow.
>         As you designers probably know, we use to work with color
>         palettes.
>         Usually a documents has a previously decided range of colors,
>         often
>         limited to just a few, that we use throughout the document. In DTP
>         applications we define this color palette and use it to apply
>         color to
>         the different styles in use. In that way, if we want to change
>         the color
>         scheme, we just have to redefine the color palete and the
>         change is
>         applied to all the elements that use that colors in the
>         document, giving
>         the document a different feeling. In the same way, we can use
>         the same
>         style but different colors for different document sections.
>         But in CSS,
>         if you want to do that you have to creave a whole new style
>         sheet, doing
>         a "find & replace" all over the CSS to change the color
>         definitions.
>         That's why I'd like to see CSS Color Palettes implemented in
>         CSS3. In
>         that way colors can cascade the same way other styles do.just by
>         specifying a new sub-palette´. You can use the same CSS for
>         different
>         sections, or you can use the same font size, face, etc. but
>         change the
>         overall feeling by just changing the colors in an easy way."
>         I hope this clarify the idea.
>         Also, remember that I'm a graphic designer, so my programming
>         knowledge
>         is very low. I was counting with the rest of the community to:
>         1) tell
>         me if the idea was feasible and 2) propose the proper syntax.
>         Thanks.
>
>
>
>
>     -- 
>     http://dhtmlkitchen.com/ 
>
>
>
>
> -- 
> http://dhtmlkitchen.com/ 
Received on Monday, 30 October 2006 20:18:37 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:47 GMT