Grey is one of the basic color keywords available in CSS. It allows developers to apply a shade of grey to text, backgrounds, borders and other elements on a web page. While grey may seem like a simple color, there are some key things to understand about using grey in CSS.
What Is The Grey Color Keyword In CSS?
The grey keyword in CSS represents a medium light shade of grey. Specifically, it equates to the hex color value #808080. This is a shade halfway between black (#000000) and white (#FFFFFF).
When you use the grey keyword in a CSS property, you are telling the browser to apply a grey shade with that specific hex value to the selected element. For example:
“`css
p {
color: grey;
}
“`
This would make all
elements have grey text color.
The grey keyword color is considered a generic color in CSS. The CSS specification defines 16 basic color keywords representing common colors. Along with grey, this includes keywords like red, green, blue, yellow, and more.
Browsers automatically recognize these color keywords and apply the appropriate color values. So you don’t need to specify hex or RGB values when using the keywords.
Shades Of Grey
While grey refers specifically to the #808080 hex color in CSS, there are many other shades of grey available as well. CSS provides two additional basic color keywords for darker and lighter shades of grey:
– darkgrey – #A9A9A9
– lightgrey – #D3D3D3
For example:
“`css
p {
color: darkgrey;
}
blockquote {
background-color: lightgrey;
}
“`
This uses a darker grey text color for paragraphs, and a lighter grey background for blockquote elements.
There are also system color keywords that browsers recognize and translate into additional shades of grey:
– grey – #808080
– darkgray – #A9A9A9
– dimgray – #696969
– lightgray – #D3D3D3
– gainsboro – #DCDCDC
– silver – #C0C0C0
– darkslategray – #2F4F4F
– slategray – #708090
The system color keywords map to slightly different hex values across browsers, but provide access to more variations of grey.
Using Grey With RGB and Hex Values
In addition to the grey keyword, you can also construct other shades of grey using RGB or hex color values:
“`css
/* Hex values */
div {
background-color: #333; /* Dark grey */
}
p {
color: #ccc; /* Light grey */
}
/* RGB values */
section {
background-color: rgb(128,128,128); /* Mid grey */
}
“`
Mixing equal amounts of red, green, and blue allows you to create shades of grey. This provides greater flexibility and customization over using the basic grey keyword and system colors.
You can use any grey RGB or hex value needed in your CSS code. This allows for very fine-grained grey shades.
Some other examples of grey RGB values:
“`css
lightgrey – rgb(211,211,211)
darkgrey – rgb(169,169,169)
dimgrey – rgb(105,105,105)
“`
And grey hex values:
“`css
gainsboro – #DCDCDC
lightslategrey – #778899
dim grey – #696969
“`
So the grey keyword is just one defined shade of grey in CSS – you can utilize RGB or hex values to craft any grey color imaginable.
Grey Color Keywords Browser Support
The basic grey and darkgrey/lightgrey keywords have excellent browser support across all major modern browsers:
| Browser | grey Support |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
The system color keywords like gainsboro, silver, and slategray have good browser support as well, but may not be fully cross-browser consistent. Their exact hex values can vary slightly across different browsers.
In particular, the system colors tend to have less support in older versions of browsers. So for full cross-browser consistency, try to stick with the basic color keywords whenever possible.
Text Legibility With Grey Color
When using shades of grey for text color, keep text legibility in mind. Very light greys can be difficult to read, especially with smaller text sizes. Very dark greys may not provide enough contrast against darker backgrounds.
Ideally for text, use a darker grey like #333 or #666. This provides adequate contrast on both light and dark backgrounds.
You can also use an online contrast checker to test the legibility of your grey text color against its background color. The Web Content Accessibility Guidelines recommend at least a 4.5:1 contrast ratio for normal text.
It’s also worth noting that some shades of grey can look quite similar to shades of blue on screens. So don’t assume that a grey text color will necessarily appear greyish to all users.
Grey Colors For Themes and Design
Grey colors are very common in web design for creating themes and elegant minimalist sites:
– Light grey backgrounds provide subtle contrast against white backgrounds
– Medium grey borders and dividers look clean and unobtrusive
– Dark and soft greys make ideal text colors
And different grey shades can be combined to create depth and visual hierarchy.
Here are some examples of using shades of grey effectively in web design:
– A site header with a soft light grey background, white text, and medium grey borders
– Highlight boxes with dark grey backgrounds and white text
– Full-width grey dividers between sections using a subtle light grey
– Footer text using a dim grey color rather than stark black
Greys help tone down harsh pure blacks and whites. They add nuance and sophistication to a design.
But be careful not to overuse grey as it can look dull if greys dominate the entire color scheme. Combine greys with complementary colors like blues, greens, oranges or reds.
Conclusion
While the grey color keyword in CSS represents one specific medium grey shade (#808080), there are many shades of grey available to use in CSS code. System color keywords, RGB values, and hex codes allow you to select lighter, darker, softer or harsher grey tones.
Greys are versatile colors that can be utilized for all kinds of design elements and effects in websites and applications. Just keep legibility and accessiblity in mind when using very light or very dark shades of grey for text.
The basic grey, darkgrey and lightgrey keywords enjoy excellent browser support. So you can safely use them in CSS across all modern browsers. For precise control over grey shades, define custom RGB or hex values.
With the right balance of grey tones, you can build attractive designs that feel refined, subtle and sophisticated. The humble color grey truly does have endless possibilities in CSS.
