在我的@ vue / cli 4.1.1应用程序用户中输入颜色,我必须输出输入颜色的颜色值,我想知道如何计算和设置背景颜色确保输入的颜色值可见。我的意思是用户是否输入了白色(或接近白色)背景一定是黑暗的吗?
谢谢
您可以根据其亮度确定输入的颜色是浅色还是深色。这是a formula
因此,例如,您可以像这样定义函数isLight
function isLight(color) {
// Converting hex color to rgb
const [red, green, blue] = hexToRgb(color);
// Determine luminance
const luminance = (0.299 * red + 0.587 * green + 0.114 * blue)/255;
// Returning true if color is light
return luminance > 0.5;
}
// function for converting hex colors to rgb array format
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : null;
}
通过使用此功能,您可以确定用户的颜色是浅色还是深色,从而设置适当的背景
您可以给每一个255-color
赋予颜色-rgb
function bg(r, g, b) {return [255-r, 255-g, 255-b]}
如果以十六进制格式获取它,则可以将其转换为rgb
,然后取反。像这样:
function invert(hex){
hex = parseInt(hex.substring(1), 16);
var r = hex >> 16;
hex -= r << 16;
var g = hex >> 8;
hex -= g << 8;
var b = hex;
return `rgb(${255-r},${255-g},${255-b})`;
}
var color1 = "#eeff00";
var color2 = "#22faef";
var color3 = "#f1f1f1";
document.querySelector('#a').style = `color:${color1};background-color:${invert(color1)}`;
document.querySelector('#b').style = `color:${color2};background-color:${invert(color2)}`;
document.querySelector('#c').style = `color:${color3};background-color:${invert(color3)}`;
div {
padding: 10px;
}
<div id="a">Hello world!</div>
<div id="b">Hello world!</div>
<div id="c">Hello world!</div>
您可以给每一个255-color
赋予颜色-rgb
function bg(r, g, b) {return [255-r, 255-g, 255-b]}
如果以十六进制格式获取它,则可以将其转换为rgb
,然后取反。像这样:
function invert(hex){
hex = parseInt(hex.substring(1), 16);
var r = hex >> 16;
hex -= r << 16;
var g = hex >> 8;
hex -= g << 8;
var b = hex;
color = (255-r) << 16
color += (255-g) << 8
color += (255-b);
return '#' + color.toString(16);
}
color = "#ffaa00";
document.querySelector('div').style = `color:${color};background-color:${invert(color)}`;
div {
width: 200px;
height: 200px;
}
<div>Hello world!</div>