What is the meaning of red when used on the Web? CSS and SVG Color Keywords allow you to use named colors to represent specific Hexadecimal or RGB colors. But do these red colors say what you intend? Explore the color symbolism of various shades of red.
Red
The official CSS color keyword red refers to a pure shade of red with no green or blue. Its codes and attributes are:
- Hex: #ff0000
- RGB: 255,0,0
- CSS Color Keyword: Yes
- SVG Color Keyword: Yes
- Browser Safe Color: Yes
- Red is a warm color.
- As a pure red, this shade carries strong symbolism for both power and danger.
- Use this shade of red to grab attention.
- A strong color, small doses can often be more effective than large amounts of this red.
Maroon
The official CSS color keyword maroon refers to a dark shade of red with no green or blue. Its codes and attributes are:
- Hex: #800000
- RGB: 128,0,0
- CSS Color Keyword: Yes
- SVG Color Keyword: Yes
- Browser Safe Color: No, closest match is #990000 / 153,0,0
- Maroon is a warm color.
- As a dark red near the purple color range, maroon carries a mix of symbolism for both red (attention / take action) and purple (riches / mystery) so you might call it a slightly mysterious shade of red.
Dark Red
The named color darkred refers to a shade of red with no green or blue. Its codes and attributes are:
- Hex: #8b0000
- RGB: 139,0,0
- CSS Color Keyword: No
- SVG Color Keyword: Yes
- Browser Safe Color: No, closest match is #990000 / 153,0,0
- Dark red is a warm color.
- As a dark red near the purple color range, this shade carries a mix of symbolism for both red (attention / take action) and purple (riches / mystery) so, like the named color maroon, you might call it a slightly mysterious shade of red.
Fire Brick
The named color firebrick refers to a darker shade of red with a small, even amount of green and blue. Its codes and attributes are:
- Hex: #b22222
- RGB: 178,34,34
- CSS Color Keyword: No
- SVG Color Keyword: Yes
- Browser Safe Color: No, closest match is #cc0000 / 204,0,0
- Fire Brick is a warm color.
- As a dark red near the purple color range, this shade carries a mix of symbolism for both red (attention / take action) and purple (riches / mystery) but a little bit lighter than maroon or dark red.
Crimson
The named color crimson refers to a fairly bright shade of red with a dash of blue and a little less green. Its codes and attributes are:
- Hex: #dc143c
- RGB: 220,20,60
- CSS Color Keyword: No
- SVG Color Keyword: Yes
- Browser Safe Color: No, closest match is #ff0000 / 255,0,0 (the named color red)
- Not quite a pure red, this shade carries strong symbolism for both power and danger but also happiness and celebration.
- The touch of cool blue in this shade of red tones it down slightly giving it a slightly more friendly feel.
Indian Red
The named color indianred refers to a medium shade of red with a fair amount of green and blue in it. Its codes and attributes are:
- Hex: #cd5c5c
- RGB: 205,92,92
- CSS Color Keyword: No
- SVG Color Keyword: Yes
- Browser Safe Color: No, closest match is #cc6666 / 204,102,102
- This light shade of red carries more of the symbolism of pink although not so much sweetness or girlishness but rather an alert playfulness.
- The cool blue and purple undertones in this shade of red give it a certain amount of sophisticated charm.
Tomato
The named color tomato refers to a medium shade of red with a fair amount of green and blue in it. Its codes and attributes are:
- Hex: #ff6347
- RGB: 255,99,71
- CSS Color Keyword: No
- SVG Color Keyword: Yes
- Browser Safe Color: No, closest match is maybe #ff9966 / 255,153,102 (slightly pinker) or #ff6633 / 255,102,51 (slightly oranger)
- This light shade of red carries some of the symbolism of pink but stronger and less delicate that brighter pinks. It also has some of the warmth and energy of orange.
- Use this shade of red to gain attention and infuse a page with energy without being overly stimulating.
Orange Red
The named color orangered refers to a bright red with a dash of green. Its codes and attributes are:
- Hex: #ff4500
- RGB: 255,69,0
- CSS Color Keyword: No
- SVG Color Keyword: Yes
- Browser Safe Color: No, closest match is maybe #ff6600 / 255,102,0 (more orange) or #ff3300 / 255,51,0 (redder)
- This shade of red is fresh, energetic, and mentally stimulating without the aggression of brighter reds.
- Orange is often synonymous with autumn yet the brighter oranges, such as this Orange Red shade, are a summer color.
How Do You Use Red?
Do you like using red on Web pages or is it overused? What shades of red do you like? Talk about it.
