內容營銷

如何根據背景以編程方式更改字體顏色? (亮/暗模式)

如果您去過 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。 測試轉換器,您就會看到它的工作原理!

Douglas Karr

Douglas Karr 是 CMO 的 開放洞察 和創始人 Martech Zone。 道格拉斯幫助了數十家成功的 MarTech 新創公司,協助進行了超過 5 億美元的 MarTech 收購和投資盡職調查,並繼續協助公司實施和自動化其銷售和行銷策略。 道格拉斯是國際公認的數位轉型和 MarTech 專家和演講者。 道格拉斯也是一本傻瓜指南和一本商業領導書的出版作者。

相關文章

返回頂部按鈕
關閉

檢測到Adblock

Martech Zone 我們能夠免費為您提供這些內容,因為我們通過廣告收入、聯屬鏈接和讚助從我們的網站中獲利。 如果您在瀏覽我們的網站時刪除廣告攔截器,我們將不勝感激。