let COLORS = namedColors();
customElements.define("color-browser", class ColorBrowser extends HTMLElement {
query = null;
rgb = false;
connectedCallback() {
this.#render();
this.addEventListener("input", this);
this.addEventListener("change", this);
}
handleEvent(ev) {
let el = ev.target;
switch(ev.type) {
case "change":
if(el.type === "checkbox") {
this.rgb = el.checked;
this.#render();
}
break;
case "input":
if(el.type === "search") {
this.query = el.value.toLowerCase();
this.#render();
this.querySelector("input[type=search]").focus(); // XXX: hacky
}
break;
}
}
get colors() {
let { query } = this;
if(!query) {
return [...COLORS];
}
return COLORS.filter(color => color.name.toLowerCase().includes(query));
}
#render() {
this.replaceChildren();
let { rgb } = this;
this.append(
renderControls(this.query, rgb),
renderPalette(this.colors, rgb)
);
}
});
function renderControls(query, rgb) {
return makeElement("form", {
method: "dialog",
children: [
createField("search", "Search", query),
createField("checkbox", "RGB", rgb)
]
});
}
function renderPalette(colors, rgb) {
let items = [];
for(let color of colors) {
let item = document.createElement("li");
items.push(item);
let value = color.hex;
makeElement("input", {
parent: item,
type: "color",
value
});
makeElement("span", {
parent: item,
text: color.name
});
makeElement("code", {
parent: item,
text: rgb ? formatRGB(color.rgb) : value
});
}
let list = document.createElement("ul");
list.append(...items);
return list;
}
function createField(type, caption, value) {
let field = makeElement("input", { type });
let children = [
makeElement("span", { text: caption }),
field
];
if(type === "checkbox") {
children.reverse();
field.checked = !!value;
} else {
field.value = value ?? "";
}
return makeElement("label", { children });
}
function makeElement(tag, { parent, children, text, ...attribs }) {
let el = document.createElement(tag);
if(text) {
el.textContent = text;
}
for(let [name, value] of Object.entries(attribs)) {
el.setAttribute(name, value);
}
if(children) {
el.append(...children);
}
parent?.appendChild(el);
return el;
}
function formatRGB(value) {
return value.split(",").
map(num => num.toString().padStart(3, " ")).
join(", ");
}
// cf. <https://www.w3.org/TR/css-color-3/#svg-color>
function namedColors() {
return [{
name: "aliceblue",
hex: "#F0F8FF",
rgb: "240,248,255"
}, {
name: "antiquewhite",
hex: "#FAEBD7",
rgb: "250,235,215"
}, {
name: "aqua",
hex: "#00FFFF",
rgb: "0,255,255"
}, {
name: "aquamarine",
hex: "#7FFFD4",
rgb: "127,255,212"
}, {
name: "azure",
hex: "#F0FFFF",
rgb: "240,255,255"
}, {
name: "beige",
hex: "#F5F5DC",
rgb: "245,245,220"
}, {
name: "bisque",
hex: "#FFE4C4",
rgb: "255,228,196"
}, {
name: "black",
hex: "#000000",
rgb: "0,0,0"
}, {
name: "blanchedalmond",
hex: "#FFEBCD",
rgb: "255,235,205"
}, {
name: "blue",
hex: "#0000FF",
rgb: "0,0,255"
}, {
name: "blueviolet",
hex: "#8A2BE2",
rgb: "138,43,226"
}, {
name: "brown",
hex: "#A52A2A",
rgb: "165,42,42"
}, {
name: "burlywood",
hex: "#DEB887",
rgb: "222,184,135"
}, {
name: "cadetblue",
hex: "#5F9EA0",
rgb: "95,158,160"
}, {
name: "chartreuse",
hex: "#7FFF00",
rgb: "127,255,0"
}, {
name: "chocolate",
hex: "#D2691E",
rgb: "210,105,30"
}, {
name: "coral",
hex: "#FF7F50",
rgb: "255,127,80"
}, {
name: "cornflowerblue",
hex: "#6495ED",
rgb: "100,149,237"
}, {
name: "cornsilk",
hex: "#FFF8DC",
rgb: "255,248,220"
}, {
name: "crimson",
hex: "#DC143C",
rgb: "220,20,60"
}, {
name: "cyan",
hex: "#00FFFF",
rgb: "0,255,255"
}, {
name: "darkblue",
hex: "#00008B",
rgb: "0,0,139"
}, {
name: "darkcyan",
hex: "#008B8B",
rgb: "0,139,139"
}, {
name: "darkgoldenrod",
hex: "#B8860B",
rgb: "184,134,11"
}, {
name: "darkgray",
hex: "#A9A9A9",
rgb: "169,169,169"
}, {
name: "darkgreen",
hex: "#006400",
rgb: "0,100,0"
}, {
name: "darkgrey",
hex: "#A9A9A9",
rgb: "169,169,169"
}, {
name: "darkkhaki",
hex: "#BDB76B",
rgb: "189,183,107"
}, {
name: "darkmagenta",
hex: "#8B008B",
rgb: "139,0,139"
}, {
name: "darkolivegreen",
hex: "#556B2F",
rgb: "85,107,47"
}, {
name: "darkorange",
hex: "#FF8C00",
rgb: "255,140,0"
}, {
name: "darkorchid",
hex: "#9932CC",
rgb: "153,50,204"
}, {
name: "darkred",
hex: "#8B0000",
rgb: "139,0,0"
}, {
name: "darksalmon",
hex: "#E9967A",
rgb: "233,150,122"
}, {
name: "darkseagreen",
hex: "#8FBC8F",
rgb: "143,188,143"
}, {
name: "darkslateblue",
hex: "#483D8B",
rgb: "72,61,139"
}, {
name: "darkslategray",
hex: "#2F4F4F",
rgb: "47,79,79"
}, {
name: "darkslategrey",
hex: "#2F4F4F",
rgb: "47,79,79"
}, {
name: "darkturquoise",
hex: "#00CED1",
rgb: "0,206,209"
}, {
name: "darkviolet",
hex: "#9400D3",
rgb: "148,0,211"
}, {
name: "deeppink",
hex: "#FF1493",
rgb: "255,20,147"
}, {
name: "deepskyblue",
hex: "#00BFFF",
rgb: "0,191,255"
}, {
name: "dimgray",
hex: "#696969",
rgb: "105,105,105"
}, {
name: "dimgrey",
hex: "#696969",
rgb: "105,105,105"
}, {
name: "dodgerblue",
hex: "#1E90FF",
rgb: "30,144,255"
}, {
name: "firebrick",
hex: "#B22222",
rgb: "178,34,34"
}, {
name: "floralwhite",
hex: "#FFFAF0",
rgb: "255,250,240"
}, {
name: "forestgreen",
hex: "#228B22",
rgb: "34,139,34"
}, {
name: "fuchsia",
hex: "#FF00FF",
rgb: "255,0,255"
}, {
name: "gainsboro",
hex: "#DCDCDC",
rgb: "220,220,220"
}, {
name: "ghostwhite",
hex: "#F8F8FF",
rgb: "248,248,255"
}, {
name: "gold",
hex: "#FFD700",
rgb: "255,215,0"
}, {
name: "goldenrod",
hex: "#DAA520",
rgb: "218,165,32"
}, {
name: "gray",
hex: "#808080",
rgb: "128,128,128"
}, {
name: "green",
hex: "#008000",
rgb: "0,128,0"
}, {
name: "greenyellow",
hex: "#ADFF2F",
rgb: "173,255,47"
}, {
name: "grey",
hex: "#808080",
rgb: "128,128,128"
}, {
name: "honeydew",
hex: "#F0FFF0",
rgb: "240,255,240"
}, {
name: "hotpink",
hex: "#FF69B4",
rgb: "255,105,180"
}, {
name: "indianred",
hex: "#CD5C5C",
rgb: "205,92,92"
}, {
name: "indigo",
hex: "#4B0082",
rgb: "75,0,130"
}, {
name: "ivory",
hex: "#FFFFF0",
rgb: "255,255,240"
}, {
name: "khaki",
hex: "#F0E68C",
rgb: "240,230,140"
}, {
name: "lavender",
hex: "#E6E6FA",
rgb: "230,230,250"
}, {
name: "lavenderblush",
hex: "#FFF0F5",
rgb: "255,240,245"
}, {
name: "lawngreen",
hex: "#7CFC00",
rgb: "124,252,0"
}, {
name: "lemonchiffon",
hex: "#FFFACD",
rgb: "255,250,205"
}, {
name: "lightblue",
hex: "#ADD8E6",
rgb: "173,216,230"
}, {
name: "lightcoral",
hex: "#F08080",
rgb: "240,128,128"
}, {
name: "lightcyan",
hex: "#E0FFFF",
rgb: "224,255,255"
}, {
name: "lightgoldenrodyellow",
hex: "#FAFAD2",
rgb: "250,250,210"
}, {
name: "lightgray",
hex: "#D3D3D3",
rgb: "211,211,211"
}, {
name: "lightgreen",
hex: "#90EE90",
rgb: "144,238,144"
}, {
name: "lightgrey",
hex: "#D3D3D3",
rgb: "211,211,211"
}, {
name: "lightpink",
hex: "#FFB6C1",
rgb: "255,182,193"
}, {
name: "lightsalmon",
hex: "#FFA07A",
rgb: "255,160,122"
}, {
name: "lightseagreen",
hex: "#20B2AA",
rgb: "32,178,170"
}, {
name: "lightskyblue",
hex: "#87CEFA",
rgb: "135,206,250"
}, {
name: "lightslategray",
hex: "#778899",
rgb: "119,136,153"
}, {
name: "lightslategrey",
hex: "#778899",
rgb: "119,136,153"
}, {
name: "lightsteelblue",
hex: "#B0C4DE",
rgb: "176,196,222"
}, {
name: "lightyellow",
hex: "#FFFFE0",
rgb: "255,255,224"
}, {
name: "lime",
hex: "#00FF00",
rgb: "0,255,0"
}, {
name: "limegreen",
hex: "#32CD32",
rgb: "50,205,50"
}, {
name: "linen",
hex: "#FAF0E6",
rgb: "250,240,230"
}, {
name: "magenta",
hex: "#FF00FF",
rgb: "255,0,255"
}, {
name: "maroon",
hex: "#800000",
rgb: "128,0,0"
}, {
name: "mediumaquamarine",
hex: "#66CDAA",
rgb: "102,205,170"
}, {
name: "mediumblue",
hex: "#0000CD",
rgb: "0,0,205"
}, {
name: "mediumorchid",
hex: "#BA55D3",
rgb: "186,85,211"
}, {
name: "mediumpurple",
hex: "#9370DB",
rgb: "147,112,219"
}, {
name: "mediumseagreen",
hex: "#3CB371",
rgb: "60,179,113"
}, {
name: "mediumslateblue",
hex: "#7B68EE",
rgb: "123,104,238"
}, {
name: "mediumspringgreen",
hex: "#00FA9A",
rgb: "0,250,154"
}, {
name: "mediumturquoise",
hex: "#48D1CC",
rgb: "72,209,204"
}, {
name: "mediumvioletred",
hex: "#C71585",
rgb: "199,21,133"
}, {
name: "midnightblue",
hex: "#191970",
rgb: "25,25,112"
}, {
name: "mintcream",
hex: "#F5FFFA",
rgb: "245,255,250"
}, {
name: "mistyrose",
hex: "#FFE4E1",
rgb: "255,228,225"
}, {
name: "moccasin",
hex: "#FFE4B5",
rgb: "255,228,181"
}, {
name: "navajowhite",
hex: "#FFDEAD",
rgb: "255,222,173"
}, {
name: "navy",
hex: "#000080",
rgb: "0,0,128"
}, {
name: "oldlace",
hex: "#FDF5E6",
rgb: "253,245,230"
}, {
name: "olive",
hex: "#808000",
rgb: "128,128,0"
}, {
name: "olivedrab",
hex: "#6B8E23",
rgb: "107,142,35"
}, {
name: "orange",
hex: "#FFA500",
rgb: "255,165,0"
}, {
name: "orangered",
hex: "#FF4500",
rgb: "255,69,0"
}, {
name: "orchid",
hex: "#DA70D6",
rgb: "218,112,214"
}, {
name: "palegoldenrod",
hex: "#EEE8AA",
rgb: "238,232,170"
}, {
name: "palegreen",
hex: "#98FB98",
rgb: "152,251,152"
}, {
name: "paleturquoise",
hex: "#AFEEEE",
rgb: "175,238,238"
}, {
name: "palevioletred",
hex: "#DB7093",
rgb: "219,112,147"
}, {
name: "papayawhip",
hex: "#FFEFD5",
rgb: "255,239,213"
}, {
name: "peachpuff",
hex: "#FFDAB9",
rgb: "255,218,185"
}, {
name: "peru",
hex: "#CD853F",
rgb: "205,133,63"
}, {
name: "pink",
hex: "#FFC0CB",
rgb: "255,192,203"
}, {
name: "plum",
hex: "#DDA0DD",
rgb: "221,160,221"
}, {
name: "powderblue",
hex: "#B0E0E6",
rgb: "176,224,230"
}, {
name: "purple",
hex: "#800080",
rgb: "128,0,128"
}, {
name: "red",
hex: "#FF0000",
rgb: "255,0,0"
}, {
name: "rosybrown",
hex: "#BC8F8F",
rgb: "188,143,143"
}, {
name: "royalblue",
hex: "#4169E1",
rgb: "65,105,225"
}, {
name: "saddlebrown",
hex: "#8B4513",
rgb: "139,69,19"
}, {
name: "salmon",
hex: "#FA8072",
rgb: "250,128,114"
}, {
name: "sandybrown",
hex: "#F4A460",
rgb: "244,164,96"
}, {
name: "seagreen",
hex: "#2E8B57",
rgb: "46,139,87"
}, {
name: "seashell",
hex: "#FFF5EE",
rgb: "255,245,238"
}, {
name: "sienna",
hex: "#A0522D",
rgb: "160,82,45"
}, {
name: "silver",
hex: "#C0C0C0",
rgb: "192,192,192"
}, {
name: "skyblue",
hex: "#87CEEB",
rgb: "135,206,235"
}, {
name: "slateblue",
hex: "#6A5ACD",
rgb: "106,90,205"
}, {
name: "slategray",
hex: "#708090",
rgb: "112,128,144"
}, {
name: "slategrey",
hex: "#708090",
rgb: "112,128,144"
}, {
name: "snow",
hex: "#FFFAFA",
rgb: "255,250,250"
}, {
name: "springgreen",
hex: "#00FF7F",
rgb: "0,255,127"
}, {
name: "steelblue",
hex: "#4682B4",
rgb: "70,130,180"
}, {
name: "tan",
hex: "#D2B48C",
rgb: "210,180,140"
}, {
name: "teal",
hex: "#008080",
rgb: "0,128,128"
}, {
name: "thistle",
hex: "#D8BFD8",
rgb: "216,191,216"
}, {
name: "tomato",
hex: "#FF6347",
rgb: "255,99,71"
}, {
name: "turquoise",
hex: "#40E0D0",
rgb: "64,224,208"
}, {
name: "violet",
hex: "#EE82EE",
rgb: "238,130,238"
}, {
name: "wheat",
hex: "#F5DEB3",
rgb: "245,222,179"
}, {
name: "white",
hex: "#FFFFFF",
rgb: "255,255,255"
}, {
name: "whitesmoke",
hex: "#F5F5F5",
rgb: "245,245,245"
}, {
name: "yellow",
hex: "#FFFF00",
rgb: "255,255,0"
}, {
name: "yellowgreen",
hex: "#9ACD32",
rgb: "154,205,50"
}];
}
!
