| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .sample { |
| width: 500px; |
| height: 400px; |
| background-color: rgb(51,51,51); |
| } |
| |
| .sample > div { |
| height: 30px; |
| width: 30px; |
| margin: 5px; |
| float: left; |
| } |
| |
| .test |
| { |
| width: 100px; |
| height: 100px; |
| background-color: blue; |
| border: 50px solid green; |
| margin: 10px; |
| float: left; |
| } |
| </style> |
| <script> |
| const colors = [ |
| // Original, Transformed. |
| ["rgb(0, 0, 0)", "rgb(255,255,255)"], |
| ["rgb(255, 255, 255)", "rgb(51,51,51)"], |
| ["rgb(235, 235, 235)", "rgb(67,67,67)"], |
| ["rgb(214, 214, 214)", "rgb(84,84,84)"], |
| ["rgb(192, 192, 192)", "rgb(101,101,101)"], |
| ["rgb(170, 170, 170)", "rgb(119,119,119)"], |
| ["rgb(146, 146, 146)", "rgb(138,138,138)"], |
| ["rgb(122, 122, 122)", "rgb(157,157,157)"], |
| ["rgb(96, 96, 96)", "rgb(178,178,178)"], |
| ["rgb(68, 68, 68)", "rgb(201,201,201)"], |
| ["rgb(35, 35, 35)", "rgb(227,227,227)"], |
| ["rgb(0, 0, 0)", "rgb(255,255,255)"], |
| ["rgb(0, 54, 74)", "rgb(199,242,255)"], |
| ["rgb(0, 30, 87)", "rgb(191,215,255)"], |
| ["rgb(17, 5, 59)", "rgb(222,212,255)"], |
| ["rgb(46, 7, 62)", "rgb(240,209,253)"], |
| ["rgb(60, 8, 27)", "rgb(249,207,222)"], |
| ["rgb(92, 7, 0)", "rgb(252,184,178)"], |
| ["rgb(90, 28, 0)", "rgb(251,201,179)"], |
| ["rgb(88, 52, 0)", "rgb(249,220,179)"], |
| ["rgb(85, 61, 0)", "rgb(249,230,181)"], |
| ["rgb(102, 97, 0)", "rgb(246,242,165)"], |
| ["rgb(79, 85, 3)", "rgb(241,245,180)"], |
| ["rgb(38, 62, 15)", "rgb(220,240,202)"], |
| ["rgb(0, 77, 101)", "rgb(179,240,255)"], |
| ["rgb(0, 46, 122)", "rgb(166,202,255)"], |
| ["rgb(26, 10, 83)", "rgb(207,195,253)"], |
| ["rgb(69, 14, 89)", "rgb(233,189,249)"], |
| ["rgb(86, 16, 41)", "rgb(242,186,206)"], |
| ["rgb(131, 17, 0)", "rgb(250,159,145)"], |
| ["rgb(124, 42, 0)", "rgb(249,183,149)"], |
| ["rgb(122, 74, 0)", "rgb(247,209,149)"], |
| ["rgb(120, 87, 0)", "rgb(246,220,150)"], |
| ["rgb(141, 134, 0)", "rgb(243,237,130)"], |
| ["rgb(111, 118, 8)", "rgb(233,239,151)"], |
| ["rgb(56, 87, 26)", "rgb(205,230,181)"], |
| ["rgb(0, 109, 143)", "rgb(147,234,255)"], |
| ["rgb(0, 66, 170)", "rgb(130,183,255)"], |
| ["rgb(44, 19, 118)", "rgb(189,169,248)"], |
| ["rgb(97, 23, 124)", "rgb(222,163,243)"], |
| ["rgb(121, 26, 62)", "rgb(235,159,187)"], |
| ["rgb(181, 26, 0)", "rgb(248,124,103)"], |
| ["rgb(173, 62, 0)", "rgb(246,157,108)"], |
| ["rgb(169, 104, 0)", "rgb(244,192,108)"], |
| ["rgb(167, 123, 0)", "rgb(243,208,109)"], |
| ["rgb(196, 188, 0)", "rgb(238,232,81)"], |
| ["rgb(154, 166, 14)", "rgb(221,231,109)"], |
| ["rgb(79, 122, 40)", "rgb(183,217,151)"], |
| ["rgb(0, 140, 180)", "rgb(119,231,255)"], |
| ["rgb(0, 86, 214)", "rgb(98,167,255)"], |
| ["rgb(55, 26, 148)", "rgb(170,147,244)"], |
| ["rgb(123, 33, 159)", "rgb(208,136,237)"], |
| ["rgb(154, 36, 79)", "rgb(226,132,166)"], |
| ["rgb(227, 36, 0)", "rgb(246,93,64)"], |
| ["rgb(217, 80, 0)", "rgb(244,134,70)"], |
| ["rgb(213, 132, 0)", "rgb(241,176,70)"], |
| ["rgb(210, 157, 0)", "rgb(239,197,71)"], |
| ["rgb(245, 236, 0)", "rgb(234,227,37)"], |
| ["rgb(195, 209, 23)", "rgb(209,220,71)"], |
| ["rgb(102, 156, 53)", "rgb(162,205,122)"], |
| ["rgb(0, 163, 215)", "rgb(93,223,255)"], |
| ["rgb(0, 97, 255)", "rgb(68,146,255)"], |
| ["rgb(77, 34, 179)", "rgb(158,123,239)"], |
| ["rgb(153, 41, 189)", "rgb(203,114,232)"], |
| ["rgb(185, 45, 93)", "rgb(219,107,145)"], |
| ["rgb(255, 64, 19)", "rgb(230,77,41)"], |
| ["rgb(255, 106, 0)", "rgb(241,122,37)"], |
| ["rgb(255, 170, 0)", "rgb(237,169,33)"], |
| ["rgb(254, 199, 0)", "rgb(236,192,32)"], |
| ["rgb(255, 252, 65)", "rgb(186,184,34)"], |
| ["rgb(217, 235, 55)", "rgb(181,196,51)"], |
| ["rgb(119, 187, 65)", "rgb(140,194,96)"], |
| ["rgb(0, 199, 252)", "rgb(64,223,255)"], |
| ["rgb(58, 136, 254)", "rgb(65,127,221)"], |
| ["rgb(94, 48, 235)", "rgb(119,82,232)"], |
| ["rgb(190, 56, 243)", "rgb(180,73,223)"], |
| ["rgb(230, 59, 122)", "rgb(208,71,122)"], |
| ["rgb(255, 98, 81)", "rgb(184,58,45)"], |
| ["rgb(255, 134, 71)", "rgb(189,92,42)"], |
| ["rgb(255, 180, 63)", "rgb(192,132,38)"], |
| ["rgb(254, 203, 62)", "rgb(191,151,37)"], |
| ["rgb(255, 247, 107)", "rgb(157,150,38)"], |
| ["rgb(228, 239, 101)", "rgb(153,162,52)"], |
| ["rgb(150, 211, 95)", "rgb(122,171,77)"], |
| ["rgb(83, 213, 253)", "rgb(60,164,196)"], |
| ["rgb(116, 167, 254)", "rgb(61,102,171)"], |
| ["rgb(135, 78, 254)", "rgb(111,66,206)"], |
| ["rgb(211, 87, 254)", "rgb(162,63,196)"], |
| ["rgb(237, 113, 158)", "rgb(165,66,101)"], |
| ["rgb(255, 140, 130)", "rgb(147,55,46)"], |
| ["rgb(255, 165, 125)", "rgb(149,77,44)"], |
| ["rgb(255, 198, 119)", "rgb(151,105,42)"], |
| ["rgb(255, 216, 119)", "rgb(150,119,41)"], |
| ["rgb(255, 249, 149)", "rgb(127,122,42)"], |
| ["rgb(235, 243, 143)", "rgb(126,132,52)"], |
| ["rgb(177, 221, 140)", "rgb(102,137,72)"], |
| ["rgb(148, 227, 254)", "rgb(57,120,141)"], |
| ["rgb(168, 198, 254)", "rgb(58,82,126)"], |
| ["rgb(177, 140, 254)", "rgb(90,61,152)"], |
| ["rgb(227, 146, 254)", "rgb(124,59,145)"], |
| ["rgb(244, 164, 192)", "rgb(124,60,82)"], |
| ["rgb(255, 181, 175)", "rgb(112,53,48)"], |
| ["rgb(255, 196, 171)", "rgb(114,67,47)"], |
| ["rgb(255, 217, 168)", "rgb(115,85,45)"], |
| ["rgb(255, 228, 168)", "rgb(114,93,45)"], |
| ["rgb(255, 251, 185)", "rgb(101,98,45)"], |
| ["rgb(242, 247, 183)", "rgb(99,103,52)"], |
| ["rgb(204, 232, 181)", "rgb(84,107,65)"], |
| ["rgb(202, 240, 254)", "rgb(54,85,96)"], |
| ["rgb(212, 227, 254)", "rgb(55,67,88)"], |
| ["rgb(217, 202, 254)", "rgb(68,56,97)"], |
| ["rgb(241, 201, 254)", "rgb(87,55,98)"], |
| ["rgb(249, 211, 224)", "rgb(86,56,66)"], |
| ["rgb(255, 218, 216)", "rgb(81,51,49)"], |
| ["rgb(255, 226, 214)", "rgb(82,59,49)"], |
| ["rgb(255, 236, 213)", "rgb(82,67,48)"], |
| ["rgb(255, 242, 213)", "rgb(82,71,48)"], |
| ["rgb(254, 252, 221)", "rgb(75,74,49)"], |
| ["rgb(248, 250, 219)", "rgb(76,77,52)"], |
| ["rgb(224, 237, 212)", "rgb(73,84,63)"], |
| ]; |
| |
| function createSwatches(parent) |
| { |
| for (color of colors) { |
| var child = document.createElement('div'); |
| child.style.backgroundColor = color[1]; |
| parent.appendChild(child); |
| } |
| } |
| |
| function doSetup() |
| { |
| var div; |
| for (div of document.querySelectorAll('.sample')) |
| createSwatches(div); |
| } |
| |
| window.addEventListener('load', doSetup, false); |
| |
| </script> |
| </head> |
| <body> |
| <div class="sample"></div> |
| </body> |
| </html> |
