內容營銷
如何根據背景以編程方式更改字體顏色? (亮/暗模式)
如果您去過 Martech Zone 最近,您可能已經註意到我們現在提供了以淺色或深色模式查看網站的功能。 只需搜索 月亮或太陽 網站左上角導航欄中日期旁邊的圖標。
這是一個非常酷的功能,而且效果非常好。 當我推出一個新的轉換工具時 將 HEX 更改為 RGB,我想實際顯示用戶試圖計算的顏色。 我不僅顯示顏色,而且還添加了一個很好的功能來顯示顏色的名稱。 但這引入了一個問題......
如果顯示顏色的樣本有淺色背景,您將無法閱讀我為樣本動態生成的文本。 所以……我必須創建一個函數,根據背景顏色以及是否有足夠的對比度來查看字體來設置字體顏色。
淺色或深色模式的 JavaScript 函數
我需要創建一個函數,在其中傳遞顏色的十六進位代碼,然後根據對比度返回字體應該是白色還是黑色。 這個 JavaScript 函數成功了…
function contrast(hex) {
var threshold = 149;
let r = 0, g = 0, b = 0;
// 3 digits
if (hex.length == 4) {
r = "0x" + hex[1] + hex[1];
g = "0x" + hex[2] + hex[2];
b = "0x" + hex[3] + hex[3];
// 6 digits
} else if (hex.length == 7) {
r = "0x" + hex[1] + hex[2];
g = "0x" + hex[3] + hex[4];
b = "0x" + hex[5] + hex[6];
}
return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}
此函數中的閾值用於確定特定顏色是淺色還是深色。 該函數將給定的十六進制顏色代碼轉換為其紅色、綠色和藍色 (RGB) 組件,然後使用公式計算顏色的感知亮度。 如果亮度高於閾值,函數返回 #000000
,這是黑色的十六進制代碼。 如果亮度低於閾值,函數返回 #ffffff
,這是白色的十六進制代碼。
此閾值的目的是確保為給定背景顏色選擇的文本顏色具有足夠的對比度以便於閱讀。 一個常見的經驗法則是深色背景上應使用淺色文本(例如白色或黃色),淺色背景上應使用深色文本(例如黑色或藍色)。 通過使用閾值來確定顏色是淺色還是深色,該函數可以自動為給定的背景顏色選擇合適的文本顏色。
使用上述功能,我可以根據背景顏色以編程方式應用 font-color CSS。 測試轉換器,您就會看到它的工作原理!