Section D.1. Specifying Color by RGB Values


D.1. Specifying Color by RGB Values

The most common and precise way to specify a color is by its numeric RGB (red, green, blue) values. Using RGB values, you can specify any color from the "true color" space (millions of colors). For an explanation of RGB color, see Chapter 28.

Using an image editing tool such as Adobe Photoshop, you can determine the RGB values (on a scale from 0 to 255) for a selected color. These are the RGB values for a particularly lovely spring green:

Red: 212
Green: 232
Blue: 119

Color values are most often provided in a two-digit hexadecimal (base-16) form, not decimal, although these values may be used as-is in one CSS color format. Hexadecimal numbering is discussed in more detail in the next section. The same RGB values for that spring green look like this when converted to hexadecimal:

Red: D4
Green: E8
Blue: 77

In the CSS and HTML document, the most common way of representing these values is in a six-character string, preceded by the # symbol:

 #D4E877 

The underlying syntax is this:

 #RRGGBB 

where RR stands for the hexadecimal red value, GG stands for the hexadecimal green value, and BB stands for the hexadecimal blue value. CSS has additional formats for RGB values, as listed in the upcoming See RGB Colors in CSS." section.

Fortunately, Adobe Photoshop makes the hexadecimal values for colors readily available at the bottom of the color picker next to the "#" symbol. The hex values can be copied from the color picker and pasted into a style sheet or HTML document.

If you are using an image tool that does not list hexadecimal values, you'll need to convert decimal to hexadecimal yourself. The next section tells you how.

D.1.1. The Hexadecimal System

The hexadecimal numbering system is base-16 (as compared to base-10 for decimal numbers). It uses the following 16 characters:

 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 

A through F represent the decimal values 10 through 15.

D.1.1.1. Converting decimal to hexadecimal

You can calculate hex values in the 0 to 255 range by dividing a number by 16 to get the first digit, then using the remainder for the second digit. For example, dividing the decimal number 203 by 16 yields 12 with a remainder of 11. The hexadecimal value of 12 is C; the hex value of 11 is B. Therefore, the hexadecimal equivalent of 203 is CB.

Fortunately, there are simpler methods for converting numbers to hexadecimal:

  • Use a hexadecimal calculator. Windows users can find a hexadecimal calculator in the "Scientific" view of the Windows standard calculator. Mac users with OS X 10.4 (Tiger) can download the free Hex Calculator Widget at www.apple.com/downloads/dashboard/calculate_convert/hexcalculatorwidget.html.

  • Use Table D-1, which translates decimal values from 0 to 255.

Table D-1. Decimal to hexadecimal equivalents

dec = hex

dec = hex

dec = hex

dec = hex

dec = hex

dec = hex

0 = 00

43 = 2B

86 = 56

129 = 81

172 = AC

215 = D7

1 = 01

44 = 2C

87 = 57

130 = 82

173 = AD

216 = D8

2 = 02

45 = 2D

88 = 58

131 = 83

174 = AE

217 = D9

3 = 03

46 = 2E

89 = 59

132 = 84

175 = AF

218 = DA

4 = 04

47 = 2F

90 = 5A

133 = 85

176 = B0

219 = DB

5 = 05

48 = 30

91 = 5B

134 = 86

177 = B1

220 = DC

6 = 06

49 = 31

92 = 5C

135 = 87

178 = B2

221 = DD

7 = 07

50 = 32

93 = 5D

136 = 88

179 = B3

222 = DE

8 = 08

51 = 33

94 = 5E

137 = 89

180 = B4

223 = DF

9 = 09

52 = 34

95 = 5F

138 = 8A

181 = B5

224 = E0

10 = 0A

53 = 35

96 = 60

139 = 8B

182 = B6

225 = E1

11 = 0B

54 = 36

97 = 61

140 = 8C

183 = B7

226 = E2

12 = 0C

55 = 37

98 = 62

141 = 8D

184 = B8

227 = E3

13 = 0D

56 = 38

99 = 63

142 = 8E

185 = B9

228 = E4

14 = 0E

57 = 39

100 = 64

143 = 8F

186 = BA

229 = E5

15 = 0F

58 = 3A

101 = 65

144 = 90

187 = BB

230 = E6

16 = 10

59 = 3B

102 = 66

145 = 91

188 = BC

231 = E7

17 = 11

60 = 3C

103 = 67

146 = 92

189 = BD

232 = E8

18 = 12

61 = 3D

104 = 68

147 = 93

190 = BE

233 = E9

19 = 13

62 = 3E

105 = 69

148 = 94

191 = BF

234 = EA

20 = 14

63 = 3F

106 = 6A

149 = 95

192 = C0

235 = EB

21 = 15

64 = 40

107 = 6B

150 = 96

193 = C1

236 = EC

22 = 16

65 = 41

108 = 6C

151 = 97

194 = C2

237 = ED

23 = 17

66 = 42

109 = 6D

152 = 98

195 = C3

238 = EE

24 = 18

67 = 43

110 = 6E

153 = 99

196 = C4

239 = EF

25 = 19

68 = 44

111 = 6F

154 = 9A

197 = C5

240 = F0

26 = 1A

69 = 45

112 = 70

155 = 9B

198 = C6

241 = F1

27 = 1B

70 = 46

113 = 71

156 = 9C

199 = C7

242 = F2

28 = 1C

71 = 47

114 = 72

157 = 9D

200 = C8

243 = F3

29 = 1D

72 = 48

115 = 73

158 = 9E

201 = C9

244 = F4

30 = 1E

73 = 49

116 = 74

159 = 9F

202 = CA

245 = F5

31 = 1F

74 = 4A

117 = 75

160 = A0

203 = CB

246 = F6

32 = 20

75 = 4B

118 = 76

161 = A1

204 = CC

247 = F7

33 = 21

76 = 4C

119 = 77

162 = A2

205 = CD

248 = F8

34 = 22

77 = 4D

120 = 78

163 = A3

206 = CE

249 = F9

35 = 23

78 = 4E

121 = 79

164 = A4

207 = CF

250 = FA

36 = 24

79 = 4F

122 = 7A

165 = A5

208 = D0

251 = FB

37 = 25

80 = 50

123 = 7B

166 = A6

209 = D1

252 = FC

38 = 26

81 = 51

124 = 7C

167 = A7

210 = D2

253 = FD

39 = 27

82 = 52

125 = 7D

168 = A8

211 = D3

254 = FE

40 = 28

83 = 53

126 = 7E

169 = A9

212 = D4

255 = FF

41 = 29

84 = 54

127 = 7F

170 = AA

213 = D5

 

42 = 2A

85 = 55

128 = 80

171 = AB

214 = D6

 


D.1.1.2. Hexadecimal values for web palette colors

The web palette is a set of 216 colors that will not shift or dither when rendered in browsers on 8-bit monitors. (For a thorough explanation of the web palette, see Chapter 29.) All colors in the web palette are made up of combinations of the following six hexadecimal values: 00, 33, 66, 99, CC, and FF.

D.1.2. RGB Colors in CSS

RGB colors can be specified in style rules by any of the methods listed in Table D-2.

Table D-2. Methods for specifying RGB colors

Method

Syntax

Example

Six-digit hexadecimal.

#RRGGBB

color: #0033FF

Three-digit RGB shorthand. This method may be used when each RGB value is double digits.

#RGB

(interpreted as #RRGGBB)

color: #03F

(interpreted as color: #0033FF)

Three decimal values.

rgb(n, n, n)

color: rgb(0,51,255)

Three percentage values (calculated as a percentage of 255).

rgb(%, %, %)

color: rgb(0%, 20%, 100%)


D.1.3. RGB Colors in HTML

Because color is presentational, it should always be specified using style sheets, but should you need to specify color in the HTML document, it is always done using the six-digit hexadecimal syntax:

 #RRGGBB 

For example:

 <td bgcolor="#2D1F60">...</td> 




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net