Hex code in preview
This commit is contained in:
parent
2ac28c5523
commit
a6d9f01ec8
11
colors.html
11
colors.html
|
@ -288,17 +288,28 @@ svg.addEventListener('click', e => {
|
||||||
activateColor(el);
|
activateColor(el);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// https://stackoverflow.com/a/5624139/91238
|
||||||
|
function componentToHex(c) {
|
||||||
|
var hex = c.toString(16);
|
||||||
|
return hex.length == 1 ? "0" + hex : hex;
|
||||||
|
}
|
||||||
|
function rgbToHex(r, g, b) {
|
||||||
|
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
||||||
|
}
|
||||||
|
|
||||||
let previewLocked = false;
|
let previewLocked = false;
|
||||||
function renderPreview(color) {
|
function renderPreview(color) {
|
||||||
if (!color) {
|
if (!color) {
|
||||||
document.getElementById('preview').innerHTML = '';
|
document.getElementById('preview').innerHTML = '';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
let [r, g, b] = colors[color];
|
||||||
|
|
||||||
document.getElementById('preview').innerHTML = `
|
document.getElementById('preview').innerHTML = `
|
||||||
<h1>
|
<h1>
|
||||||
${color}
|
${color}
|
||||||
<span id='swatch' style='background-color: ${color};'> </span>
|
<span id='swatch' style='background-color: ${color};'> </span>
|
||||||
|
${rgbToHex(r, g, b).toUpperCase()}
|
||||||
</h1>
|
</h1>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue