Veja como trabalhar com cores usando CSS3 RGB, RGBA, HSL, Transparencia e opacidade. Copyright Russ Weakley - Max Design.

1. CSS3
COLORS

2. Before we talk about CSS3
colors, we need to review
CSS2.1 colors.

3. CSS2.1
Colors

4. CSS2.1 allowed colors to be
defined using six different types
of values.

5. 1 Keywords
2 Six-digit hexadecimal notation
3 Three-digit hexadecimal notation
4 RGB numeric notation
5 RGB percentage notation
6 System colors

6. 1. Keywords

7. CSS2.1 allowed 17 keywords:
aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive,
orange, purple, red, silver, teal,
white, and yellow.

8. Example keywords:
p { color: aqua; }
p { color: black; }
p { color: blue; }
p { color: fuchsia; }
p { color: gray; }
p { color: green; }
p { color: lime; }

9. 2. Six-digit
hexadecimal
notation

10. Six-digit hexadecimal notation
(#rrggbb):
p { color: #AE03FF; }

11. 3. Three-digit
hexadecimal
notation

12. Three-digit hexadecimal
notation allows authors to
replace double ‘rr’, ‘gg’ or ‘bb’
values with single values (#rgb):
p { color: #663399; }
p { color: #639; }
p { color: #aaff55; }
p { color: #af5; }

13. The six-digit RGB notation
(#rrggbb) can only by converted
into three-digit form (#rgb) if each
the rr, gg, and bb values each
use duplicate digits. Many six-
digit values cannot be converted.
Cannot convert
p { color: #953d3d; }
p { color: #34d209; } Cannot convert

14. 4. RGB numeric
notation

15. RGB numeric notation
uses 'rgb(' followed by a comma-
separated list of three integer
values, followed by ‘)’.
p {
color: rgb(109, 22, 255); }

16. RGB numeric notation allows
values between 0 (black) and 255
(white). No unit identifier is
required.

17. 5. RGB percentage
notation

18. RGB percentage notation uses
'rgb(' followed by a comma-
separated list of three percentage
values, followed by ')'.
p {
color: rgb(0%,10%,100%); }

19. RGB percentage notation
allows values between 0%
(black) and 100% (white). All
values must include % symbol.

20. 6. System colors

21. CSS2.1 allowed System colors
to be used to specify colors that
matched the operating system's
graphic style.
p { color: ButtonFace; }

22. Note:
System Colors have been
deprecated in favor of the
CSS3 UI “appearance’
property for specifying the
complete look of user
interface related elements.

23. CSS3 Colors

24. With CSS3, we can now apply
colours using eight new
methods:

25. 1 Extended color keywords
2 Opacity
3 RGBA numeric notation
4 RGBA percentage notation
5 HSL notation
6 HSLA notation
7 The ‘currentColor’ keyword
8 The ‘transparent’ keyword

26. 1. Extended Color
Keywords

27. While CSS2.1 allowed us to use
17 basic color keywords, CSS3
allows us to use and additional
130 extended color keywords.
This is a total of 147 keywords.

28. Example color keywords:
p { color: peru; }
p { color: salmon; }
p { color: thisle; }
p { color: firebrick; }
p { color: ghostwhite; }
p { color: goldenrod; }
p { color: honeydew; }

40. Quick tip:
Do you have trouble spelling the
keyword gray/grey?
Well, CSS3 color keywords have
got you covered. They include
gray, grey, darkgrey and
darkgray.

41. Browser Supported
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8, 9 Yes

42. 2. Opacity

43. Opacity allows us to dictate the
opacity/transparency of
elements.

44. Opacity values range from 0 (or
0.0), which is fully transparent to
1 (or 1.0) which is 100% opaque.
p { opacity: 0.3; }

45. The opacity value must be a
number, which is zero or more
digits followed by a dot (.)
followed by one or more digits.
For example:
0.5
.5

46. Be aware that this property will
set the opacity for the element
and all of it’s child elements.

47. Browser Supported
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8 No
IE 9 Yes

48. 3. RGBA numeric
notation

49. With CSS3 we can add an alpha
channel to RGB values. This
allows us to set our colors to
specific levels of opacity.

50. While the ‘opacity’ property
sets the opacity/transparency of
entire elements, RGBA is used
to set the opacity of color
values only.

51. RGBA numeric notation
uses 'rgba(' followed by a
comma-separated list of three
integer values, followed by an
alpha value followed by a ‘)’.
p { color: rgba(100, 66, 255, 1); }

52. The three integer values must be
between 0 (black) and 255
(white). No unit identifier is
required. For example:
255
0

53. This alpha value must be a
number, which is zero or more
digits followed by a dot (.)
followed by one or more digits.
For example:
0.5
.5

54. An alpha value of 1 means
the color will be fully opaque
(displayed as a solid color).
An alpha value of 0.5 will be
half opaque.

55. You should always include a
backup for browsers that do not
support this property.
p
{
color: rgb(100, 66, 255);
color: rgba(100, 66, 255, 0.5);
}

56. Browser Supported
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8 No
IE 9 Yes

57. 4. RGBA percentage
notation

58. RGBA percentage notation
uses 'rgba(' followed by a
comma-separated list of three
percentage values, followed by
an alpha value followed by a ‘)’.
p { color: rgba(10%, 6%, 20%, 1); }

59. The three percentage values
must be between 0% (black) and
100% (white). All values must
include % symbol. For example:
100%
0%

60. This alpha value must be a
number, which is zero or more
digits followed by a dot (.)
followed by one or more digits.
For example:
0.5
.5

61. Browser Supported
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8 No
IE 9 Yes

62. 5. HSL notation

63. HSL notation allows us to define
colors using hue, saturation
and lightness.

64. HSL notation is written like this:
p { color: hsl(280,100%,50%); }

65. The first value is for Hue and
must be a integer value between
0 and 359.
p { color: hsl(280,100%,50%); }

66. The second value is for
Saturation and must be defined
as a percentage value.
p { color: hsl(280,100%,50%); }

67. The third value is Lightness
and must also be defined as a
percentage value.
p { color: hsl(280,100%,50%); }

68. These three HSL values must
be separated by commas.
Whitespace after the commas
is optional.
p { color: hsl(280,100%,50%); }

69. You should always include a
backup color that is not HSL for
older browsers.
p
{
color: rgb(85,0,128);
color: hsl(280,100%,50%);
}

70. Browser Supported
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8 No
IE 9 Yes

71. 6. HSLA notation

72. Like RGBA, we can add an alpha
channel to HSL values. This
allows us to set our colors to
specific levels of opacity.

73. First of all, we need to change the
HSL to HSLA:
p { color: hsla(280,100%,50%); }

74. Then, we need to add a new
value at the end of the three
comma-separated values.
p { color: hsla(280,100%,50%,0.5); }

75. The opacity value must be a
number, which is zero or more
digits followed by a dot (.)
followed by one or more digits.
For example:
0.5
.5

76. You should always include a
backup color that is not HSL or
HSLA for older browsers.
p
{
color: rgb(85,0,128);
color: hsla(280,100%,50%,0.5);
}

77. Browser Supported
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8 No
IE 9 Yes

78. Why use HSL
or HSLA?

79. From the browsers point of view,
there is no difference between
values defined in RGBA
or HSLA.

80. Some designers find it easier
to choose and adjust colors
using HSLA.

81. 7. The ‘currentColor’
keyword

82. CSS1 and CSS2 defined
the initial value of the ‘border-
color’ property to be “the
value of the ‘color’ property” .
However, there is no
corresponding keyword.

83. We had no way of specifying a
border-color to match the color.
p
{
color: red;
border-width: 1px;
border-style: solid;
border-color: “the value of the
‘color’ property”;
}

84. CSS3 allows us to the
currentColor keyword for this:
p
{
color: red;
border-width: 1px;
border-style: solid;
border-color: currentColor;
}

85. Browser Supported
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 8, 9, 10 Yes
Opera 11 Yes
IE 6, 7, 8 No
IE 9 Yes

86. 8. The ‘transparent’
keyword

87. CSS1 introduced the ‘transparent’
value for the background-color
property.

88. CSS2 allowed the ‘transparent’
value to be applied to the ‘border-
color’ property.

89. CSS3 allows the ‘transparent’
keyword to be applied to any
properties that accepts
a ‘color’ value.
p { color: transparent; }

90. Browser Supported
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 9, 10 Yes
Opera 10, 11 Yes
IE 6, 7, 8 No
IE 9 Yes

91. Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley