2020-10-13 17:16:15 +00:00
|
|
|
<!DOCTYPE html><!-- webkit-test-runner [ ColorFilterEnabled=true ] -->
|
2018-07-17 02:03:33 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
.sample {
|
|
|
|
|
width: 500px;
|
|
|
|
|
height: 400px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
-apple-color-filter: apple-invert-lightness();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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[0];
|
|
|
|
|
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>
|
