我想顯示一些像這個例子的圖像替代文字填充顏色由數據庫中的字段以十六進制顏色決定（例如：ClassX-> Color：＃66FFFF）。現在，我想在具有所選顏色的填充上方顯示數據（如上圖所示），但我需要知道顏色是深色還是淺色，因此我知道單詞應為白色還是黑色。有辦法嗎？ks
3 回答
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
以我對類似問題的回答為基礎。
您需要將十六進制代碼分成三部分，以獲得單獨的紅色，綠色和藍色強度。代碼的每2位數字以十六進制（基數16）表示。在這里，我將不介紹轉換的詳細信息，因為它們很容易查找。
一旦獲得了每種顏色的強度，就可以確定顏色的整體強度并選擇相應的文本。
if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff
閾值186是基于理論的，但可以根據口味進行調整。根據下面的評論，閾值150可能對您更好。
編輯：上面的操作很簡單，并且運行良好，并且似乎在StackOverflow上得到了很好的接受。但是，以下評論之一表明，在某些情況下，它可能導致不遵守W3C準則的情況。因此，我得出了一個修改后的表格，該表格始終根據準則選擇最高的對比度。如果你沒有需要遵循W3C規則，那么我會用上述簡單的公式堅持。
在W3C建議書中(L1 + 0.05) / (L2 + 0.05)，用于對比的公式為，其中L1是L2最亮顏色的亮度，是最暗顏色的亮度，范圍為0.0-1.0。黑色的亮度為0.0，白色的亮度為1.0，因此用這些值替換可以確定對比度最高的值。如果黑色的對比度大于白色的對比度，請使用黑色，否則請使用白色。給定您要測試的顏色的亮度，L測試將變為：
if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff
這將代數簡化為：
if L > sqrt(1.05 * 0.05) - 0.05
或大約：
if L > 0.179 use #000000 else use #ffffff
剩下的唯一事情就是計算L。準則中也給出了該公式，看起來從sRGB到線性RGB的轉換，隨后是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不應更改，因為它與W3C準則有關。如果發現結果不符合您的喜好，請嘗試上述更簡單的公式。
喵喔喔
TA貢獻1735條經驗 獲得超5個贊
我不相信此代碼，因為它不是我的，但我將其留在此處，以便其他人在將來快速找到：
根據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;
}
要使用它們，只需調用：
var color = '#EEACAE' // this can be any color
pickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');
另外，感謝Alx和chetstone。
- 3 回答
- 0 關注
- 848 瀏覽
添加回答
舉報
0/150
提交
取消