-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcss_colors.js
59 lines (56 loc) · 1.95 KB
/
css_colors.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
javascript:(function() {
const rgbToHsl = (r, g, b) => {
r /= 255, g /= 255, b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
};
const extractColorRules = () => {
const colorDict = {};
Array.from(document.styleSheets).forEach(sheet => {
try {
Array.from(sheet.rules || sheet.cssRules).forEach(rule => {
if (rule.style) {
['color', 'background-color'].forEach(property => {
const value = rule.style.getPropertyValue(property);
if (value) {
if (!colorDict[value]) colorDict[value] = [];
colorDict[value].push(`${rule.selectorText} { ${property}: ${value}; }`);
}
});
}
});
} catch (e) {}
});
const colors = Object.keys(colorDict).sort((a, b) => {
const aRGB = window.getComputedStyle(document.body).color.match(/\d+/g);
const bRGB = window.getComputedStyle(document.body).backgroundColor.match(/\d+/g);
const aHSL = rgbToHsl(+aRGB[0], +aRGB[1], +aRGB[2]);
const bHSL = rgbToHsl(+bRGB[0], +bRGB[1], +bRGB[2]);
return aHSL[0] - bHSL[0] || aHSL[1] - bHSL[1] || aHSL[2] - bHSL[2];
});
let htmlContent = '<html><head><title>Color Swatches</title></head><body>';
colors.forEach(color => {
htmlContent += `<div style="display: flex; align-items: center; margin: 10px;"><div style="width: 50px; height: 50px; background-color: ${color};"></div><div style="margin-left: 10px;">`;
htmlContent += colorDict[color].join('<br>');
htmlContent += '</div></div>';
});
htmlContent += '</body></html>';
const win = window.open('', '_blank');
win.document.write(htmlContent);
win.document.close();
};
extractColorRules();
})();