CSS Foreground Color Use

Nikkala Thomson, CIT 230-08, Fall 2015, 11/24/15

• Foreground color in CSS is set by the “color” property

• Ways to specify the color property:• Color name—limited set of named colors• RGB(A)—red, green, blue, and optional alpha

(opacity)• Hex code—representing red, green, and blue in

hexadecimal• HSL(A)—hue, saturation, lightness, optional alpha• Initial—sets color to default value• Inherit—inherits color from the parent element

The color property

Color name

• Find the 140 colors supported for CSS in all browsers here: http://www.w3schools.com/HTML/html_colornames.asp

• No transparency—always solid colors

• Specific names represent specific red, green, and blue combinations

• Example: h1 {

color: red;}

/* makes all level 1 heading text red */Named colors

RGB(A)

• Format: rgb(red, green, blue) where red, green, and blue are either numbers from 0 (min) to 255 (max) or percentages from 0% to 100%.

• Example: rgb(0, 255, 0) = rgb(0%, 100%, 0%) = green

• Optional fourth value, “alpha,” controls opacity• alpha=0.0 means fully transparent (invisible)• alpha=1.0 means fully opaque (solid)

• Example: rgb(255, 0, 255, 0.5) = fuschia, 50% opacity

Hex codes• Format: #rrggbb where rr=red value, gg=green value,

and bb=blue value, all in hexadecimal (base 16) format.• Example: #0000ff = rgb(0, 0, 255) = blue

• No transparency—always solid colors

• The number of colors that can be represented by this system (and rgb) is 16,777,216.

• Don’t forget the leading zero if necessary.

The standard 16 hex colors (also valid in HTML)

HSL(A)• Format: hsl(hue, saturation, lightness)• Hue is the shade of color on the color

wheel where 0=360=red. • Saturation measures vividness where

0% is no color (a shade of gray) and 100% is full color.

• Lightness measures the amount of black, with 0% being black and 100% being white.

• Example: hsl(180, 100%, 25%) = dark teal• Like the rgb format, there is an optional fourth value,

alpha (0.0 to 1.0), to adjust opacity.

Hue color wheel

Initial

Setting the color equal to “initial” instead of a specific value clears all color changes and reverts to the original color.

Example: /* make h2’s orange */h2 { color: orange }

/* but make those in the asides use the initial color */aside h2 { color: initial }

Note: not supported in Internet Explorer.

Inherit

Setting the color equal to “inherit” instead of a specific value clears all color changes and reverts it to a color inherited from a parent element.

Example: /* make all span labeled elements red*/span { color: red }

/* but let the special ones inherit from their parent */.special span { color: inherit}

Note: Supported in all browsers.

AnimatableForeground color can gradually change from one color to another. Here’s an example—try it yourself!/* The animation code */@keyframes test {

from {color: red;}to {color: yellow;}

}/* The element to which to apply the animation*/div {

color: yellow; /* initial color */animation-name: test; animation-duration: 4s; /* default is 0s (no animation) */animation-iteration-count: 3; /* infinite is also an option here */

}

For more info: http://www.w3schools.com/css/css3_animations.asp

In summary• Foreground color can be specified in a variety of ways

including color names, rgb(a), hex codes, and hsl(a).• “Initial” and “inherit” can be used to make exceptions to

a color name rule. • Foreground color is animatable and can be programmed

to change from one color to another repeatedly.• Most of these properties and syntax can also be applied

to background-color.• Color can add spice to your website!