Lae OR ele meeele Pakec ia citar meui Reuters » Background colorColor can really bring your pages to life. In this chapter we will look at: © How to specify colors, as there are three common ways in which you can indicate your choice of colors (plus extra ways made available in CSS3) Color terminology, as there are some terms that are very helpful to understand when it comes to picking colors Contrast, and ensuring that your text is readable Background colors for behind either your entire page or parts of a page ‘What you wil learn about colors in this chapter will then be used in subsequent chapters when it comes to looking at colors of text and boxes in CSS.249 FOREGROUND COLOR color The color property allows you to specify the color of text inside an element, You can specify any color in CSS in one of three ways: RGB VALUES These express colors in terms of how much red, green and blue are used to make it up, For example: rgb(100,100,90) HEX CODES ‘These are six-digit codes that represent the amount of red, green and blue in a color, preceded by a pound or hash #t sign. For example: #ee3e80 COLOR NAMES. There are 147 predefined color names that are recognized by browsers, For example: Darkcyan We look at these three different ways of specifying colors on the next double-page spread. C583 has also introduced another way to specify colors called HSLA, which you will meet near the end of this chapter on page 255-256, OLOR chapter-11/foreground-color. html /* color name */ hi ¢ color: Barkcyan:} J* hex code */ he ¢ color: #ee3e80:) /* rgb value */ pt color: rgb(100,100,90);) Marine Biology ‘The Composition of Seawater Amos nye canbe ound seawater Ths incides dace rst temperate of seawater ha niuence ie fo esl temperate sowed paces (mol oxygen and carbon oxide), nei, apt. Those Above each CSS rule in this ‘example you can see how CSS allows you to add comments to your CSS files. Anything between the /* symbols and the */ symbols will not be interpreted by the browser. They are shown in grey above, The use of comments can help you to understand a CSS file (and organise it, by splitting a long document into sections) Here, we have used comments to indicate which method is used to specify each of the different types of colors.BACKGROUND COLOR background-color body ¢ mt wet pt Seckgrouns-color chapter-11/background-color. html g(200,.200,200);) Darkcyan:} Hee3e80;) whites) (EU =ilt)g CSS treats each HTML element as if appears in a box, and the background-color property sets the color of the background for that box. You can specify your choice of background colorin the same three ways you can specify foreground colors: RGB values, hex codes, and color names (Covered on the next page). IF you do not specify a background color, then the background is transparent, By default, most browser windows have a white background, but browser users can set a background color for their windows, so if you want to be sure that the background is white you can use the background-color property on the element. We have also used the padding property to separate the text from the edges of the boxes, ‘This makes it easier to read and you will learn more about this property on page 313, COLOR 250UNDERSTANDING COLOR eee RO lca une eacTlceR mu eal ceoLe cle green, and blue. To find the color you want, you can use a color picker. eee up of thousands of tiny squares oer a cad Cee ees) BICC Eee ns Nee ccu nr ee ae ea Gauri ed Cee LOR CE iccy Cert eee Sse Ly screen is expressed in terms of See ere just like on a television screen. One eee Sy ue cou eae ce aa Peck Perera ot netics Eas The hex value is provided next to the pound or hash Sem ey good color picking tool at eeeRGB VALUES Nee ae Ly Bee ey Peres rgb(102,205,170) Dae) following values: er ered) Dera HUE Hue is near to the colloquial idea Creo eeeread Perea aun ey PEL ue oes HEX CODES Poster enc aCe Dect enna recy Seen gic ae Dee eae eT code, The 2 expressed as cd and the 170 of ea ea Seer todd SATURATION Ree CeCe Lg aera Peon oad Pa ee saturation, the color would be coun COLOR NAMES oneeee cL predefined names. However, aera Peery Sea supported by browsers (this See ec Most consider this to be a limited color palette, and itis Seca ea ec Beene white and black) they are not Sate =) eh 33 Brightness (or "value") refers ono eee con Sauna acy Rone ase kad ee acon Paar r rsCONTRAST When picking foreground and background colors, it is important to ensure that there is enough contrast for the text to be legible. HIGH MEDIUM loro Nay a8 CONTRAST Text is harder to read when Text is easier to read when For long spans of text, reducing there is low contrast between there is higher contrast between _the contrast a litte bit improves background and foreground background and foreground readability. colors colors. Alack of contrast is particularly I you want people to read alot You can reduce contrast by aproblem for those with cof text on your page, however, using dark gray text on a white visual impairments and color then too much contrast can background or an off-white text blindness. make it harder to read, too. ona dark background. Italso affects those with poor monitors and sunlight on their Tore ae eR LER a screens (which is increasingly COGS ae Cue aS Cong common as people use handheld devices outdoors). nec ca ce To check contrast ere is a handy online tool at: www. snook.ca/ nnical/colour_contrast/colour. htmlmH CSS3: OPACITY opacity, rgba chapter-11/opacity. html p.one ( background-color: rgd(0,0.0) opacity: 0.5:) two { background-color: rgo(0,0.0) background-color: rgba(0,0,0,0.5):) (C553 introduces the opacity property which allows you to specify the opacity of an element and any ofits child elements. ‘The value is a number between 0.0 and 1.0 (soa value of 0.5 is 50% opacity and 0.15 is 15% opacity). ‘The CSS3 raba property allows you to specify a color, just like you would with an RGB value, but adds a fourth value to indicate opacity. This value is known as an alpha value and is anumber between 0,0 and 1.0 (soa value of 0.5 is 50% opacity and 0.15 is 15% opacity), The gba value will only affect the element on which itis applied (not child elements). Because some browsers will not recognize RGBA colors, you can offer a fallback so that they display a solid color. Ifthere are two rules that apply to the same element, the latter of the two will take priority, To create the fallback, you can specify a color as a hex code, color name or RGB value, followed by the rule that specifies an RGBA value. If the browser understands RGBA colors it wll use that rule. fit doesn't, it will use the RGB value, At the time of writing, the opacity and rgba properties are only supported by the most recent browsers.CSS3: HSL COLORS CSS3 introduces an entirely new and intuitive PERCE ll N Asem ae Merle lel and lightness values. HUE Pree eer cc Eocene eee represented as a color circle Roe emcees color, although it may also be shown asa slider with values Cot kCe Lom SATURATION eee eed Pena eee ec e 100% is full saturation and 0% ee LIGHTNESS Pree Ren nace a cas CoE eat trey et Eee Cea aad lightness is white, and 50% ieee cane eae eee cae oe ae read ais Ceca rect Nonny color pickers that use hue, ion, and brightne: Senate Peer eet eee ee eens ne eetCSS3: HSL & HSLA chapter-11/hsla. html body ¢ puckground-colors #cACACB Bt ‘Amoat anytnng canbe found mn seater Th nes soted matnsis from Eats cst ae wo! as mato eleasd Fem organs Tha most ‘ment! crane of sasaer lana ray ‘emporatiredscovod gos most oxygen and carbo do) rnans fp These meray compoaton sr wal shar nhuonc Because older browsers do not This provides a fallback because recognize HSL and HSLA values, itis a good idea to add an extra rule which specifies the color using a hex code, RGB value, or color name. This should appear before the rule that uses the HSL or HSLA value, if there are two rules that apply to the same element in CSS, the latter of the two always takes priority. This means that if the browser understands HSL and HSLA colors, it will use that rule; and ifit does not, it wll use the first rule hsl, hsla The hs! color property has been introduced in CSS3.as an alternative way to specify colors. ‘The value of the property starts with the letters hsi, followed by individual values inside parentheses for: HUE ‘This is expressed as an angle (between 0 and 360 degrees). SATURATION This is expressed as a percentage. LIGHTNESS ‘This is expressed as a percentage with 0% being white, 50% being normal, and 100% being black. ‘The hsla color property allows you to specify color properties using hue, saturation, and lightness as above, and adds a fourth value which represents transparency (just like the rgba property). The a stands for ALPHA, ‘This is expressed as a number between 0 and 1.0. For example, 0.5 represents 50% transparency, and 0.75 represents 75% transparency, COLOR 256pH Scale is +1 COLOR5.9 OO ne oD, it Pointing EXAMPLE COLOR This example show the different w using CSS (using color nami and HSL). a pH scale to demonstrate be specified hex codes, RGB, 's that colors c The rule for the element sets a default color for all the text as well as the default background color for the page. Both use color names. The rule for the

element sets the color of the heading using a hex code. There are two values for the background-color property of the element, The first provides a fallback color using a hex code and the second is an HSLA value for browsers that support this method. Each paragraph is then shown in a different color to represent the varying levels of acidity or alkalinity, and these are specified using RGB led margin to decrease anda property called padding to create (These Iso uses @ props between the paragraph box: 1 gap between the edge of the boxes and the text within them. properties are covered on pages 313-314.)EXAMPLE COLOR 259, color ‘text/css” background-color: silver: color: white: padding: 20px: font-family: Arial, Verdana, sans-serif:} hi ¢ background-color: #ffFFrt background-color: hsla(0,100%,100%,0.5); color: #646454: padding: inherit:} Pe padding: Spx: margin: Opx:} p.zero { background-color: rgb(238,62,128):) p.one { background-color: rgb(244,90,139):) p.two { background-color: rgb(243,106,152):) p.three { background-color: rgb(244,123,166);) p.four { background-color: rgb(245,140,178):) p.five { background-color: rgb(246,159,192):) pisix { background-color: rgb(245,176,204):) p.seven { background-color: rgb(0,187,136):) p.eight { background-color: rgb(140,202.242);) p.nine { background-color: rgb(114,193,240):)EXAMPLE COLOR p.ten background-color: rgb(84.182.237):) peeleven { background-color: rgb(48,170,233):} petwelve { background-color: rgb(0,160,230):) p.thirteen ¢ background-color: rgb(a,149,226):) p.fourteen ¢ background-color: rgb(0,136.221):) plt Seale

14.0 VERY ALKALINE

13.0¢/p>

12.0¢/ p>

L1.0¢/p>

10.0¢/p>

9.0

8.0

7.0 NEUTRALC/p>

6.06/p>

8.0¢/p>

4.0

3.0

?..0

1.0¢/p>

0.0 VERY ACID

color 260)SUMMARY COLOR ~ Color not only brings your site to life, but also helps convey the mood and evokes reactions. _ There are three ways to specify colors in CSS: RGB values, hex codes, and color names. ~ Color pickers can help you find the color you want. _ It is important to ensure that there is enough contrast between any text and the background color (otherwise people will not be able to read your content). ~ CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA. ~ CSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA.