我想顯示一些像這個例子的圖像替代文字填充顏色由數(shù)據(jù)庫中的字段以十六進(jìn)制顏色決定（例如：ClassX-> Color：＃66FFFF）?，F(xiàn)在，我想在具有所選顏色的填充上方顯示數(shù)據(jù)（如上圖所示），但我需要知道顏色是深色還是淺色，因此我知道單詞應(yīng)為白色還是黑色。有辦法嗎？ks
3 回答
搖曳的薔薇
TA貢獻(xiàn)1793條經(jīng)驗 獲得超6個贊
以我對類似問題的回答為基礎(chǔ)。
您需要將十六進(jìn)制代碼分成三部分，以獲得單獨的紅色，綠色和藍(lán)色強(qiáng)度。代碼的每2位數(shù)字以十六進(jìn)制（基數(shù)16）表示。在這里，我將不介紹轉(zhuǎn)換的詳細(xì)信息，因為它們很容易查找。
一旦獲得了每種顏色的強(qiáng)度，就可以確定顏色的整體強(qiáng)度并選擇相應(yīng)的文本。
if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff
閾值186是基于理論的，但可以根據(jù)口味進(jìn)行調(diào)整。根據(jù)下面的評論，閾值150可能對您更好。
編輯：上面的操作很簡單，并且運行良好，并且似乎在StackOverflow上得到了很好的接受。但是，以下評論之一表明，在某些情況下，它可能導(dǎo)致不遵守W3C準(zhǔn)則的情況。因此，我得出了一個修改后的表格，該表格始終根據(jù)準(zhǔn)則選擇最高的對比度。如果你沒有需要遵循W3C規(guī)則，那么我會用上述簡單的公式堅持。
在W3C建議書中(L1 + 0.05) / (L2 + 0.05)，用于對比的公式為，其中L1是L2最亮顏色的亮度，是最暗顏色的亮度，范圍為0.0-1.0。黑色的亮度為0.0，白色的亮度為1.0，因此用這些值替換可以確定對比度最高的值。如果黑色的對比度大于白色的對比度，請使用黑色，否則請使用白色。給定您要測試的顏色的亮度，L測試將變?yōu)椋?/p>
if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff
這將代數(shù)簡化為：
if L > sqrt(1.05 * 0.05) - 0.05
或大約：
if L > 0.179 use #000000 else use #ffffff
剩下的唯一事情就是計算L。準(zhǔn)則中也給出了該公式，看起來從sRGB到線性RGB的轉(zhuǎn)換，隨后是ITU-R建議BT.709的亮度。
for each c in r,g,b:
c = c / 255.0
if c <= 0.03928 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b
閾值0.179不應(yīng)更改，因為它與W3C準(zhǔn)則有關(guān)。如果發(fā)現(xiàn)結(jié)果不符合您的喜好，請嘗試上述更簡單的公式。
喵喔喔
TA貢獻(xiàn)1735條經(jīng)驗 獲得超5個贊
我不相信此代碼，因為它不是我的，但我將其留在此處，以便其他人在將來快速找到：
根據(jù)Mark Ransoms的答案，這是簡單版本的代碼段：
function pickTextColorBasedOnBgColorSimple(bgColor, lightColor, darkColor) {
var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
var r = parseInt(color.substring(0, 2), 16); // hexToR
var g = parseInt(color.substring(2, 4), 16); // hexToG
var b = parseInt(color.substring(4, 6), 16); // hexToB
return (((r * 0.299) + (g * 0.587) + (b * 0.114)) > 186) ?
darkColor : lightColor;
}
這是高級版本的代碼片段：
function pickTextColorBasedOnBgColorAdvanced(bgColor, lightColor, darkColor) {
var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
var r = parseInt(color.substring(0, 2), 16); // hexToR
var g = parseInt(color.substring(2, 4), 16); // hexToG
var b = parseInt(color.substring(4, 6), 16); // hexToB
var uicolors = [r / 255, g / 255, b / 255];
var c = uicolors.map((col) => {
if (col <= 0.03928) {
return col / 12.92;
}
return Math.pow((col + 0.055) / 1.055, 2.4);
});
var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
return (L > 0.179) ? darkColor : lightColor;
}
要使用它們，只需調(diào)用：
var color = '#EEACAE' // this can be any color
pickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');
另外，感謝Alx和chetstone。
- 3 回答
- 0 關(guān)注
- 842 瀏覽
添加回答
舉報
0/150
提交
取消