A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/tutorials/setting_color_in_css below:

Setting color in CSS · WebPlatform Docs

Setting color in CSS Summary

This article explains in detail the different ways you can specify color in CSS.

Information: Color

In this tutorial so far, you have used a limited number of named colors. CSS 2 supports 17 named colors in all. Some of the names might not be what you expect:

black gray silver white primaries red lime blue secondaries yellow aqua fuchsia maroon orange olive purple green navy teal

### Further color keyword details

Your browser might support many more named colors, like:

dodgerblue

peachpuff

tan

firebrick

aquamarine

For details of this extended list, see: SVG color keywords in the CSS 3 Color Module. Beware of using color names that your reader’s browsers might not support.

For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three hexadecimal digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:

||
|black||#000|
|pure red||#f00|
|pure green||#0f0|
|pure blue||#00f|
|white||#fff|

For the full palette, specify two hexadecimal digits for each component:

||
|black||#000000|
|pure red||#ff0000|
|pure green||#00ff00|
|pure blue||#0000ff|
|white||#ffffff|

You can usually get these six-digit hexadecimal codes from your graphics program or some other tool.

Further hex examples

With a little practice, you can adjust the three-digit colors manually for most purposes:

||
|Start with pure red:||#f00|
|To make it paler, add some green and blue:||#f77|
|To make it more orange, add a little extra green:||#fa7|
|To darken it, reduce all its components:||#c74|
|To reduce its saturation, make its components more equal:||#c98|
|If you make them exactly equal, you get gray:||#ccc|

For a pastel shade like pale blue:

||
|Start with pure white:||#fff|
|Reduce the other components a little:||#eef|

RGB colors

You can also specify a color using decimal RGB values in the range 0 – 255, or percentages. For example, this is maroon (dark red):

rgb(128, 0, 0)

For full details of how to specify colors, see: Colors in the CSS Specification. For information on matching system colors like Menu and ThreeDFace, see: CSS2 System Colors in the CSS Specification.

Color properties

You have already used the [color] property on text.You can also use the [background-color] property to change elements’ backgrounds. Backgrounds can be set to transparent to explicitly remove any color, revealing the parent element’s background.

background-color: #fffff4;

The More details boxes use this pale gray:

background-color: #f4f4f4;
Action: Using color codes

  1. <p>Edit your CSS file; make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)</p>

    /*** CSS Tutorial: Color page ***/

/* page font */
body {font: 16px "Comic Sans MS", cursive;}

/* paragraphs */
p {color: blue;}
#first {font-style: italic;}

/* initial letters */
strong {
  color: red;
  background-color: #ddf;
  font: 200% serif;
}

.carrot {color: red;}
.spinach {color: green;}

  2. <p>Save the file and refresh your browser to see the result.</li>

    </ol>

    Need to add screenshot of the result?

    See also Other articles Exercise question

    In your CSS file, change all the color names to 3-digit color codes without affecting the result (this cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)

Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4