color.html 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .color-group {
  8. display: inline-block;
  9. float:left;
  10. }
  11. .js-color {
  12. height:20px;
  13. width:20px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="color-group">
  19. <div class="color-block">
  20. <div class="js-color" style="background-color: #CCFF00" data-hex="#CCFF00" data-rgb="204, 255, 0" data-hsl="72, 100%, 50%"></div>
  21. </div>
  22. <div class="color-block">
  23. <div class="js-color" style="background-color: #CCFF33" data-hex="#CCFF33" data-rgb="204, 255, 51" data-hsl="75, 100%, 60%"></div>
  24. </div>
  25. <div class="color-block">
  26. <div class="js-color" style="background-color: #CCFF66" data-hex="#CCFF66" data-rgb="204, 255, 102" data-hsl="80, 100%, 70%"></div>
  27. </div>
  28. <div class="color-block">
  29. <div class="js-color" style="background-color: #CCFF99" data-hex="#CCFF99" data-rgb="204, 255, 153" data-hsl="90, 100%, 80%"></div>
  30. </div>
  31. <div class="color-block">
  32. <div class="js-color" style="background-color: #CCFFCC" data-hex="#CCFFCC" data-rgb="204, 255, 204" data-hsl="120, 100%, 90%"></div>
  33. </div>
  34. <div class="color-block">
  35. <div class="js-color" style="background-color: #CCFFFF" data-hex="#CCFFFF" data-rgb="204, 255, 255" data-hsl="180, 100%, 90%"></div>
  36. </div>
  37. <div class="color-block">
  38. <div class="js-color" style="background-color: #FFFFFF" data-hex="#FFFFFF" data-rgb="255, 255, 255" data-hsl="0, 0%, 100%"></div>
  39. </div>
  40. <div class="color-block">
  41. <div class="js-color" style="background-color: #FFFFCC" data-hex="#FFFFCC" data-rgb="255, 255, 204" data-hsl="60, 100%, 90%"></div>
  42. </div>
  43. <div class="color-block">
  44. <div class="js-color" style="background-color: #FFFF99" data-hex="#FFFF99" data-rgb="255, 255, 153" data-hsl="60, 100%, 80%"></div>
  45. </div>
  46. <div class="color-block">
  47. <div class="js-color" style="background-color: #FFFF66" data-hex="#FFFF66" data-rgb="255, 255, 102" data-hsl="60, 100%, 70%"></div>
  48. </div>
  49. <div class="color-block">
  50. <div class="js-color" style="background-color: #FFFF33" data-hex="#FFFF33" data-rgb="255, 255, 51" data-hsl="60, 100%, 60%"></div>
  51. </div>
  52. <div class="color-block">
  53. <div class="js-color" style="background-color: #FFFF00" data-hex="#FFFF00" data-rgb="255, 255, 0" data-hsl="60, 100%, 50%"></div>
  54. </div>
  55. </div>
  56. <div class="color-group">
  57. <div class="color-block">
  58. <div class="js-color" style="background-color: #CCCC00" data-hex="#CCCC00" data-rgb="204, 204, 0" data-hsl="60, 100%, 40%"></div>
  59. </div>
  60. <div class="color-block">
  61. <div class="js-color" style="background-color: #CCCC33" data-hex="#CCCC33" data-rgb="204, 204, 51" data-hsl="60, 60%, 50%"></div>
  62. </div>
  63. <div class="color-block">
  64. <div class="js-color" style="background-color: #CCCC66" data-hex="#CCCC66" data-rgb="204, 204, 102" data-hsl="60, 50%, 60%"></div>
  65. </div>
  66. <div class="color-block">
  67. <div class="js-color" style="background-color: #CCCC99" data-hex="#CCCC99" data-rgb="204, 204, 153" data-hsl="60, 33%, 70%"></div>
  68. </div>
  69. <div class="color-block">
  70. <div class="js-color" style="background-color: #CCCCCC" data-hex="#CCCCCC" data-rgb="204, 204, 204" data-hsl="0, 0%, 80%"></div>
  71. </div>
  72. <div class="color-block">
  73. <div class="js-color" style="background-color: #CCCCFF" data-hex="#CCCCFF" data-rgb="204, 204, 255" data-hsl="240, 100%, 90%"></div>
  74. </div>
  75. <div class="color-block">
  76. <div class="js-color" style="background-color: #FFCCFF" data-hex="#FFCCFF" data-rgb="255, 204, 255" data-hsl="300, 100%, 90%"></div>
  77. </div>
  78. <div class="color-block">
  79. <div class="js-color" style="background-color: #FFCCCC" data-hex="#FFCCCC" data-rgb="255, 204, 204" data-hsl="0, 100%, 90%"></div>
  80. </div>
  81. <div class="color-block">
  82. <div class="js-color" style="background-color: #FFCC99" data-hex="#FFCC99" data-rgb="255, 204, 153" data-hsl="30, 100%, 80%"></div>
  83. </div>
  84. <div class="color-block">
  85. <div class="js-color" style="background-color: #FFCC66" data-hex="#FFCC66" data-rgb="255, 204, 102" data-hsl="40, 100%, 70%"></div>
  86. </div>
  87. <div class="color-block">
  88. <div class="js-color" style="background-color: #FFCC33" data-hex="#FFCC33" data-rgb="255, 204, 51" data-hsl="45, 100%, 60%"></div>
  89. </div>
  90. <div class="color-block">
  91. <div class="js-color" style="background-color: #FFCC00" data-hex="#FFCC00" data-rgb="255, 204, 0" data-hsl="48, 100%, 50%"></div>
  92. </div>
  93. </div>
  94. <div class="color-group">
  95. <div class="color-block">
  96. <div class="js-color" style="background-color: #CC9900" data-hex="#CC9900" data-rgb="204, 153, 0" data-hsl="45, 100%, 40%"></div>
  97. </div>
  98. <div class="color-block">
  99. <div class="js-color" style="background-color: #CC9933" data-hex="#CC9933" data-rgb="204, 153, 51" data-hsl="40, 60%, 50%"></div>
  100. </div>
  101. <div class="color-block">
  102. <div class="js-color" style="background-color: #CC9966" data-hex="#CC9966" data-rgb="204, 153, 102" data-hsl="30, 50%, 60%"></div>
  103. </div>
  104. <div class="color-block">
  105. <div class="js-color" style="background-color: #CC9999" data-hex="#CC9999" data-rgb="204, 153, 153" data-hsl="0, 33%, 70%"></div>
  106. </div>
  107. <div class="color-block">
  108. <div class="js-color" style="background-color: #CC99CC" data-hex="#CC99CC" data-rgb="204, 153, 204" data-hsl="300, 33%, 70%"></div>
  109. </div>
  110. <div class="color-block">
  111. <div class="js-color" style="background-color: #CC99FF" data-hex="#CC99FF" data-rgb="204, 153, 255" data-hsl="270, 100%, 80%"></div>
  112. </div>
  113. <div class="color-block">
  114. <div class="js-color" style="background-color: #FF99FF" data-hex="#FF99FF" data-rgb="255, 153, 255" data-hsl="300, 100%, 80%"></div>
  115. </div>
  116. <div class="color-block">
  117. <div class="js-color" style="background-color: #FF99CC" data-hex="#FF99CC" data-rgb="255, 153, 204" data-hsl="330, 100%, 80%"></div>
  118. </div>
  119. <div class="color-block">
  120. <div class="js-color" style="background-color: #FF9999" data-hex="#FF9999" data-rgb="255, 153, 153" data-hsl="0, 100%, 80%"></div>
  121. </div>
  122. <div class="color-block">
  123. <div class="js-color" style="background-color: #FF9966" data-hex="#FF9966" data-rgb="255, 153, 102" data-hsl="20, 100%, 70%"></div>
  124. </div>
  125. <div class="color-block">
  126. <div class="js-color" style="background-color: #FF9933" data-hex="#FF9933" data-rgb="255, 153, 51" data-hsl="30, 100%, 60%"></div>
  127. </div>
  128. <div class="color-block">
  129. <div class="js-color" style="background-color: #FF9900" data-hex="#FF9900" data-rgb="255, 153, 0" data-hsl="36, 100%, 50%"></div>
  130. </div>
  131. </div>
  132. <div class="color-group">
  133. <div class="color-block">
  134. <div class="js-color" style="background-color: #CC6600" data-hex="#CC6600" data-rgb="204, 102, 0" data-hsl="30, 100%, 40%"></div>
  135. </div>
  136. <div class="color-block">
  137. <div class="js-color" style="background-color: #CC6633" data-hex="#CC6633" data-rgb="204, 102, 51" data-hsl="20, 60%, 50%"></div>
  138. </div>
  139. <div class="color-block">
  140. <div class="js-color" style="background-color: #CC6666" data-hex="#CC6666" data-rgb="204, 102, 102" data-hsl="0, 50%, 60%"></div>
  141. </div>
  142. <div class="color-block">
  143. <div class="js-color" style="background-color: #CC6699" data-hex="#CC6699" data-rgb="204, 102, 153" data-hsl="330, 50%, 60%"></div>
  144. </div>
  145. <div class="color-block">
  146. <div class="js-color" style="background-color: #CC66CC" data-hex="#CC66CC" data-rgb="204, 102, 204" data-hsl="300, 50%, 60%"></div>
  147. </div>
  148. <div class="color-block">
  149. <div class="js-color" style="background-color: #CC66FF" data-hex="#CC66FF" data-rgb="204, 102, 255" data-hsl="280, 100%, 70%"></div>
  150. </div>
  151. <div class="color-block">
  152. <div class="js-color" style="background-color: #FF66FF" data-hex="#FF66FF" data-rgb="255, 102, 255" data-hsl="300, 100%, 70%"></div>
  153. </div>
  154. <div class="color-block">
  155. <div class="js-color" style="background-color: #FF66CC" data-hex="#FF66CC" data-rgb="255, 102, 204" data-hsl="320, 100%, 70%"></div>
  156. </div>
  157. <div class="color-block">
  158. <div class="js-color" style="background-color: #FF6699" data-hex="#FF6699" data-rgb="255, 102, 153" data-hsl="340, 100%, 70%"></div>
  159. </div>
  160. <div class="color-block">
  161. <div class="js-color" style="background-color: #FF6666" data-hex="#FF6666" data-rgb="255, 102, 102" data-hsl="0, 100%, 70%"></div>
  162. </div>
  163. <div class="color-block">
  164. <div class="js-color" style="background-color: #FF6633" data-hex="#FF6633" data-rgb="255, 102, 51" data-hsl="15, 100%, 60%"></div>
  165. </div>
  166. <div class="color-block">
  167. <div class="js-color" style="background-color: #FF6600" data-hex="#FF6600" data-rgb="255, 102, 0" data-hsl="24, 100%, 50%"></div>
  168. </div>
  169. </div>
  170. <div class="color-group">
  171. <div class="color-block">
  172. <div class="js-color" style="background-color: #CC3300" data-hex="#CC3300" data-rgb="204, 51, 0" data-hsl="15, 100%, 40%"></div>
  173. </div>
  174. <div class="color-block">
  175. <div class="js-color" style="background-color: #CC3333" data-hex="#CC3333" data-rgb="204, 51, 51" data-hsl="0, 60%, 50%"></div>
  176. </div>
  177. <div class="color-block">
  178. <div class="js-color" style="background-color: #CC3366" data-hex="#CC3366" data-rgb="204, 51, 102" data-hsl="340, 60%, 50%"></div>
  179. </div>
  180. <div class="color-block">
  181. <div class="js-color" style="background-color: #CC3399" data-hex="#CC3399" data-rgb="204, 51, 153" data-hsl="320, 60%, 50%"></div>
  182. </div>
  183. <div class="color-block">
  184. <div class="js-color" style="background-color: #CC33CC" data-hex="#CC33CC" data-rgb="204, 51, 204" data-hsl="300, 60%, 50%"></div>
  185. </div>
  186. <div class="color-block">
  187. <div class="js-color" style="background-color: #CC33FF" data-hex="#CC33FF" data-rgb="204, 51, 255" data-hsl="285, 100%, 60%"></div>
  188. </div>
  189. <div class="color-block">
  190. <div class="js-color" style="background-color: #FF33FF" data-hex="#FF33FF" data-rgb="255, 51, 255" data-hsl="300, 100%, 60%"></div>
  191. </div>
  192. <div class="color-block">
  193. <div class="js-color" style="background-color: #FF33CC" data-hex="#FF33CC" data-rgb="255, 51, 204" data-hsl="315, 100%, 60%"></div>
  194. </div>
  195. <div class="color-block">
  196. <div class="js-color" style="background-color: #FF3399" data-hex="#FF3399" data-rgb="255, 51, 153" data-hsl="330, 100%, 60%"></div>
  197. </div>
  198. <div class="color-block">
  199. <div class="js-color" style="background-color: #FF3366" data-hex="#FF3366" data-rgb="255, 51, 102" data-hsl="345, 100%, 60%"></div>
  200. </div>
  201. <div class="color-block">
  202. <div class="js-color" style="background-color: #FF3333" data-hex="#FF3333" data-rgb="255, 51, 51" data-hsl="0, 100%, 60%"></div>
  203. </div>
  204. <div class="color-block">
  205. <div class="js-color" style="background-color: #FF3300" data-hex="#FF3300" data-rgb="255, 51, 0" data-hsl="12, 100%, 50%"></div>
  206. </div>
  207. </div>
  208. <div class="color-group">
  209. <div class="color-block">
  210. <div class="js-color" style="background-color: #CC0000" data-hex="#CC0000" data-rgb="204, 0, 0" data-hsl="0, 100%, 40%"></div>
  211. </div>
  212. <div class="color-block">
  213. <div class="js-color" style="background-color: #CC0033" data-hex="#CC0033" data-rgb="204, 0, 51" data-hsl="345, 100%, 40%"></div>
  214. </div>
  215. <div class="color-block">
  216. <div class="js-color" style="background-color: #CC0066" data-hex="#CC0066" data-rgb="204, 0, 102" data-hsl="330, 100%, 40%"></div>
  217. </div>
  218. <div class="color-block">
  219. <div class="js-color" style="background-color: #CC0099" data-hex="#CC0099" data-rgb="204, 0, 153" data-hsl="315, 100%, 40%"></div>
  220. </div>
  221. <div class="color-block">
  222. <div class="js-color" style="background-color: #CC00CC" data-hex="#CC00CC" data-rgb="204, 0, 204" data-hsl="300, 100%, 40%"></div>
  223. </div>
  224. <div class="color-block">
  225. <div class="js-color" style="background-color: #CC00FF" data-hex="#CC00FF" data-rgb="204, 0, 255" data-hsl="288, 100%, 50%"></div>
  226. </div>
  227. <div class="color-block">
  228. <div class="js-color" style="background-color: #FF00FF" data-hex="#FF00FF" data-rgb="255, 0, 255" data-hsl="300, 100%, 50%"></div>
  229. </div>
  230. <div class="color-block">
  231. <div class="js-color" style="background-color: #FF00CC" data-hex="#FF00CC" data-rgb="255, 0, 204" data-hsl="312, 100%, 50%"></div>
  232. </div>
  233. <div class="color-block">
  234. <div class="js-color" style="background-color: #FF0099" data-hex="#FF0099" data-rgb="255, 0, 153" data-hsl="324, 100%, 50%"></div>
  235. </div>
  236. <div class="color-block">
  237. <div class="js-color" style="background-color: #FF0066" data-hex="#FF0066" data-rgb="255, 0, 102" data-hsl="336, 100%, 50%"></div>
  238. </div>
  239. <div class="color-block">
  240. <div class="js-color" style="background-color: #FF0033" data-hex="#FF0033" data-rgb="255, 0, 51" data-hsl="348, 100%, 50%"></div>
  241. </div>
  242. <div class="color-block">
  243. <div class="js-color" style="background-color: #FF0000" data-hex="#FF0000" data-rgb="255, 0, 0" data-hsl="0, 100%, 50%"></div>
  244. </div>
  245. </div>
  246. <div class="color-group">
  247. <div class="color-block">
  248. <div class="js-color" style="background-color: #660000" data-hex="#660000" data-rgb="102, 0, 0" data-hsl="0, 100%, 20%"></div>
  249. </div>
  250. <div class="color-block">
  251. <div class="js-color" style="background-color: #660033" data-hex="#660033" data-rgb="102, 0, 51" data-hsl="330, 100%, 20%"></div>
  252. </div>
  253. <div class="color-block">
  254. <div class="js-color" style="background-color: #660066" data-hex="#660066" data-rgb="102, 0, 102" data-hsl="300, 100%, 20%"></div>
  255. </div>
  256. <div class="color-block">
  257. <div class="js-color" style="background-color: #660099" data-hex="#660099" data-rgb="102, 0, 153" data-hsl="280, 100%, 30%"></div>
  258. </div>
  259. <div class="color-block">
  260. <div class="js-color" style="background-color: #6600CC" data-hex="#6600CC" data-rgb="102, 0, 204" data-hsl="270, 100%, 40%"></div>
  261. </div>
  262. <div class="color-block">
  263. <div class="js-color" style="background-color: #6600FF" data-hex="#6600FF" data-rgb="102, 0, 255" data-hsl="264, 100%, 50%"></div>
  264. </div>
  265. <div class="color-block">
  266. <div class="js-color" style="background-color: #9900FF" data-hex="#9900FF" data-rgb="153, 0, 255" data-hsl="276, 100%, 50%"></div>
  267. </div>
  268. <div class="color-block">
  269. <div class="js-color" style="background-color: #9900CC" data-hex="#9900CC" data-rgb="153, 0, 204" data-hsl="285, 100%, 40%"></div>
  270. </div>
  271. <div class="color-block">
  272. <div class="js-color" style="background-color: #990099" data-hex="#990099" data-rgb="153, 0, 153" data-hsl="300, 100%, 30%"></div>
  273. </div>
  274. <div class="color-block">
  275. <div class="js-color" style="background-color: #990066" data-hex="#990066" data-rgb="153, 0, 102" data-hsl="320, 100%, 30%"></div>
  276. </div>
  277. <div class="color-block">
  278. <div class="js-color" style="background-color: #990033" data-hex="#990033" data-rgb="153, 0, 51" data-hsl="340, 100%, 30%"></div>
  279. </div>
  280. <div class="color-block">
  281. <div class="js-color" style="background-color: #990000" data-hex="#990000" data-rgb="153, 0, 0" data-hsl="0, 100%, 30%"></div>
  282. </div>
  283. </div>
  284. <div class="color-group">
  285. <div class="color-block">
  286. <div class="js-color" style="background-color: #663300" data-hex="#663300" data-rgb="102, 51, 0" data-hsl="30, 100%, 20%"></div>
  287. </div>
  288. <div class="color-block">
  289. <div class="js-color" style="background-color: #663333" data-hex="#663333" data-rgb="102, 51, 51" data-hsl="0, 33%, 30%"></div>
  290. </div>
  291. <div class="color-block">
  292. <div class="js-color" style="background-color: #663366" data-hex="#663366" data-rgb="102, 51, 102" data-hsl="300, 33%, 30%"></div>
  293. </div>
  294. <div class="color-block">
  295. <div class="js-color" style="background-color: #663399" data-hex="#663399" data-rgb="102, 51, 153" data-hsl="270, 50%, 40%"></div>
  296. </div>
  297. <div class="color-block">
  298. <div class="js-color" style="background-color: #6633CC" data-hex="#6633CC" data-rgb="102, 51, 204" data-hsl="260, 60%, 50%"></div>
  299. </div>
  300. <div class="color-block">
  301. <div class="js-color" style="background-color: #6633FF" data-hex="#6633FF" data-rgb="102, 51, 255" data-hsl="255, 100%, 60%"></div>
  302. </div>
  303. <div class="color-block">
  304. <div class="js-color" style="background-color: #9933FF" data-hex="#9933FF" data-rgb="153, 51, 255" data-hsl="270, 100%, 60%"></div>
  305. </div>
  306. <div class="color-block">
  307. <div class="js-color" style="background-color: #9933CC" data-hex="#9933CC" data-rgb="153, 51, 204" data-hsl="280, 60%, 50%"></div>
  308. </div>
  309. <div class="color-block">
  310. <div class="js-color" style="background-color: #993399" data-hex="#993399" data-rgb="153, 51, 153" data-hsl="300, 50%, 40%"></div>
  311. </div>
  312. <div class="color-block">
  313. <div class="js-color" style="background-color: #993366" data-hex="#993366" data-rgb="153, 51, 102" data-hsl="330, 50%, 40%"></div>
  314. </div>
  315. <div class="color-block">
  316. <div class="js-color" style="background-color: #993333" data-hex="#993333" data-rgb="153, 51, 51" data-hsl="0, 50%, 40%"></div>
  317. </div>
  318. <div class="color-block">
  319. <div class="js-color" style="background-color: #993300" data-hex="#993300" data-rgb="153, 51, 0" data-hsl="20, 100%, 30%"></div>
  320. </div>
  321. </div>
  322. <div class="color-group">
  323. <div class="color-block">
  324. <div class="js-color" style="background-color: #666600" data-hex="#666600" data-rgb="102, 102, 0" data-hsl="60, 100%, 20%"></div>
  325. </div>
  326. <div class="color-block">
  327. <div class="js-color" style="background-color: #666633" data-hex="#666633" data-rgb="102, 102, 51" data-hsl="60, 33%, 30%"></div>
  328. </div>
  329. <div class="color-block">
  330. <div class="js-color" style="background-color: #666666" data-hex="#666666" data-rgb="102, 102, 102" data-hsl="0, 0%, 40%"></div>
  331. </div>
  332. <div class="color-block">
  333. <div class="js-color" style="background-color: #666699" data-hex="#666699" data-rgb="102, 102, 153" data-hsl="240, 20%, 50%"></div>
  334. </div>
  335. <div class="color-block">
  336. <div class="js-color" style="background-color: #6666CC" data-hex="#6666CC" data-rgb="102, 102, 204" data-hsl="240, 50%, 60%"></div>
  337. </div>
  338. <div class="color-block">
  339. <div class="js-color" style="background-color: #6666FF" data-hex="#6666FF" data-rgb="102, 102, 255" data-hsl="240, 100%, 70%"></div>
  340. </div>
  341. <div class="color-block">
  342. <div class="js-color" style="background-color: #9966FF" data-hex="#9966FF" data-rgb="153, 102, 255" data-hsl="260, 100%, 70%"></div>
  343. </div>
  344. <div class="color-block">
  345. <div class="js-color" style="background-color: #9966CC" data-hex="#9966CC" data-rgb="153, 102, 204" data-hsl="270, 50%, 60%"></div>
  346. </div>
  347. <div class="color-block">
  348. <div class="js-color" style="background-color: #996699" data-hex="#996699" data-rgb="153, 102, 153" data-hsl="300, 20%, 50%"></div>
  349. </div>
  350. <div class="color-block">
  351. <div class="js-color" style="background-color: #996666" data-hex="#996666" data-rgb="153, 102, 102" data-hsl="0, 20%, 50%"></div>
  352. </div>
  353. <div class="color-block">
  354. <div class="js-color" style="background-color: #996633" data-hex="#996633" data-rgb="153, 102, 51" data-hsl="30, 50%, 40%"></div>
  355. </div>
  356. <div class="color-block">
  357. <div class="js-color" style="background-color: #996600" data-hex="#996600" data-rgb="153, 102, 0" data-hsl="40, 100%, 30%"></div>
  358. </div>
  359. </div>
  360. <div class="color-group">
  361. <div class="color-block">
  362. <div class="js-color" style="background-color: #669900" data-hex="#669900" data-rgb="102, 153, 0" data-hsl="80, 100%, 30%"></div>
  363. </div>
  364. <div class="color-block">
  365. <div class="js-color" style="background-color: #669933" data-hex="#669933" data-rgb="102, 153, 51" data-hsl="90, 50%, 40%"></div>
  366. </div>
  367. <div class="color-block">
  368. <div class="js-color" style="background-color: #669966" data-hex="#669966" data-rgb="102, 153, 102" data-hsl="120, 20%, 50%"></div>
  369. </div>
  370. <div class="color-block">
  371. <div class="js-color" style="background-color: #669999" data-hex="#669999" data-rgb="102, 153, 153" data-hsl="180, 20%, 50%"></div>
  372. </div>
  373. <div class="color-block">
  374. <div class="js-color" style="background-color: #6699CC" data-hex="#6699CC" data-rgb="102, 153, 204" data-hsl="210, 50%, 60%"></div>
  375. </div>
  376. <div class="color-block">
  377. <div class="js-color" style="background-color: #6699FF" data-hex="#6699FF" data-rgb="102, 153, 255" data-hsl="220, 100%, 70%"></div>
  378. </div>
  379. <div class="color-block">
  380. <div class="js-color" style="background-color: #9999FF" data-hex="#9999FF" data-rgb="153, 153, 255" data-hsl="240, 100%, 80%"></div>
  381. </div>
  382. <div class="color-block">
  383. <div class="js-color" style="background-color: #9999CC" data-hex="#9999CC" data-rgb="153, 153, 204" data-hsl="240, 33%, 70%"></div>
  384. </div>
  385. <div class="color-block">
  386. <div class="js-color" style="background-color: #999999" data-hex="#999999" data-rgb="153, 153, 153" data-hsl="0, 0%, 60%"></div>
  387. </div>
  388. <div class="color-block">
  389. <div class="js-color" style="background-color: #999966" data-hex="#999966" data-rgb="153, 153, 102" data-hsl="60, 20%, 50%"></div>
  390. </div>
  391. <div class="color-block">
  392. <div class="js-color" style="background-color: #999933" data-hex="#999933" data-rgb="153, 153, 51" data-hsl="60, 50%, 40%"></div>
  393. </div>
  394. <div class="color-block">
  395. <div class="js-color" style="background-color: #999900" data-hex="#999900" data-rgb="153, 153, 0" data-hsl="60, 100%, 30%"></div>
  396. </div>
  397. </div>
  398. <div class="color-group">
  399. <div class="color-block">
  400. <div class="js-color" style="background-color: #66CC00" data-hex="#66CC00" data-rgb="102, 204, 0" data-hsl="90, 100%, 40%"></div>
  401. </div>
  402. <div class="color-block">
  403. <div class="js-color" style="background-color: #66CC33" data-hex="#66CC33" data-rgb="102, 204, 51" data-hsl="100, 60%, 50%"></div>
  404. </div>
  405. <div class="color-block">
  406. <div class="js-color" style="background-color: #66CC66" data-hex="#66CC66" data-rgb="102, 204, 102" data-hsl="120, 50%, 60%"></div>
  407. </div>
  408. <div class="color-block">
  409. <div class="js-color" style="background-color: #66CC99" data-hex="#66CC99" data-rgb="102, 204, 153" data-hsl="150, 50%, 60%"></div>
  410. </div>
  411. <div class="color-block">
  412. <div class="js-color" style="background-color: #66CCCC" data-hex="#66CCCC" data-rgb="102, 204, 204" data-hsl="180, 50%, 60%"></div>
  413. </div>
  414. <div class="color-block">
  415. <div class="js-color" style="background-color: #66CCFF" data-hex="#66CCFF" data-rgb="102, 204, 255" data-hsl="200, 100%, 70%"></div>
  416. </div>
  417. <div class="color-block">
  418. <div class="js-color" style="background-color: #99CCFF" data-hex="#99CCFF" data-rgb="153, 204, 255" data-hsl="210, 100%, 80%"></div>
  419. </div>
  420. <div class="color-block">
  421. <div class="js-color" style="background-color: #99CCCC" data-hex="#99CCCC" data-rgb="153, 204, 204" data-hsl="180, 33%, 70%"></div>
  422. </div>
  423. <div class="color-block">
  424. <div class="js-color" style="background-color: #99CC99" data-hex="#99CC99" data-rgb="153, 204, 153" data-hsl="120, 33%, 70%"></div>
  425. </div>
  426. <div class="color-block">
  427. <div class="js-color" style="background-color: #99CC66" data-hex="#99CC66" data-rgb="153, 204, 102" data-hsl="90, 50%, 60%"></div>
  428. </div>
  429. <div class="color-block">
  430. <div class="js-color" style="background-color: #99CC33" data-hex="#99CC33" data-rgb="153, 204, 51" data-hsl="80, 60%, 50%"></div>
  431. </div>
  432. <div class="color-block">
  433. <div class="js-color" style="background-color: #99CC00" data-hex="#99CC00" data-rgb="153, 204, 0" data-hsl="75, 100%, 40%"></div>
  434. </div>
  435. </div>
  436. <div class="color-group">
  437. <div class="color-block">
  438. <div class="js-color" style="background-color: #66FF00" data-hex="#66FF00" data-rgb="102, 255, 0" data-hsl="96, 100%, 50%"></div>
  439. </div>
  440. <div class="color-block">
  441. <div class="js-color" style="background-color: #66FF33" data-hex="#66FF33" data-rgb="102, 255, 51" data-hsl="105, 100%, 60%"></div>
  442. </div>
  443. <div class="color-block">
  444. <div class="js-color" style="background-color: #66FF66" data-hex="#66FF66" data-rgb="102, 255, 102" data-hsl="120, 100%, 70%"></div>
  445. </div>
  446. <div class="color-block">
  447. <div class="js-color" style="background-color: #66FF99" data-hex="#66FF99" data-rgb="102, 255, 153" data-hsl="140, 100%, 70%"></div>
  448. </div>
  449. <div class="color-block">
  450. <div class="js-color" style="background-color: #66FFCC" data-hex="#66FFCC" data-rgb="102, 255, 204" data-hsl="160, 100%, 70%"></div>
  451. </div>
  452. <div class="color-block">
  453. <div class="js-color" style="background-color: #66FFFF" data-hex="#66FFFF" data-rgb="102, 255, 255" data-hsl="180, 100%, 70%"></div>
  454. </div>
  455. <div class="color-block">
  456. <div class="js-color" style="background-color: #99FFFF" data-hex="#99FFFF" data-rgb="153, 255, 255" data-hsl="180, 100%, 80%"></div>
  457. </div>
  458. <div class="color-block">
  459. <div class="js-color" style="background-color: #99FFCC" data-hex="#99FFCC" data-rgb="153, 255, 204" data-hsl="150, 100%, 80%"></div>
  460. </div>
  461. <div class="color-block">
  462. <div class="js-color" style="background-color: #99FF99" data-hex="#99FF99" data-rgb="153, 255, 153" data-hsl="120, 100%, 80%"></div>
  463. </div>
  464. <div class="color-block">
  465. <div class="js-color" style="background-color: #99FF66" data-hex="#99FF66" data-rgb="153, 255, 102" data-hsl="100, 100%, 70%"></div>
  466. </div>
  467. <div class="color-block">
  468. <div class="js-color" style="background-color: #99FF33" data-hex="#99FF33" data-rgb="153, 255, 51" data-hsl="90, 100%, 60%"></div>
  469. </div>
  470. <div class="color-block">
  471. <div class="js-color" style="background-color: #99FF00" data-hex="#99FF00" data-rgb="153, 255, 0" data-hsl="84, 100%, 50%"></div>
  472. </div>
  473. </div>
  474. <div class="color-group">
  475. <div class="color-block">
  476. <div class="js-color" style="background-color: #00FF00" data-hex="#00FF00" data-rgb="0, 255, 0" data-hsl="120, 100%, 50%"></div>
  477. </div>
  478. <div class="color-block">
  479. <div class="js-color" style="background-color: #00FF33" data-hex="#00FF33" data-rgb="0, 255, 51" data-hsl="132, 100%, 50%"></div>
  480. </div>
  481. <div class="color-block">
  482. <div class="js-color" style="background-color: #00FF66" data-hex="#00FF66" data-rgb="0, 255, 102" data-hsl="144, 100%, 50%"></div>
  483. </div>
  484. <div class="color-block">
  485. <div class="js-color" style="background-color: #00FF99" data-hex="#00FF99" data-rgb="0, 255, 153" data-hsl="156, 100%, 50%"></div>
  486. </div>
  487. <div class="color-block">
  488. <div class="js-color" style="background-color: #00FFCC" data-hex="#00FFCC" data-rgb="0, 255, 204" data-hsl="168, 100%, 50%"></div>
  489. </div>
  490. <div class="color-block">
  491. <div class="js-color" style="background-color: #00FFFF" data-hex="#00FFFF" data-rgb="0, 255, 255" data-hsl="180, 100%, 50%"></div>
  492. </div>
  493. <div class="color-block">
  494. <div class="js-color" style="background-color: #33FFFF" data-hex="#33FFFF" data-rgb="51, 255, 255" data-hsl="180, 100%, 60%"></div>
  495. </div>
  496. <div class="color-block">
  497. <div class="js-color" style="background-color: #33FFCC" data-hex="#33FFCC" data-rgb="51, 255, 204" data-hsl="165, 100%, 60%"></div>
  498. </div>
  499. <div class="color-block">
  500. <div class="js-color" style="background-color: #33FF99" data-hex="#33FF99" data-rgb="51, 255, 153" data-hsl="150, 100%, 60%"></div>
  501. </div>
  502. <div class="color-block">
  503. <div class="js-color" style="background-color: #33FF66" data-hex="#33FF66" data-rgb="51, 255, 102" data-hsl="135, 100%, 60%"></div>
  504. </div>
  505. <div class="color-block">
  506. <div class="js-color" style="background-color: #33FF33" data-hex="#33FF33" data-rgb="51, 255, 51" data-hsl="120, 100%, 60%"></div>
  507. </div>
  508. <div class="color-block">
  509. <div class="js-color" style="background-color: #33FF00" data-hex="#33FF00" data-rgb="51, 255, 0" data-hsl="108, 100%, 50%"></div>
  510. </div>
  511. </div>
  512. <div class="color-group">
  513. <div class="color-block">
  514. <div class="js-color" style="background-color: #00CC00" data-hex="#00CC00" data-rgb="0, 204, 0" data-hsl="120, 100%, 40%"></div>
  515. </div>
  516. <div class="color-block">
  517. <div class="js-color" style="background-color: #00CC33" data-hex="#00CC33" data-rgb="0, 204, 51" data-hsl="135, 100%, 40%"></div>
  518. </div>
  519. <div class="color-block">
  520. <div class="js-color" style="background-color: #00CC66" data-hex="#00CC66" data-rgb="0, 204, 102" data-hsl="150, 100%, 40%"></div>
  521. </div>
  522. <div class="color-block">
  523. <div class="js-color" style="background-color: #00CC99" data-hex="#00CC99" data-rgb="0, 204, 153" data-hsl="165, 100%, 40%"></div>
  524. </div>
  525. <div class="color-block">
  526. <div class="js-color" style="background-color: #00CCCC" data-hex="#00CCCC" data-rgb="0, 204, 204" data-hsl="180, 100%, 40%"></div>
  527. </div>
  528. <div class="color-block">
  529. <div class="js-color" style="background-color: #00CCFF" data-hex="#00CCFF" data-rgb="0, 204, 255" data-hsl="192, 100%, 50%"></div>
  530. </div>
  531. <div class="color-block">
  532. <div class="js-color" style="background-color: #33CCFF" data-hex="#33CCFF" data-rgb="51, 204, 255" data-hsl="195, 100%, 60%"></div>
  533. </div>
  534. <div class="color-block">
  535. <div class="js-color" style="background-color: #33CCCC" data-hex="#33CCCC" data-rgb="51, 204, 204" data-hsl="180, 60%, 50%"></div>
  536. </div>
  537. <div class="color-block">
  538. <div class="js-color" style="background-color: #33CC99" data-hex="#33CC99" data-rgb="51, 204, 153" data-hsl="160, 60%, 50%"></div>
  539. </div>
  540. <div class="color-block">
  541. <div class="js-color" style="background-color: #33CC66" data-hex="#33CC66" data-rgb="51, 204, 102" data-hsl="140, 60%, 50%"></div>
  542. </div>
  543. <div class="color-block">
  544. <div class="js-color" style="background-color: #33CC33" data-hex="#33CC33" data-rgb="51, 204, 51" data-hsl="120, 60%, 50%"></div>
  545. </div>
  546. <div class="color-block">
  547. <div class="js-color" style="background-color: #33CC00" data-hex="#33CC00" data-rgb="51, 204, 0" data-hsl="105, 100%, 40%"></div>
  548. </div>
  549. </div>
  550. <div class="color-group">
  551. <div class="color-block">
  552. <div class="js-color" style="background-color: #009900" data-hex="#009900" data-rgb="0, 153, 0" data-hsl="120, 100%, 30%"></div>
  553. </div>
  554. <div class="color-block">
  555. <div class="js-color" style="background-color: #009933" data-hex="#009933" data-rgb="0, 153, 51" data-hsl="140, 100%, 30%"></div>
  556. </div>
  557. <div class="color-block">
  558. <div class="js-color" style="background-color: #009966" data-hex="#009966" data-rgb="0, 153, 102" data-hsl="160, 100%, 30%"></div>
  559. </div>
  560. <div class="color-block">
  561. <div class="js-color" style="background-color: #009999" data-hex="#009999" data-rgb="0, 153, 153" data-hsl="180, 100%, 30%"></div>
  562. </div>
  563. <div class="color-block">
  564. <div class="js-color" style="background-color: #0099CC" data-hex="#0099CC" data-rgb="0, 153, 204" data-hsl="195, 100%, 40%"></div>
  565. </div>
  566. <div class="color-block">
  567. <div class="js-color" style="background-color: #0099FF" data-hex="#0099FF" data-rgb="0, 153, 255" data-hsl="204, 100%, 50%"></div>
  568. </div>
  569. <div class="color-block">
  570. <div class="js-color" style="background-color: #3399FF" data-hex="#3399FF" data-rgb="51, 153, 255" data-hsl="210, 100%, 60%"></div>
  571. </div>
  572. <div class="color-block">
  573. <div class="js-color" style="background-color: #3399CC" data-hex="#3399CC" data-rgb="51, 153, 204" data-hsl="200, 60%, 50%"></div>
  574. </div>
  575. <div class="color-block">
  576. <div class="js-color" style="background-color: #339999" data-hex="#339999" data-rgb="51, 153, 153" data-hsl="180, 50%, 40%"></div>
  577. </div>
  578. <div class="color-block">
  579. <div class="js-color" style="background-color: #339966" data-hex="#339966" data-rgb="51, 153, 102" data-hsl="150, 50%, 40%"></div>
  580. </div>
  581. <div class="color-block">
  582. <div class="js-color" style="background-color: #339933" data-hex="#339933" data-rgb="51, 153, 51" data-hsl="120, 50%, 40%"></div>
  583. </div>
  584. <div class="color-block">
  585. <div class="js-color" style="background-color: #339900" data-hex="#339900" data-rgb="51, 153, 0" data-hsl="100, 100%, 30%"></div>
  586. </div>
  587. </div>
  588. <div class="color-group">
  589. <div class="color-block">
  590. <div class="js-color" style="background-color: #006600" data-hex="#006600" data-rgb="0, 102, 0" data-hsl="120, 100%, 20%"></div>
  591. </div>
  592. <div class="color-block">
  593. <div class="js-color" style="background-color: #006633" data-hex="#006633" data-rgb="0, 102, 51" data-hsl="150, 100%, 20%"></div>
  594. </div>
  595. <div class="color-block">
  596. <div class="js-color" style="background-color: #006666" data-hex="#006666" data-rgb="0, 102, 102" data-hsl="180, 100%, 20%"></div>
  597. </div>
  598. <div class="color-block">
  599. <div class="js-color" style="background-color: #006699" data-hex="#006699" data-rgb="0, 102, 153" data-hsl="200, 100%, 30%"></div>
  600. </div>
  601. <div class="color-block">
  602. <div class="js-color" style="background-color: #0066CC" data-hex="#0066CC" data-rgb="0, 102, 204" data-hsl="210, 100%, 40%"></div>
  603. </div>
  604. <div class="color-block">
  605. <div class="js-color" style="background-color: #0066FF" data-hex="#0066FF" data-rgb="0, 102, 255" data-hsl="216, 100%, 50%"></div>
  606. </div>
  607. <div class="color-block">
  608. <div class="js-color" style="background-color: #3366FF" data-hex="#3366FF" data-rgb="51, 102, 255" data-hsl="225, 100%, 60%"></div>
  609. </div>
  610. <div class="color-block">
  611. <div class="js-color" style="background-color: #3366CC" data-hex="#3366CC" data-rgb="51, 102, 204" data-hsl="220, 60%, 50%"></div>
  612. </div>
  613. <div class="color-block">
  614. <div class="js-color" style="background-color: #336699" data-hex="#336699" data-rgb="51, 102, 153" data-hsl="210, 50%, 40%"></div>
  615. </div>
  616. <div class="color-block">
  617. <div class="js-color" style="background-color: #336666" data-hex="#336666" data-rgb="51, 102, 102" data-hsl="180, 33%, 30%"></div>
  618. </div>
  619. <div class="color-block">
  620. <div class="js-color" style="background-color: #336633" data-hex="#336633" data-rgb="51, 102, 51" data-hsl="120, 33%, 30%"></div>
  621. </div>
  622. <div class="color-block">
  623. <div class="js-color" style="background-color: #336600" data-hex="#336600" data-rgb="51, 102, 0" data-hsl="90, 100%, 20%"></div>
  624. </div>
  625. </div>
  626. <div class="color-group">
  627. <div class="color-block">
  628. <div class="js-color" style="background-color: #003300" data-hex="#003300" data-rgb="0, 51, 0" data-hsl="120, 100%, 10%"></div>
  629. </div>
  630. <div class="color-block">
  631. <div class="js-color" style="background-color: #003333" data-hex="#003333" data-rgb="0, 51, 51" data-hsl="180, 100%, 10%"></div>
  632. </div>
  633. <div class="color-block">
  634. <div class="js-color" style="background-color: #003366" data-hex="#003366" data-rgb="0, 51, 102" data-hsl="210, 100%, 20%"></div>
  635. </div>
  636. <div class="color-block">
  637. <div class="js-color" style="background-color: #003399" data-hex="#003399" data-rgb="0, 51, 153" data-hsl="220, 100%, 30%"></div>
  638. </div>
  639. <div class="color-block">
  640. <div class="js-color" style="background-color: #0033CC" data-hex="#0033CC" data-rgb="0, 51, 204" data-hsl="225, 100%, 40%"></div>
  641. </div>
  642. <div class="color-block">
  643. <div class="js-color" style="background-color: #0033FF" data-hex="#0033FF" data-rgb="0, 51, 255" data-hsl="228, 100%, 50%"></div>
  644. </div>
  645. <div class="color-block">
  646. <div class="js-color" style="background-color: #3333FF" data-hex="#3333FF" data-rgb="51, 51, 255" data-hsl="240, 100%, 60%"></div>
  647. </div>
  648. <div class="color-block">
  649. <div class="js-color" style="background-color: #3333CC" data-hex="#3333CC" data-rgb="51, 51, 204" data-hsl="240, 60%, 50%"></div>
  650. </div>
  651. <div class="color-block">
  652. <div class="js-color" style="background-color: #333399" data-hex="#333399" data-rgb="51, 51, 153" data-hsl="240, 50%, 40%"></div>
  653. </div>
  654. <div class="color-block">
  655. <div class="js-color" style="background-color: #333366" data-hex="#333366" data-rgb="51, 51, 102" data-hsl="240, 33%, 30%"></div>
  656. </div>
  657. <div class="color-block">
  658. <div class="js-color" style="background-color: #333333" data-hex="#333333" data-rgb="51, 51, 51" data-hsl="0, 0%, 20%"></div>
  659. </div>
  660. <div class="color-block">
  661. <div class="js-color" style="background-color: #333300" data-hex="#333300" data-rgb="51, 51, 0" data-hsl="60, 100%, 10%"></div>
  662. </div>
  663. </div>
  664. <div class="color-group">
  665. <div class="color-block">
  666. <div class="js-color" style="background-color: #000000" data-hex="#000000" data-rgb="0, 0, 0" data-hsl="0, 0%, 0%"></div>
  667. </div>
  668. <div class="color-block">
  669. <div class="js-color" style="background-color: #000033" data-hex="#000033" data-rgb="0, 0, 51" data-hsl="240, 100%, 10%"></div>
  670. </div>
  671. <div class="color-block">
  672. <div class="js-color" style="background-color: #000066" data-hex="#000066" data-rgb="0, 0, 102" data-hsl="240, 100%, 20%"></div>
  673. </div>
  674. <div class="color-block">
  675. <div class="js-color" style="background-color: #000099" data-hex="#000099" data-rgb="0, 0, 153" data-hsl="240, 100%, 30%"></div>
  676. </div>
  677. <div class="color-block">
  678. <div class="js-color" style="background-color: #0000CC" data-hex="#0000CC" data-rgb="0, 0, 204" data-hsl="240, 100%, 40%"></div>
  679. </div>
  680. <div class="color-block">
  681. <div class="js-color" style="background-color: #0000FF" data-hex="#0000FF" data-rgb="0, 0, 255" data-hsl="240, 100%, 50%"></div>
  682. </div>
  683. <div class="color-block">
  684. <div class="js-color" style="background-color: #3300FF" data-hex="#3300FF" data-rgb="51, 0, 255" data-hsl="252, 100%, 50%"></div>
  685. </div>
  686. <div class="color-block">
  687. <div class="js-color" style="background-color: #3300CC" data-hex="#3300CC" data-rgb="51, 0, 204" data-hsl="255, 100%, 40%"></div>
  688. </div>
  689. <div class="color-block">
  690. <div class="js-color" style="background-color: #330099" data-hex="#330099" data-rgb="51, 0, 153" data-hsl="260, 100%, 30%"></div>
  691. </div>
  692. <div class="color-block">
  693. <div class="js-color" style="background-color: #330066" data-hex="#330066" data-rgb="51, 0, 102" data-hsl="270, 100%, 20%"></div>
  694. </div>
  695. <div class="color-block">
  696. <div class="js-color" style="background-color: #330033" data-hex="#330033" data-rgb="51, 0, 51" data-hsl="300, 100%, 10%"></div>
  697. </div>
  698. <div class="color-block">
  699. <div class="js-color" style="background-color: #330000" data-hex="#330000" data-rgb="51, 0, 0" data-hsl="0, 100%, 10%"></div>
  700. </div>
  701. </div>
  702. </div>
  703. </body>
  704. </html>