選択する色数を名前が割り当てられている色くらいに絞ると、色選択 UI を三軸の色空間ではなく平面で扱えそうです。
HSL を使って、横軸は色相(H)ですが左端はグレースケールで、縦軸(L')は輝度(L)をベースに彩度(S)で補正してます。360(H)x100(L')の行列から色相(H)や輝度(L')をテキトーな範囲で纏めて行列を圧縮しました。
色のあるセルをクリックすると、色名のクリップボードへコピーを試みます。
(CodePenの埋込みからは失敗します)
See the Pen Web色のHSL風分布 by Ikiuo (@ikiuo) on CodePen.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>名前色の HSL 風分布式選択</title>
<style>
:root {
--csp-size: 1.6em;
}
.zspace {
margin: 0px;
border-collapse: collapse;
border: none;
padding: 0px;
}
.cspace {
width: var(--csp-size);
min-width: var(--csp-size);
max-width: var(--csp-size);
height: var(--csp-size);
}
.ebox {
margin: 0px;
border: 0px;
padding: 0px;
background-color: black;
}
.cbox {
margin: 0px;
border: 1px solid gray;
padding: 0px;
}
.ibox {
padding: 2px 4px;
font-size: small;
cursor: pointer;
}
</style>
</head>
<body>
<table style="margin: auto;">
<tr><th style="text-align: center;"><h3>名前色の HSL 風分布式選択</h3></th></tr>
<tr><td style="text-align: left;">
<table>
<tr>
<td rowspan="2">選択色情報 :</td>
<td rowspan="2" id="tagHSLInfo"></td>
<td> </td>
</tr>
<tr><td> </td></tr>
</table>
</td></tr>
<tr><td style="text-align: left" id="tagHSLTable"></td></tr>
</table>
<script>
/*
*
*/
const NamedColorTable = [
{pos:{x:15, y:23}, rgb:'#f0f8ff', hsl:'hsl(208deg 100% 97%)', name:'aliceblue' },
{pos:{x: 4, y:21}, rgb:'#faebd7', hsl:'hsl(34deg 77% 91%)', name:'antiquewhite' },
{pos:{x:12, y: 8}, rgb:'#00ffff', hsl:'hsl(180deg 100% 50%)', name:'aqua' },
{pos:{x:10, y:14}, rgb:'#7fffd4', hsl:'hsl(159deg 100% 74%)', name:'aquamarine' },
{pos:{x:12, y:23}, rgb:'#f0ffff', hsl:'hsl(180deg 100% 97%)', name:'azure' },
{pos:{x: 7, y:22}, rgb:'#f5f5dc', hsl:'hsl(60deg 55% 91%)', name:'beige' },
{pos:{x: 4, y:18}, rgb:'#ffe4c4', hsl:'hsl(32deg 100% 88%)', name:'bisque' },
{pos:{x: 0, y: 0}, rgb:'#000000', hsl:'hsl(0deg 0% 0%)', name:'black' },
{pos:{x: 4, y:19}, rgb:'#ffebcd', hsl:'hsl(36deg 100% 90%)', name:'blanchedalmond' },
{pos:{x:16, y: 8}, rgb:'#0000ff', hsl:'hsl(240deg 100% 50%)', name:'blue' },
{pos:{x:17, y: 7}, rgb:'#8a2be2', hsl:'hsl(271deg 75% 52%)', name:'blueviolet' },
{pos:{x: 1, y: 3}, rgb:'#a52a2a', hsl:'hsl(0deg 59% 40%)', name:'brown' },
{pos:{x: 4, y:14}, rgb:'#deb887', hsl:'hsl(33deg 56% 70%)', name:'burlywood' },
{pos:{x:12, y: 5}, rgb:'#5f9ea0', hsl:'hsl(181deg 25% 50%)', name:'cadetblue' },
{pos:{x: 8, y: 8}, rgb:'#7fff00', hsl:'hsl(90deg 100% 50%)', name:'chartreuse' },
{pos:{x: 4, y: 6}, rgb:'#d2691e', hsl:'hsl(25deg 75% 47%)', name:'chocolate' },
{pos:{x: 3, y:10}, rgb:'#ff7f50', hsl:'hsl(16deg 100% 65%)', name:'coral' },
{pos:{x:15, y:11}, rgb:'#6495ed', hsl:'hsl(218deg 79% 66%)', name:'cornflowerblue' },
{pos:{x: 6, y:21}, rgb:'#fff8dc', hsl:'hsl(48deg 100% 93%)', name:'cornsilk' },
{pos:{x:19, y: 6}, rgb:'#dc143c', hsl:'hsl(348deg 83% 47%)', name:'crimson' },
{pos:{x:12, y: 8}, rgb:'#00ffff', hsl:'hsl(180deg 100% 50%)', name:'cyan' },
{pos:{x:16, y: 2}, rgb:'#00008b', hsl:'hsl(240deg 100% 27%)', name:'darkblue' },
{pos:{x:12, y: 2}, rgb:'#008b8b', hsl:'hsl(180deg 100% 27%)', name:'darkcyan' },
{pos:{x: 6, y: 3}, rgb:'#b8860b', hsl:'hsl(42deg 88% 38%)', name:'darkgoldenrod' },
{pos:{x: 0, y:10}, rgb:'#a9a9a9', hsl:'hsl(0deg 0% 66%)', name:'darkgray' },
{pos:{x: 9, y: 0}, rgb:'#006400', hsl:'hsl(120deg 100% 19%)', name:'darkgreen' },
{pos:{x: 0, y:10}, rgb:'#a9a9a9', hsl:'hsl(0deg 0% 66%)', name:'darkgrey' },
{pos:{x: 6, y: 9}, rgb:'#bdb76b', hsl:'hsl(55deg 38% 58%)', name:'darkkhaki' },
{pos:{x:18, y: 2}, rgb:'#8b008b', hsl:'hsl(300deg 100% 27%)', name:'darkmagenta' },
{pos:{x: 8, y: 0}, rgb:'#556b2f', hsl:'hsl(82deg 38% 30%)', name:'darkolivegreen' },
{pos:{x: 4, y: 8}, rgb:'#ff8c00', hsl:'hsl(32deg 100% 50%)', name:'darkorange' },
{pos:{x:17, y: 6}, rgb:'#9932cc', hsl:'hsl(280deg 60% 49%)', name:'darkorchid' },
{pos:{x: 1, y: 2}, rgb:'#8b0000', hsl:'hsl(0deg 100% 27%)', name:'darkred' },
{pos:{x: 3, y:12}, rgb:'#e9967a', hsl:'hsl(15deg 71% 69%)', name:'darksalmon' },
{pos:{x: 9, y:12}, rgb:'#8fbc8f', hsl:'hsl(120deg 25% 64%)', name:'darkseagreen' },
{pos:{x:16, y: 3}, rgb:'#483d8b', hsl:'hsl(248deg 39% 39%)', name:'darkslateblue' },
{pos:{x:12, y: 0}, rgb:'#2f4f4f', hsl:'hsl(180deg 25% 24%)', name:'darkslategray' },
{pos:{x:12, y: 0}, rgb:'#2f4f4f', hsl:'hsl(180deg 25% 24%)', name:'darkslategrey' },
{pos:{x:12, y: 4}, rgb:'#00ced1', hsl:'hsl(180deg 100% 40%)', name:'darkturquoise' },
{pos:{x:17, y: 4}, rgb:'#9400d3', hsl:'hsl(282deg 100% 41%)', name:'darkviolet' },
{pos:{x:19, y: 9}, rgb:'#ff1493', hsl:'hsl(327deg 100% 53%)', name:'deeppink' },
{pos:{x:14, y: 8}, rgb:'#00bfff', hsl:'hsl(195deg 100% 50%)', name:'deepskyblue' },
{pos:{x: 0, y: 4}, rgb:'#696969', hsl:'hsl(0deg 0% 41%)', name:'dimgray' },
{pos:{x: 0, y: 4}, rgb:'#696969', hsl:'hsl(0deg 0% 41%)', name:'dimgrey' },
{pos:{x:15, y:10}, rgb:'#1e90ff', hsl:'hsl(209deg 100% 55%)', name:'dodgerblue' },
{pos:{x: 1, y: 4}, rgb:'#b22222', hsl:'hsl(0deg 67% 41%)', name:'firebrick' },
{pos:{x: 6, y:23}, rgb:'#fffaf0', hsl:'hsl(40deg 100% 97%)', name:'floralwhite' },
{pos:{x: 9, y: 2}, rgb:'#228b22', hsl:'hsl(120deg 60% 33%)', name:'forestgreen' },
{pos:{x:18, y: 8}, rgb:'#ff00ff', hsl:'hsl(300deg 100% 50%)', name:'fuchsia' },
{pos:{x: 0, y:17}, rgb:'#dcdcdc', hsl:'hsl(0deg 0% 86%)', name:'gainsboro' },
{pos:{x:16, y:24}, rgb:'#f8f8ff', hsl:'hsl(240deg 100% 98%)', name:'ghostwhite' },
{pos:{x: 6, y: 8}, rgb:'#ffd700', hsl:'hsl(50deg 100% 50%)', name:'gold' },
{pos:{x: 6, y: 6}, rgb:'#daa520', hsl:'hsl(42deg 74% 49%)', name:'goldenrod' },
{pos:{x: 0, y: 8}, rgb:'#808080', hsl:'hsl(0deg 0% 50%)', name:'gray' },
{pos:{x: 9, y: 1}, rgb:'#008000', hsl:'hsl(120deg 100% 25%)', name:'green' },
{pos:{x: 8, y:10}, rgb:'#adff2f', hsl:'hsl(83deg 100% 59%)', name:'greenyellow' },
{pos:{x: 0, y: 8}, rgb:'#808080', hsl:'hsl(0deg 0% 50%)', name:'grey' },
{pos:{x: 9, y:23}, rgb:'#f0fff0', hsl:'hsl(120deg 100% 97%)', name:'honeydew' },
{pos:{x:19, y:12}, rgb:'#ff69b4', hsl:'hsl(330deg 100% 70%)', name:'hotpink' },
{pos:{x: 1, y: 9}, rgb:'#cd5c5c', hsl:'hsl(0deg 53% 58%)', name:'indianred' },
{pos:{x:17, y: 1}, rgb:'#4b0082', hsl:'hsl(274deg 100% 25%)', name:'indigo' },
{pos:{x: 7, y:23}, rgb:'#fffff0', hsl:'hsl(60deg 100% 97%)', name:'ivory' },
{pos:{x: 6, y:15}, rgb:'#f0e68c', hsl:'hsl(54deg 76% 74%)', name:'khaki' },
{pos:{x:16, y:23}, rgb:'#e6e6fa', hsl:'hsl(240deg 66% 94%)', name:'lavender' },
{pos:{x:19, y:23}, rgb:'#fff0f5', hsl:'hsl(340deg 100% 97%)', name:'lavenderblush' },
{pos:{x: 8, y: 7}, rgb:'#7cfc00', hsl:'hsl(90deg 100% 49%)', name:'lawngreen' },
{pos:{x: 6, y:19}, rgb:'#fffacd', hsl:'hsl(54deg 100% 90%)', name:'lemonchiffon' },
{pos:{x:14, y:16}, rgb:'#add8e6', hsl:'hsl(194deg 53% 79%)', name:'lightblue' },
{pos:{x: 1, y:14}, rgb:'#f08080', hsl:'hsl(0deg 78% 72%)', name:'lightcoral' },
{pos:{x:12, y:21}, rgb:'#e0ffff', hsl:'hsl(180deg 100% 93%)', name:'lightcyan' },
{pos:{x: 7, y:20}, rgb:'#fafad2', hsl:'hsl(60deg 80% 90%)', name:'lightgoldenrodyellow' },
{pos:{x: 0, y:16}, rgb:'#d3d3d3', hsl:'hsl(0deg 0% 82%)', name:'lightgray' },
{pos:{x: 9, y:15}, rgb:'#90ee90', hsl:'hsl(120deg 73% 74%)', name:'lightgreen' },
{pos:{x: 0, y:16}, rgb:'#d3d3d3', hsl:'hsl(0deg 0% 82%)', name:'lightgrey' },
{pos:{x:19, y:17}, rgb:'#ffb6c1', hsl:'hsl(350deg 100% 85%)', name:'lightpink' },
{pos:{x: 3, y:13}, rgb:'#ffa07a', hsl:'hsl(17deg 100% 73%)', name:'lightsalmon' },
{pos:{x:11, y: 4}, rgb:'#20b2aa', hsl:'hsl(176deg 69% 41%)', name:'lightseagreen' },
{pos:{x:14, y:15}, rgb:'#87cefa', hsl:'hsl(202deg 92% 75%)', name:'lightskyblue' },
{pos:{x:15, y: 6}, rgb:'#778899', hsl:'hsl(210deg 14% 53%)', name:'lightslategray' },
{pos:{x:15, y: 6}, rgb:'#778899', hsl:'hsl(210deg 14% 53%)', name:'lightslategrey' },
{pos:{x:15, y:16}, rgb:'#b0c4de', hsl:'hsl(213deg 41% 78%)', name:'lightsteelblue' },
{pos:{x: 7, y:21}, rgb:'#ffffe0', hsl:'hsl(60deg 100% 93%)', name:'lightyellow' },
{pos:{x: 9, y: 8}, rgb:'#00ff00', hsl:'hsl(120deg 100% 50%)', name:'lime' },
{pos:{x: 9, y: 6}, rgb:'#32cd32', hsl:'hsl(120deg 60% 50%)', name:'limegreen' },
{pos:{x: 4, y:23}, rgb:'#faf0e6', hsl:'hsl(30deg 66% 94%)', name:'linen' },
{pos:{x:18, y: 8}, rgb:'#ff00ff', hsl:'hsl(300deg 100% 50%)', name:'magenta' },
{pos:{x: 1, y: 1}, rgb:'#800000', hsl:'hsl(0deg 100% 25%)', name:'maroon' },
{pos:{x:10, y:10}, rgb:'#66cdaa', hsl:'hsl(159deg 50% 60%)', name:'mediumaquamarine' },
{pos:{x:16, y: 4}, rgb:'#0000cd', hsl:'hsl(240deg 100% 40%)', name:'mediumblue' },
{pos:{x:17, y: 9}, rgb:'#ba55d3', hsl:'hsl(288deg 58% 58%)', name:'mediumorchid' },
{pos:{x:16, y:11}, rgb:'#9370db', hsl:'hsl(259deg 59% 64%)', name:'mediumpurple' },
{pos:{x:10, y: 4}, rgb:'#3cb371', hsl:'hsl(146deg 49% 46%)', name:'mediumseagreen' },
{pos:{x:16, y:12}, rgb:'#7b68ee', hsl:'hsl(248deg 79% 67%)', name:'mediumslateblue' },
{pos:{x:10, y: 7}, rgb:'#00fa9a', hsl:'hsl(156deg 100% 49%)', name:'mediumspringgreen' },
{pos:{x:11, y: 8}, rgb:'#48d1cc', hsl:'hsl(177deg 59% 55%)', name:'mediumturquoise' },
{pos:{x:19, y: 4}, rgb:'#c71585', hsl:'hsl(322deg 80% 43%)', name:'mediumvioletred' },
{pos:{x:16, y: 0}, rgb:'#191970', hsl:'hsl(240deg 63% 26%)', name:'midnightblue' },
{pos:{x:10, y:24}, rgb:'#f5fffa', hsl:'hsl(150deg 100% 98%)', name:'mintcream' },
{pos:{x: 2, y:21}, rgb:'#ffe4e1', hsl:'hsl(6deg 100% 94%)', name:'mistyrose' },
{pos:{x: 5, y:17}, rgb:'#ffe4b5', hsl:'hsl(38deg 100% 85%)', name:'moccasin' },
{pos:{x: 4, y:16}, rgb:'#ffdead', hsl:'hsl(35deg 100% 83%)', name:'navajowhite' },
{pos:{x:16, y: 1}, rgb:'#000080', hsl:'hsl(240deg 100% 25%)', name:'navy' },
{pos:{x: 6, y:22}, rgb:'#fdf5e6', hsl:'hsl(39deg 85% 94%)', name:'oldlace' },
{pos:{x: 7, y: 1}, rgb:'#808000', hsl:'hsl(60deg 100% 25%)', name:'olive' },
{pos:{x: 8, y: 2}, rgb:'#6b8e23', hsl:'hsl(79deg 60% 34%)', name:'olivedrab' },
{pos:{x: 5, y: 8}, rgb:'#ffa500', hsl:'hsl(38deg 100% 50%)', name:'orange' },
{pos:{x: 3, y: 8}, rgb:'#ff4500', hsl:'hsl(16deg 100% 50%)', name:'orangered' },
{pos:{x:18, y:11}, rgb:'#da70d6', hsl:'hsl(302deg 58% 64%)', name:'orchid' },
{pos:{x: 6, y:16}, rgb:'#eee8aa', hsl:'hsl(54deg 66% 80%)', name:'palegoldenrod' },
{pos:{x: 9, y:16}, rgb:'#98fb98', hsl:'hsl(120deg 92% 79%)', name:'palegreen' },
{pos:{x:12, y:16}, rgb:'#afeeee', hsl:'hsl(180deg 64% 80%)', name:'paleturquoise' },
{pos:{x:19, y:11}, rgb:'#db7093', hsl:'hsl(340deg 59% 64%)', name:'palevioletred' },
{pos:{x: 4, y:20}, rgb:'#ffefd5', hsl:'hsl(37deg 100% 91%)', name:'papayawhip' },
{pos:{x: 4, y:17}, rgb:'#ffdab9', hsl:'hsl(28deg 100% 86%)', name:'peachpuff' },
{pos:{x: 4, y: 7}, rgb:'#cd853f', hsl:'hsl(29deg 58% 52%)', name:'peru' },
{pos:{x:19, y:18}, rgb:'#ffc0cb', hsl:'hsl(349deg 100% 87%)', name:'pink' },
{pos:{x:18, y:16}, rgb:'#dda0dd', hsl:'hsl(300deg 47% 74%)', name:'plum' },
{pos:{x:13, y:16}, rgb:'#b0e0e6', hsl:'hsl(186deg 51% 79%)', name:'powderblue' },
{pos:{x:18, y: 1}, rgb:'#800080', hsl:'hsl(300deg 100% 25%)', name:'purple' },
{pos:{x:17, y: 3}, rgb:'#663399', hsl:'hsl(270deg 50% 40%)', name:'rebeccapurple' },
{pos:{x: 1, y: 8}, rgb:'#ff0000', hsl:'hsl(0deg 100% 50%)', name:'red' },
{pos:{x: 1, y:12}, rgb:'#bc8f8f', hsl:'hsl(0deg 25% 64%)', name:'rosybrown' },
{pos:{x:15, y: 9}, rgb:'#4169e1', hsl:'hsl(225deg 72% 56%)', name:'royalblue' },
{pos:{x: 4, y: 2}, rgb:'#8b4513', hsl:'hsl(25deg 75% 30%)', name:'saddlebrown' },
{pos:{x: 2, y:12}, rgb:'#fa8072', hsl:'hsl(6deg 93% 71%)', name:'salmon' },
{pos:{x: 4, y:10}, rgb:'#f4a460', hsl:'hsl(27deg 87% 66%)', name:'sandybrown' },
{pos:{x:10, y: 2}, rgb:'#2e8b57', hsl:'hsl(146deg 50% 36%)', name:'seagreen' },
{pos:{x: 4, y:22}, rgb:'#fff5ee', hsl:'hsl(24deg 100% 96%)', name:'seashell' },
{pos:{x: 3, y: 3}, rgb:'#a0522d', hsl:'hsl(19deg 56% 40%)', name:'sienna' },
{pos:{x: 0, y:15}, rgb:'#c0c0c0', hsl:'hsl(0deg 0% 75%)', name:'silver' },
{pos:{x:14, y:14}, rgb:'#87ceeb', hsl:'hsl(197deg 71% 72%)', name:'skyblue' },
{pos:{x:16, y: 9}, rgb:'#6a5acd', hsl:'hsl(248deg 53% 57%)', name:'slateblue' },
{pos:{x:15, y: 4}, rgb:'#708090', hsl:'hsl(210deg 12% 50%)', name:'slategray' },
{pos:{x:15, y: 4}, rgb:'#708090', hsl:'hsl(210deg 12% 50%)', name:'slategrey' },
{pos:{x: 1, y:24}, rgb:'#fffafa', hsl:'hsl(0deg 100% 99%)', name:'snow' },
{pos:{x:10, y: 8}, rgb:'#00ff7f', hsl:'hsl(149deg 100% 50%)', name:'springgreen' },
{pos:{x:15, y: 5}, rgb:'#4682b4', hsl:'hsl(207deg 44% 49%)', name:'steelblue' },
{pos:{x: 4, y:13}, rgb:'#d2b48c', hsl:'hsl(34deg 43% 68%)', name:'tan' },
{pos:{x:12, y: 1}, rgb:'#008080', hsl:'hsl(180deg 100% 25%)', name:'teal' },
{pos:{x:18, y:17}, rgb:'#d8bfd8', hsl:'hsl(300deg 24% 79%)', name:'thistle' },
{pos:{x: 2, y:10}, rgb:'#ff6347', hsl:'hsl(9deg 100% 63%)', name:'tomato' },
{pos:{x:11, y: 9}, rgb:'#40e0d0', hsl:'hsl(174deg 72% 56%)', name:'turquoise' },
{pos:{x:18, y:14}, rgb:'#ee82ee', hsl:'hsl(300deg 76% 72%)', name:'violet' },
{pos:{x: 6, y:17}, rgb:'#f5deb3', hsl:'hsl(39deg 76% 83%)', name:'wheat' },
{pos:{x: 0, y:24}, rgb:'#ffffff', hsl:'hsl(0deg 0% 100%)', name:'white' },
{pos:{x: 0, y:22}, rgb:'#f5f5f5', hsl:'hsl(0deg 0% 96%)', name:'whitesmoke' },
{pos:{x: 7, y: 8}, rgb:'#ffff00', hsl:'hsl(60deg 100% 50%)', name:'yellow' },
{pos:{x: 8, y: 6}, rgb:'#9acd32', hsl:'hsl(79deg 60% 50%)', name:'yellowgreen' },
];
const NamedColorTableWidth = 20;
const NamedColorTableHeight = 25;
/*
*
*/
const HSLTree = [...Array(NamedColorTableHeight)].map(
() => [...Array(NamedColorTableWidth)].map(
() => Array()));
function hexRgb(code) {
const hex = (s) => Number(`0x${s}`);
return [
hex(code.slice(1, 3)),
hex(code.slice(3, 5)),
hex(code.slice(5, 7)),
];
}
function selectTextColor(r, g, b) {
const c = Math.max(r * 0.8, g);
return c > 170 ? 'black' : 'white';
}
function copyText(tag) {
navigator.clipboard.writeText(tag.innerText ?? tag);
}
function onClick(x, y) {
const tl = HSLTree[y] ?? {};
const th = tl[x] ?? [];
let name;
const html = th.map(d => {
if (!name)
name = d.name;
const tc = selectTextColor(...hexRgb(d.rgb));
return [
'<span class="ibox"',
` style="background-color: ${d.name}; color: ${tc};"`, '>',
`<span onclick="copyText(this)">`, d.name, '</span>',
'<span style="cursor: default;"> , </span>',
`<span onclick="copyText(this)">`, d.hsl, '</span>',
'<span style="cursor: default;"> , </span>',
`<code><span onclick="copyText(this)">`, d.rgb, '</span></code>',
'</span>',
].join('');
});
tagHSLInfo.innerHTML = html.join('<br/>');
copyText(name ?? '');
}
window.onload = function() {
NamedColorTable.forEach(d => HSLTree[d.pos.y][d.pos.x].push(d));
const html = [];
html.push('<table class="zspace" style="background-color: black; border: 1px solid gray;">');
HSLTree.forEach((row, y) => {
html.push('<tr class="zspace">');
row.forEach((col, x) => {
const attr = col.length ? [
'class="cspace cbox"',
`style="background-color: ${col[0].name};"`,
`onclick="onClick(${x}, ${y})"`,
] : [
'class="cspace ebox"',
`style="color: dimgray; text-align: center; cursor: default;"`,
];
html.push(`<td ${attr.join(' ')}>${col.length ? '' : '×'}</td>`);
});
html.push('</tr>');
});
html.push('</table>');
tagHSLTable.innerHTML = html.join('');
}
</script>
</body>
</html>