hi all,
i want to know the name of the colors used in css.please give the name of the color for the below ones…using words likr red,green…etc
#ccc-
#aaa-
#000-
#333-
#ccc - gray80
#aaa - sgilightgray
#000 - black
#333 - gray20
NOTE: The color names for #ccc, #aaa and #333 aren’t web safe colors so it would be much more semantic to use the hex codes instead.
They’re all shades of grey, due to the red/green/blue components of each color being the same.
SgtLegend gave the full names for those colors, but #ccc is the brightest shade in your collection, closely followed by #aaa
The #333 is a very dark shade of grey, and #000 is black
Here’s quite a good page which lists names for many other colors. RGB to Color Name Mapping(Triplet and Hex)
And another less cluttered page is: CSS Color Chart
If you are interested in web-safe colors, there’s Web Color Chart - Hexadecimal - by VisiBone
instead of #ccc can we replace it with gray80 in a css code like the below one…
ul#menu li a
{
background:gray80;
color: red;
padding:8px;
}
will it be effecient…
It can work, but older web browsers may not understand the full names. What do you mean by efficient?
What is commonly done is to use the full hex value, and to use a comment to indicate the name of the that hex value.
For example:
/*
-- COLOURS --
Headings: #c1b196 red
Light Fill: #fAf0e6 linen
Fill: #e4dfcc sand
Dark Fill: #cdc8b1 cornsilk3
Text: #1e1e1e sgigray12
*/
Another issue with using only named colors is that you are severely restricting your color palate from 16 million colors down to just a thousand or so.
gray80 is not valid and I would recommend that you don’t use it.
The basic css colour keywords available for use are listed here with [URL=“http://reference.sitepoint.com/css/colorvalues”]more information here. [URL=“http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-colors”]Accessibility guidelines state that you should use numbers and not names for colours.
I don’t understand that bit about accessibility. The 16 colour names that are allowed in CSS are allowed in CSS. In other words, any compliant user-agent should abide by them. These have been around since the dawnatime, and I’m not aware of any user agent that supports #hex colour codes and rgb() colour codes but not these colour names.
My reckoning is that by allowing the use of 16 color names, that is the thin end of the wedge that opens up the notion by people that they might be able to use some of the thousands of other color names.
By restricting things back to using only numeric values, that helps to remove the potential for such problems to occur.
is it better to use color in css as #333 or #333333 whether both are same
or gray20 or rgb(56,76,86)…
which is better to use…
Use any of the numeric formats.
#333 is shorthand for #333333.
Those formats are the most common ones to use.
As an enhancement, you can place at the start of the CSS file a comment that relates the numeric forms to human-readable versions of their name. That comment though is only for the benefit of the human reader. The CSS declarations should all use numeric formats for the colors.
For example:
/*
Colors:
#333333 - grey20
*/
body {
background: #333333
}
Yes it would be nice if they explained the reason but in the Accessibility guidelines they allude that colour keywords are deprecated so I guess they just don’t want you to use them although they are still valid.
I often see people using “gray” or “grey” but only one is correct and in IE you will get no color if you use the wrong one but other browsers will obey both.
The reason why the WCAG deprecate the use, is that in the particular case of determining color contrast (which is the above link), it is more difficult to determine the contrast just from the names, than from the numbers themself.
Ah ok 
But when the colour name is equivalent to a specified numeric value (eg ‘red’ = #f00, end of story, no argument), it shouldn’t make any difference. It is not the case that browsers can interpret a named colour however it likes, the name and the number are exactly equivalent.
It sounds like a combination of misunderstanding and not trusting people to stick to only using names for the 16 allowed in CSS.
Without looking it up, can you determine how much color contrast that orange has with red?
I think that that is why the difference.
It really depends on whether you are more comfortable with decimal or hexadecimal numbers when specifying the amount of each of red, green, and blue in the colour.
Of course if you also want transparency then you don’t really have an alternative to using rgba()
I don’t get all this talk about “web safe” and “older browsers”.
Are we writing for Netscape Navigator 4 and IE5?
Is there a browser alive today that we actually care about who doesn’t know #333 is #333333? (does the AOL browser count as “older”? It’s some version of Trident but dunno which one was the latest one)
The issue that I’m aware of relates to the WCAG specs. It’s not to do with web browser compatability, but with the ease of determining color contrast.
Please take another look at this section –> 9.1 Color Contrast
On web-safe colors, do they still apply when dealing with low-quality LCD monitors? And if not, is there anything but trial-and-error that can be done to ensure that things like brownish colors don’t end up looking pink?
And if not, is there anything but trial-and-error that can be done to ensure that things like brownish colors don’t end up looking pink?
There are lots and lots of tools that will check all that for you. It’s up to the author to actually bother using them, but I still don’t see what this has to do with browsers who can only show some colours. That’s what web safe means: limited colours due to hardware/software, not due to visual impairments.
They’ll check for contrast, luminosity, and anything else. They’ll tell you if you pass WCAG, A, AA, or AAA or fail. In general those guidelines are pretty good for whatever the visual impairment, including crap screens or mobiles with light shining on them (but don’t know for 100%).
You can even use your eyeballs to check for contrast in the ways recommended on the WCAG page: graybit.com for example will monochrome your page for you if you like eyeballing it. VIScheck.com can give you screenshots in the three most-common colourblindness varieties.
WCAG doesn’t say that #eee can’t be used in place of #eeeeee. Someone mentioned older browsers have trouble with this. I wondered if that really matters anywhere.
Ah, so it’s nothing to do with accessibility per se, it’s to make things easier for automated accessibility checkers (which everyone knows are rubbish)? Nope, still can’t see a reason for doing it!