html 生成一对符合对比度需求的对比色 及对颜色间的对比度探究

1
//颜色生成
2
function Generate_contrast_color(strength, min_contrast, max_contrast) {
3
    // 随机一个16位颜色
4
    function getRandomColor() {
5
        let color = Math.floor((Math.random() * 256 * 256 * 256)).toString(16)
6
        while (color.length < 6) {//随机生成的可能只有3-6位字符串
7
            color += Math.floor((Math.random() * 16)).toString(16)
8
        }
9
        return '#' + color;
10
    }
11

12
    //16进制转RGB
13
    function colorToRGB(type, color) {
14
        let color1, color2, color3;
15
        color = '' + color;
16
        if (typeof color !== 'string') return;
17
        if (color.charAt(0) == '#') {
18
            color = color.substring(1);
19
        }
20
        if (color.length == 3) {
21
            color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
22
        }
23
        if (/^[0-9a-fA-F]{6}$/.test(color)) {
24
            color1 = parseInt(color.substr(0, 2), 16);
25
            color2 = parseInt(color.substr(2, 2), 16);
26
            color3 = parseInt(color.substr(4, 2), 16);
27
            if (type == 1) {
28
                return `rgb(${color1},${color2},${color3})`;
29
            } else {
30
                return [color1, color2, color3];
31
            }
32
        }
33
    };
34

35
    //判断颜色灰度 核心原理:颜色与白色进行对比
36
    //color 颜色 ,数据类型16位哈希颜色 或 rgb值的数组:[255,255,255]
37
    function islight(color) {
38
        function luminance(r, g, b) {
39
            var a = [r, g, b].map(function (v) {
40
                v /= 255;
41
                return v <= 0.03928
42
                    ? v / 12.92
43
                    : Math.pow((v + 0.055) / 1.055, 2.4);
44
            });
45
            return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
46
        }
47
        function contrast(color) {//返回值范围 1 ~ 21
48
            if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color)) {
49
                rgb = colorToRGB(2, color);
50
            } else {
51
                rgb = color;
52
            }
53
            var lum1 = luminance(255, 255, 255);
54
            var lum2 = luminance(rgb[0], rgb[1], rgb[2]);
55
            var brightest = Math.max(lum1, lum2);
56
            var darkest = Math.min(lum1, lum2);
57
            return (brightest + 0.05)
58
                / (darkest + 0.05);
59
        }
60
        if (contrast(color) < 11) {//值小于11表示鲜艳,大于11表示暗淡
61
            //颜色鲜艳
62
            return true
63
        } else {
64
            //颜色暗淡
65
            return false
66
        }
67
    };
68

69
    // 生成对比色
70
    function lightColor(sColor, iStep) {
71
        var asHex = new Array(16);
72
        var haxString = '0123456789abcdef';
73
        for (var i = 0; i < 16; i++) {
74
            asHex[i] = haxString.substr(i, 1);
75
        }
76

77
        var sRslt = "#";
78
        var iTemp;
79
        for (var i = 1; i < 7; i++) {
80
            iTemp = parseInt("0x" + sColor.substr(i, 1)) + iStep;
81
            if (iTemp > 15)
82
                iTemp = 15;
83
            if (iTemp < 0)
84
                iTemp = 0;
85
            sRslt += asHex[iTemp];
86
        }
87
        return sRslt;
88
    }
89

90
    //将颜色按照暗亮自动前往对比
91
    function autolightColor(color, istep) {
92
        if (!islight(color)) {
93
            //暗色
94
            return lightColor(color, istep);
95
        } else {
96
            //亮色
97
            return lightColor(color, -istep)
98
        }
99
    }
100

101
    //计算两色的对比度比例
102
    //colorA 颜色1 输入16位哈希 或 rgb值的数组:[255,255,255]
103
    //colorB 颜色1 输入16位哈希 或 rgb值的数组:[255,255,255]
104
    function getContrastRatio(colorA, colorB) {
105
        if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorA)) {
106
            colorA = colorToRGB(2, colorA);
107
        }
108
        if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorB)) {
109
            colorB = colorToRGB(2, colorB);
110
        }
111

112
        function getLuminanace(values) {
113
            var rgb = values.map((v) => {
114
                var val = v / 255;
115
                return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
116
            });
117
            return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
118
        };
119

120
        var lumA = getLuminanace(colorA);
121
        var lumB = getLuminanace(colorB);
122

123
        var calculation = (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
124

125
        return calculation.toFixed(2);
126
    };
127

128
    //随机一对
129
    let i = 0;
130
    do {//不是任意一对颜色都是有合适的对比率的,又时初始颜色偏激,但范围有限会导致对出来的颜色对比度不合格
131
        i++;
132
        var color = getRandomColor();
133
        var ContrastColor = autolightColor(color, strength);
134
        var ContrastRatio = getContrastRatio(color, ContrastColor);
135
        if (min_contrast < ContrastRatio && ContrastRatio < max_contrast) {
136
            return [color, ContrastColor, ContrastRatio]
137
        }
138
    } while (i < 10000)//阀门
139
    console.log('经循环10000次,没有合适的一对,返回白色和黑色');
140
    return ['#fff', '#000', 21]
141

142
}
143
//Generate_contrast_color(strength, min_contrast, max_contrast)
144
//strength = 两色偏移强度; 范围0 ~ 20 ;必须整数
145
//min_contrast = 最小对比度比例; 范围1 ~ 21
146
//max_contrast = 最大对比度比例; 范围1 ~ 21
147
/*--最后生成的颜色对比度比例在 最小对比度比例 和 最大对比度比例 之间。错误返回白色和黑色--*/
148

149
/*
150
返回值:
151
["#b0b6ce","#404057","5.01"]
152
[ 颜色1 , 颜色2 , 两色对比比例 ]
153
*/
154

155
var color = Generate_contrast_color(7, 4.5, 21);
156
var color1 = color[0];
157
var color2 = color[1];
158
var ContrastRatio = color[2];

1
//16进制转RGB
2
function colorToRGB(color) {
3
    let color1, color2, color3;
4
    color = '' + color;
5
    if (typeof color !== 'string') return;
6
    if (color.charAt(0) == '#') {
7
        color = color.substring(1);
8
    }
9
    if (color.length == 3) {
10
        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
11
    }
12
    if (/^[0-9a-fA-F]{6}$/.test(color)) {
13
        color1 = parseInt(color.substr(0, 2), 16);
14
        color2 = parseInt(color.substr(2, 2), 16);
15
        color3 = parseInt(color.substr(4, 2), 16);
16
        return `rgb(${color1},${color2},${color3})`;
17
    }
18
};

1
//颜色偏移
2
//sColor 16位哈希颜色 如:#99cf42
3
//iStep 偏移力度 0 ~ 20
4
function lightColor(sColor, iStep) {
5
    var asHex = new Array(16);
6
    var haxString = '0123456789abcdef';
7
    for (var i = 0; i < 16; i++) {
8
        asHex[i] = haxString.substr(i, 1);
9
    }
10

11
    var sRslt = "#";
12
    var iTemp;
13
    for (var i = 1; i < 7; i++) {
14
        iTemp = parseInt("0x" + sColor.substr(i, 1)) + iStep;
15
        if (iTemp > 15)
16
            iTemp = 15;
17
        if (iTemp < 0)
18
            iTemp = 0;
19
        sRslt += asHex[iTemp];
20
    }
21
    return sRslt;
22
}

1
//16进制转RGB
2
function colorToRGB(type, color) {
3
    let color1, color2, color3;
4
    color = '' + color;
5
    if (typeof color !== 'string') return;
6
    if (color.charAt(0) == '#') {
7
        color = color.substring(1);
8
    }
9
    if (color.length == 3) {
10
        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
11
    }
12
    if (/^[0-9a-fA-F]{6}$/.test(color)) {
13
        color1 = parseInt(color.substr(0, 2), 16);
14
        color2 = parseInt(color.substr(2, 2), 16);
15
        color3 = parseInt(color.substr(4, 2), 16);
16
        if (type == 1) {
17
            return `rgb(${color1},${color2},${color3})`;
18
        } else {
19
            return [color1, color2, color3];
20
        }
21
    }
22
};
23

24
//计算两色的对比度比例
25
//colorA 颜色1 输入16位哈希 或 rgb值的数组:[255,255,255]
26
//colorB 颜色1 输入16位哈希 或 rgb值的数组:[255,255,255]
27
function getContrastRatio(colorA, colorB) {
28
    if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorA)) {
29
        colorA = colorToRGB(2, colorA);
30
    }
31
    if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorB)) {
32
        colorB = colorToRGB(2, colorB);
33
    }
34

35
    function getLuminanace(values) {
36
        var rgb = values.map((v) => {
37
            var val = v / 255;
38
            return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
39
        });
40
        return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
41
    };
42

43
    var lumA = getLuminanace(colorA);
44
    var lumB = getLuminanace(colorB);
45

46
    var calculation = (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
47

48
    return calculation.toFixed(2);
49
};

1
//16进制转RGB
2
function colorToRGB(type, color) {
3
    let color1, color2, color3;
4
    color = '' + color;
5
    if (typeof color !== 'string') return;
6
    if (color.charAt(0) == '#') {
7
        color = color.substring(1);
8
    }
9
    if (color.length == 3) {
10
        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
11
    }
12
    if (/^[0-9a-fA-F]{6}$/.test(color)) {
13
        color1 = parseInt(color.substr(0, 2), 16);
14
        color2 = parseInt(color.substr(2, 2), 16);
15
        color3 = parseInt(color.substr(4, 2), 16);
16
        if (type == 1) {
17
            return `rgb(${color1},${color2},${color3})`;
18
        } else {
19
            return [color1, color2, color3];
20
        }
21
    }
22
};
23

24
//判断颜色灰度 核心原理:颜色于白色进行对比
25
//color 颜色 ,数据类型16位哈希颜色 或 rgb值的数组:[255,255,255]
26
function islight(color) {
27
    function luminance(r, g, b) {
28
        var a = [r, g, b].map(function (v) {
29
            v /= 255;
30
            return v <= 0.03928
31
                ? v / 12.92
32
                : Math.pow((v + 0.055) / 1.055, 2.4);
33
        });
34
        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
35
    }
36
    function contrast(color) {//返回值范围 1 ~ 21
37
        if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color)) {
38
            rgb = colorToRGB(2, color);
39
        } else {
40
            rgb = color;
41
        }
42
        var lum1 = luminance(255, 255, 255);
43
        var lum2 = luminance(rgb[0], rgb[1], rgb[2]);
44
        var brightest = Math.max(lum1, lum2);
45
        var darkest = Math.min(lum1, lum2);
46
        return (brightest + 0.05)
47
            / (darkest + 0.05);
48
    }
49
    if (contrast(color) < 11) {//值小于11表示鲜艳,大于11表示暗淡
50
        //颜色鲜艳
51
        return true
52
    } else {
53
        //颜色暗淡
54
        return false
55
    }
56
};

1
<!DOCTYPE html>
2
<html lang="zh_cn">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
    <title>随机一对合适的颜色,对比度比例可控,演示随机100个</title>
9
</head>
10

11
<body>
12
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
13
    <script>
14
        //颜色生成
15
        function Generate_contrast_color(strength, min_contrast, max_contrast) {
16
            // 随机一个16位颜色
17
            function getRandomColor() {
18
                let color = Math.floor((Math.random() * 256 * 256 * 256)).toString(16)
19
                while (color.length < 6) {//随机生成的可能只有3-6位字符串
20
                    color += Math.floor((Math.random() * 16)).toString(16)
21
                }
22
                return '#' + color;
23
            }
24

25
            //16进制转RGB
26
            function colorToRGB(type, color) {
27
                let color1, color2, color3;
28
                color = '' + color;
29
                if (typeof color !== 'string') return;
30
                if (color.charAt(0) == '#') {
31
                    color = color.substring(1);
32
                }
33
                if (color.length == 3) {
34
                    color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
35
                }
36
                if (/^[0-9a-fA-F]{6}$/.test(color)) {
37
                    color1 = parseInt(color.substr(0, 2), 16);
38
                    color2 = parseInt(color.substr(2, 2), 16);
39
                    color3 = parseInt(color.substr(4, 2), 16);
40
                    if (type == 1) {
41
                        return `rgb(${color1},${color2},${color3})`;
42
                    } else {
43
                        return [color1, color2, color3];
44
                    }
45
                }
46
            };
47

48
            //判断颜色灰度 核心原理:颜色与白色进行对比
49
            //color 颜色 ,数据类型16位哈希颜色 或 rgb值的数组:[255,255,255]
50
            function islight(color) {
51
                function luminance(r, g, b) {
52
                    var a = [r, g, b].map(function (v) {
53
                        v /= 255;
54
                        return v <= 0.03928
55
                            ? v / 12.92
56
                            : Math.pow((v + 0.055) / 1.055, 2.4);
57
                    });
58
                    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
59
                }
60
                function contrast(color) {//返回值范围 1 ~ 21
61
                    if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color)) {
62
                        rgb = colorToRGB(2, color);
63
                    } else {
64
                        rgb = color;
65
                    }
66
                    var lum1 = luminance(255, 255, 255);
67
                    var lum2 = luminance(rgb[0], rgb[1], rgb[2]);
68
                    var brightest = Math.max(lum1, lum2);
69
                    var darkest = Math.min(lum1, lum2);
70
                    return (brightest + 0.05)
71
                        / (darkest + 0.05);
72
                }
73
                if (contrast(color) < 11) {//值小于11表示鲜艳,大于11表示暗淡
74
                    //颜色鲜艳
75
                    return true
76
                } else {
77
                    //颜色暗淡
78
                    return false
79
                }
80
            };
81

82
            // 生成对比色
83
            function lightColor(sColor, iStep) {
84
                var asHex = new Array(16);
85
                var haxString = '0123456789abcdef';
86
                for (var i = 0; i < 16; i++) {
87
                    asHex[i] = haxString.substr(i, 1);
88
                }
89

90
                var sRslt = "#";
91
                var iTemp;
92
                for (var i = 1; i < 7; i++) {
93
                    iTemp = parseInt("0x" + sColor.substr(i, 1)) + iStep;
94
                    if (iTemp > 15)
95
                        iTemp = 15;
96
                    if (iTemp < 0)
97
                        iTemp = 0;
98
                    sRslt += asHex[iTemp];
99
                }
100
                return sRslt;
101
            }
102

103
            //将颜色按照暗亮自动前往对比
104
            function autolightColor(color, istep) {
105
                if (!islight(color)) {
106
                    //暗色
107
                    return lightColor(color, istep);
108
                } else {
109
                    //亮色
110
                    return lightColor(color, -istep)
111
                }
112
            }
113

114
            //计算两色的对比度比例
115
            //colorA 颜色1 输入16位哈希 或 rgb值的数组:[255,255,255]
116
            //colorB 颜色1 输入16位哈希 或 rgb值的数组:[255,255,255]
117
            function getContrastRatio(colorA, colorB) {
118
                if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorA)) {
119
                    colorA = colorToRGB(2, colorA);
120
                }
121
                if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorB)) {
122
                    colorB = colorToRGB(2, colorB);
123
                }
124

125
                function getLuminanace(values) {
126
                    var rgb = values.map((v) => {
127
                        var val = v / 255;
128
                        return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
129
                    });
130
                    return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
131
                };
132

133
                var lumA = getLuminanace(colorA);
134
                var lumB = getLuminanace(colorB);
135

136
                var calculation = (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
137

138
                return calculation.toFixed(2);
139
            };
140

141
            //随机一对
142
            let i = 0;
143
            do {//不是任意一对颜色都是有合适的对比率的,又时初始颜色偏激,但范围有限会导致对出来的颜色对比度不合格
144
                i++;
145
                var color = getRandomColor();
146
                var ContrastColor = autolightColor(color, strength);
147
                var ContrastRatio = getContrastRatio(color, ContrastColor);
148
                if (min_contrast < ContrastRatio && ContrastRatio < max_contrast) {
149
                    return [color, ContrastColor, ContrastRatio]
150
                }
151
            } while (i < 10000)//阀门
152
            console.log('经循环10000次,没有合适的一对,返回白色和黑色');
153
            return ['#fff', '#000', 21]
154

155
        }
156
        //Generate_contrast_color(strength, min_contrast, max_contrast)
157
        //strength = 两色偏移强度; 范围0 ~ 20 ;必须整数
158
        //min_contrast = 最小对比度比例; 范围1 ~ 21
159
        //max_contrast = 最大对比度比例; 范围1 ~ 21
160
        /*--最后生成的颜色对比度比例在 最小对比度比例 和 最大对比度比例 之间。错误返回白色和黑色--*/
161

162
        /*
163
        返回值:
164
        ["#b0b6ce","#404057","5.01"]
165
        [ 颜色1 , 颜色2 , 两色对比比例 ]
166
        */
167

168
        var color = Generate_contrast_color(7, 4.5, 21);
169
        var color1 = color[0];
170
        var color2 = color[1];
171
        var ContrastRatio = color[2];
172

173
        /*----------------------下面为演示代码---------------------*/
174

175
        function setStyle(el, styles) {
176
            for (var key in styles) {
177
                el.style[key] = styles[key];
178
            }
179
        }
180

181
        for (let index = 0; index < 100; index++) {
182
            div = document.createElement('div');
183
            div.id = index;
184
            document.body.appendChild(div);
185

186
            var color = Generate_contrast_color(7, 4.5, 21);
187
            var color1 = color[0];
188
            var color2 = color[1];
189
            var ContrastRatio = color[2];
190

191
            var span = document.createElement("span");
192
            span.innerText = "文本文字";
193
            setStyle(span, {
194
                display: 'inline-block',
195
                padding: '10px',
196
                margin: '30px',
197
                textAlign: 'center',
198
                color: color1,
199
                'background-color': color2
200
            });
201

202
            document.getElementById(index).appendChild(span);
203

204
            span = document.createElement("span");
205
            var text = "  文字颜色：" + color1 + ' 背景颜色：' + color2 + '; 对比率：' + ContrastRatio;
206
            span.innerText = text;
207

208
            document.getElementById(index).appendChild(span);
209
        }
210
    </script>
211
</body>
212

213
</html>