挑選顏色更是從白色

我得到的body的顏色和背景顏色的計算HEX像這樣走：挑選顏色更是從白色

function rgb2hex(rgb){ 
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); 
    return (rgb && rgb.length === 4) ? "#" + 
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + 
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + 
    ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; 
} 


var color = rgb2hex(window.getComputedStyle(document.getElementsByTagName("body")[0]).color); 
var bg = rgb2hex(window.getComputedStyle(document.getElementsByTagName("body")[0]).backgroundColor);

我需要選擇其中一種顏色用作文本顏色在白色背景上。但是，頁面背景較暗並且顏色較淺/白色時會出現問題。因此，我需要智能地選擇其中的一個用作文本顏色。

我如何知道color和bg中的哪一個離#fff最遠？

來源

2017-04-04 Emphram Stavanger

最遠在什麼意義？你想選擇最對比的顏色？ – byxor

這完全正確。這兩種顏色中的哪一種在視覺上最適合作爲文本'color'使用，當'background：#fff;' –

將使用CSS顛倒屬性（https://davidwalsh.name/invert-colors-css）做什麼你要？它你想要一個JavaScript函數，這是一個搞清楚如何在JavaScript中進行反轉的問題。像這樣：http://stackoverflow.com/questions/6961725/algorithm-for-calculating-inverse-color – zelite

您需要計算兩種顏色的relative luminance。較低亮度的顏色將是離白色更遠的顏色。公式爲這種計算在鏈接的文章，並在下面我的代碼提供：

{ 
 
    const getRGBLuminance = (string) => { 
 
     const rgb = string.replace(/[^\d ]/g, '').split(' '); 
 
     return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]; 
 
    } 
 

 
    const bodyStyle  = window.getComputedStyle(document.body), 
 
      colorLuminance = getRGBLuminance(bodyStyle.color), 
 
      bgColorLuminance = getRGBLuminance(bodyStyle.backgroundColor); 
 

 
    if (colorLuminance < bgColorLuminance) { 
 
     console.log('Text color is further from #FFF.'); 
 
    } 
 
    else if (colorLuminance > bgColorLuminance) { 
 
     console.log('Background color is further from #FFF.'); 
 
    } 
 
    else { 
 
     console.log('Both color and background color are equally far from #FFF.'); 
 
    } 
 
}

/* Only for demonstration */ 
 
body { 
 
    background-color: #ACE; 
 
    color: #000; 
 
}

來源

2017-04-04 17:45:06 Przemek

挑選顏色更是從白色

回答

相關問題