我想展示一些像这个例子的图片
填充颜色由数据库中颜色为十六进制的字段决定(例如:ClassX -> color: #66FFFF)。 现在，我想显示上面的数据与所选的颜色填充(如上图)，但我需要知道如果颜色是暗或光，所以我知道如果文字应该在白色或黑色。 有办法吗?谢谢大家
当前回答
根据@MarkRansom的答案，我创建了一个PHP脚本，你可以在这里找到:
function calcC($c) {
if ($c <= 0.03928) {
return $c / 12.92;
}
else {
return pow(($c + 0.055) / 1.055, 2.4);
}
}
function cutHex($h) {
return ($h[0] == "#") ? substr($h, 1, 7) : $h;
}
function hexToR($h) {
return hexdec(substr(cutHex($h), 0, 2));
}
function hexToG($h) {
return hexdec(substr(cutHex($h), 2, 2)); // Edited
}
function hexToB($h) {
return hexdec(substr(cutHex($h), 4, 2)); // Edited
}
function computeTextColor($color) {
$r = hexToR($color);
$g = hexToG($color);
$b = hexToB($color);
$uicolors = [$r / 255, $g / 255, $b / 255];
$c = array_map("calcC", $uicolors);
$l = 0.2126 * $c[0] + 0.7152 * $c[1] + 0.0722 * $c[2];
return ($l > 0.179) ? '#000000' : '#ffffff';
}
其他回答
用所有24位的颜色测试怎么样?
请注意，YIQ方法将返回1.9:1的最小对比度，这不会通过AA和AAA WCAG2.0测试，假设阈值为128。
对于W3C方法，它将返回最小对比度4.58:1，通过AA和AAA测试的大文本，AA测试的小文本，它不会通过AAA测试的小文本的每一种颜色。
这个(JavaScript代码)怎么样?
/**
* Get color (black/white) depending on bgColor so it would be clearly seen.
* @param bgColor
* @returns {string}
*/
getColorByBgColor(bgColor) {
if (!bgColor) { return ''; }
return (parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff';
}
以防有人关心Mark Ransom回答的SCSS版本:
@use 'sass:color' as *;
@use 'sass:math' as *;
@function col_r($color) {
@if $color <= 0.03928 {
@return $color / 12.92;
} @else {
@return pow((($color + 0.055) / 1.055), (2.4));
}
}
@function pickTextColorBasedOnBgColorAdvanced(
$bgColor,
$lightColor,
$darkColor
) {
$r: red($bgColor);
$g: green($bgColor);
$b: blue($bgColor);
$ui_r: $r / 255;
$ui_g: $g / 255;
$ui_b: $b / 255;
$ui_r_c: col_r($ui_r);
$ui_g_c: col_r($ui_g);
$ui_b_c: col_r($ui_b);
$L: (0.2126 * $ui_r_c) + (0.7152 * $ui_g_c) + (0.0722 * $ui_b_c);
@if ($L > 0.179) {
@return $darkColor;
} @else {
@return $lightColor;
}
}
我从来没有做过这样的事情，但是写一个函数来检查每个颜色的值与十六进制7F (FF / 2)的中位数颜色。如果三种颜色中有两种大于7F，那么你正在使用较深的颜色。
马克的详细回答非常有用。下面是一个javascript实现:
function lum(rgb) {
var lrgb = [];
rgb.forEach(function(c) {
c = c / 255.0;
if (c <= 0.03928) {
c = c / 12.92;
} else {
c = Math.pow((c + 0.055) / 1.055, 2.4);
}
lrgb.push(c);
});
var lum = 0.2126 * lrgb[0] + 0.7152 * lrgb[1] + 0.0722 * lrgb[2];
return (lum > 0.179) ? '#000000' : '#ffffff';
}
然后可以调用这个函数lum([111, 22, 255])来获得白色或黑色。
