如何为具有背景色的独特彩色文本列表编写javascript

我需要生成一个彩色标签列表（尽可能多）。他们应该是不同的颜色结合自己的任何背景颜色，只要文字是清晰的。（没有背景是可以的，但文本应该在白色和灰色背景画布上清晰）

我一直在硬编码它们。但这不是一个好主意。有一些使用jQuery颜色插件生成随机颜色的解决方案。但我需要的东西不能是随机的，所以要避免任何可能的重复，甚至是接近

我目前的想法是硬编码“足够”，这样就不会超出“预算”。业务案例表示日历中不同类别的相似数据，颜色将表示不同类别

我希望有一个真正的解决办法来解决这个问题

我当前的硬编码函数

calendar.color = function (site) {
    switch(site) {

        case "abcae": return {color: 'yellow', textColor: 'black'};
        case "abcca": return {color: 'rosybrown', textColor: 'white'};
        case "abcbr": return {color: 'lightpink', textColor: 'black'};
        case 'abccn': return {color: 'crimson', textColor: 'yellow'};
        case "abccom": return {color: 'deeppink', textColor: 'yellow'};
        case "abcde": return {color: 'darkmagenta', textColor: 'yellow'};
        case "abceu": return {color: 'indigo', textColor: 'yellow'};
        case "abcfr": return {color: 'darkslateblue', textColor: 'white'};
        case "abchk": return {color: 'blue', textColor: 'white'};
        case "abchu": return {color: 'lightsteelblue', textColor: 'black'};
        case "abcin": return {color: 'skyblue', textColor: 'darkmagenta'};
        case "abcit": return {color: 'darkturquoise', textColor: 'black'};
        case "abcro": return {color: 'aqua', textColor: 'black'};
        case "abcru": return {color: 'darkcyan', textColor: 'white'};
        case "abcnl": return {color: 'seagreen', textColor: 'white'};
        case "abcmx": return {color: 'lightgreen', textColor: 'black'};
        case "abces": return {color: 'lime', textColor: 'black'};
        case "abcpl": return {color: 'gray', textColor: 'white'};
        case "abcuk": return {color: 'olive', textColor: 'white'};
        case "abcus": return {color: 'orange', textColor: 'darkblue'};

        default: return {color: 'cadetblue', textColor: 'white'};
    }
}; 

使用这个js插件（），您可以生成背景色，然后使用这个对比度插件从中选择合适的文本颜色

// https://24ways.org/2010/calculating-color-contrast/
function getContrast(hexcolor){
    hexcolor = hexcolor.replace('#', '');
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? '#000000' : '#ffffff';
}

function genColors(num) {
    var color, bg, text, colorset, colors = [];
    for (var i = 0; i <= num; i++) {
        color = randomColor();
        text = getContrast(color);
        bg = color;
        colorset = text+','+bg;
        colors.push(colorset);
    }
    return colors;
}

//https://24ways.org/2010/calculating-color-contrast/
函数getContrast（hexcolor）{
hexcolor=hexcolor.replace（'#'，''）；
var r=parseInt（hexcolor.substr（0,2），16）；
var g=parseInt（hexcolor.substr（2,2），16）；
var b=parseInt（hexcolor.substr（4,2），16）；
var yiq=（（r*299）+（g*587）+（b*114））/1000；
返回（yiq>=128）？“#000000”：“#ffffff”；
}
函数genColors（num）{
var color，bg，text，colorset，colors=[]；
对于（变量i=0；i colors.length）{
//因为我们正在生成多种颜色，
//增加种子，否则我们就
//每次生成相同的颜色。。。
如果（seed&&options.seed）options.seed+=1；
颜色。推送（随机颜色（选项））；
}
options.count=totalColors；
返回颜色；
}
//首先我们选择一个色调（H）
H=pickHue（选项）；
//然后使用H确定饱和度
S=饱和（H，选项）；
//然后使用S和H确定亮度（B）。
B=选择亮度（H、S、选项）；
//然后返回所需格式的HSB颜色
返回setFormat（[H，S，B]，选项）；
};
功能选项（选项）{
var hueRange=getHueRange（options.hue），
色调=随机范围内（休兰格）；
//而不是将红色存储为两个独立的范围，
//我们用负数将它们分组
如果（色调<0）{
色调=360+色调；
}
返回色调；
}
功能选择饱和度（色调、选项）{
如果（options.luminity==='random'）{
返回值在（[01000]）以内；
}
如果（options.hue===‘单色’）{
返回0；
}
var saturationRange=getSaturationRange（色调）；
var sMin=饱和范围[0]，
sMax=饱和范围[1]；
开关（选项。亮度）{
“光明”一案：
sMin=55；
打破
“黑暗”一案：
sMin=sMax-10；
打破
案件“轻”：
sMax=55；
打破
}
返回随机数（[sMin，sMax]）；
}
功能选择亮度（H、S、选项）{
var bMin=获得最小亮度（H，S），
bMax=100；
开关（选项。亮度）{
“黑暗”一案：
bMax=bMin+20；
打破
案件“轻”：
bMin=（bMax+bMin）/2；
打破
“随机”案例：
体重指数=0；
bMax=100；
打破
}
返回随机数（[bMin，bMax]）；
}
函数设置格式（hsv，选项）{
开关（options.format）{
案例“hsvArray”：
返回hsv；
案例“Hslaray”：
返回HSVtoHSL（hsv）；
案例“hsl”：
var hsl=HSVtoHSL（hsv）；
返回'hsl（'+hsl[0]+'、'+hsl[1]+'、'+hsl[2]+'）'；
“hsla”案例：
var hslColor=HSVtoHSL（hsv）；
var alpha=options.alpha | | Math.random（）；
返回'hsla（'+hslColor[0]+'、'+hslColor[1]+'%、'+hslColor[2]+'%、'+alpha+'）；
案例“rgbArray”：
返回HSVtoRGB（hsv）；
案例“rgb”：
var rgb=HSVtoRGB（hsv）；
返回'rgb（'+rgb.join（'，'）+'）；
案例“rgba”：
var rgbColor=HSVtoRGB（hsv）；
var alpha=options.alpha | | Math.random（）；
返回'rgba（'+rgbColor.join（'，'）+'，'+alpha+'）；
违约：
返回HSVtoHex（hsv）；
}
}
函数getMinimumBrightness（H，S）{
var lowerBounds=getColorInfo（H）.lowerBounds；
对于（变量i=0；i=s1&&S 0）{
返回[数字，数字]；
}
}
if（typeof colorInput=='string'）{
if（颜色字典[colorInput]）{
var color=colordiodictionary[colorInput]；
if（颜色、颜色）{
返回color.hueRange；
}
}
}
返回[0360]；
}
函数getSaturationRange（色调）{
返回getColorInfo（色调）.saturationRange；
}
函数getColorInfo（色调）{
//将红色映射为更容易拾取色调
如果（色调>=334&&hue=color.hueRange[0]&&
色调=数字。最大值（安全整数）中断；
总计+=字符串.charCodeAt（i）
}
返回总数
}
返回随机颜色；
}));
// https://24ways.org/2010/calculating-color-contrast/
函数getContrast（hexcolor）{
hexcolor=hexcolor.replace（'#'，''）；
var r=parseInt（hexcolor.substr（0,2,16）；
var g=parseInt（hexcolor.substr（2,2,16））；
var b=parseInt（hexcolor.substr（4,2,16））；
var yiq=（（r*299）+（g*587）+（b*114））/1000；
返回（yiq>=128）？“#000000”：“#ffffff”；
}
函数genColors（num）{
var color，bg，text，colorset，colors=[]；
对于（var i=0；我发布了代码，您必须提供一个起点。是的，刚刚发布了。这是硬代码。根本不可伸缩。只适用于现在。您需要多少标签？我想不到200个。
var colors = genColors(256);

for (var i = 0; i < colors.length; i++) {
    var set = colors[i].split(',');
    var text = set[0];
    var bg = set[1];
    console.log(set);
}