Tutorial by Examples

Most browsers support using color keywords to specify a color. For example, to set the color of an element to blue, use the blue keyword: .some-class { color: blue; } CSS keywords are not case sensitive—blue, Blue and BLUE will all result in #0000FF. Color Keywords Color nameHex valueRGB...

Background CSS colors may also be represented as a hex triplet, where the members represent the red, green and blue components of a color. Each of these values represents a number in the range of 00 to FF, or 0 to 255 in decimal notation. Uppercase and/or lowercase Hexidecimal values may be used (i...

RGB is an additive color model which represents colors as mixtures of red, green, and blue light. In essence, the RGB representation is the decimal equivalent of the Hexadecimal Notation. In Hexadecimal each number ranges from 00-FF which is equivalent to 0-255 in decimal and 0%-100% in percentages....

HSL stands for hue ("which color"), saturation ("how much color") and lightness ("how much white"). Hue is represented as an angle from 0° to 360° (without units), while saturation and lightness are represented as percentages. p { color: hsl(240, 100%, 50%); /* B...

currentColor returns the computed color value of the current element. Use in same element Here currentColor evaluates to red since the color property is set to red: div { color: red; border: 5px solid currentColor; box-shadow: 0 0 5px currentColor; } In this case, specifyin...

Similar to rgb() notation, but with an additional alpha (opacity) value. .red { /* Opaque red */ color: rgba(255, 0, 0, 1); } .red-50p { /* Half-translucent red. */ color: rgba(255, 0, 0, .5); } Syntax rgba(<red>, <green>, <blue>, <alpha>); Va...

Similar to hsl() notation, but with an added alpha (opacity) value. hsla(240, 100%, 50%, 0) /* transparent */ hsla(240, 100%, 50%, 0.5) /* half-translucent blue */ hsla(240, 100%, 50%, 1) /* fully opaque blue */ Syntax hsla(<hue>, <saturation>%, <lightness>%, <a...