使用JavaScript實現計算顏色的相對亮度并確定相應的文本顏色

更新時間：2024年04月24日 10:31:42 作者：日升

這篇文章主要為大家詳細介紹了如何使用JavaScript實現計算顏色的相對亮度并確定相應的文本顏色,感興趣的小伙伴可以跟隨小編一起學習一下

一、需求內容

需求點：給出一組顏色列表，渲染對應的顏色以及顏色值，但是要保證文本顏色和背景色不沖突，文本顏色保持 black 和 white 兩種即可

示例如下：每個模塊背景色為當前顏色，文案內容為當前顏色值，文案顏色為當前顏色通過計算后的 'black' 或 'white'

二、實現方案

思路

背景顏色與文本顏色不能沖突，亮的背景色展示黑色文案，深的背景色展示白色文案

使用 YUV 與 RGB 顏色轉化公式

判斷 a 的值，也就是透明度，透明度越小顏色越淺

實現流程

先把顏色轉化成 rgba

根據計算公式 (r * 299 + g * 587 + b * 114) / 1000 將RGB顏色轉換為YUV顏色

判斷計算出來的值在判斷 a 的值來確定文本顏色的值

三、代碼實現

/**
 * 把十六進制顏色值轉成 rgba 顏色值
 * @param {string} hex 
 * @returns {string} rgba 顏色值
 */
const hexToRgba = (hex: string): string => {
  const rgba = []
  hex = hex.replace('#', '').padEnd(8, 'F')
  for (let i = 0; i < hex.length; i+=2) {
    rgba.push(parseInt(hex.slice(i, i+2), 16))
  }
  return rgba.reduce((prev, item, index) => {
    return prev += index >= rgba.length - 1 ? Number((item / 255).toFixed(2)) : `${item}, `
  }, 'rgba(') + ')'
}
/**
 * 計算文本顏色值
 * @param {string} hexColor 
 * @returns {'black' | 'white'} 文本顏色值
 */
const determineTextColor = (hexColor: string): 'black' | 'white' => {
  // 將十六進制顏色值轉換為 RGB 格式
  const rgbColor = hexToRgba(hexColor);
  // 獲取顏色的 RGB 分量
  const [r, g, b, a] = (rgbColor.match(/\d+(\.\d+)?/g) || []).map(Number);
  // 計算顏色的相對亮度
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
  // 根據相對亮度確定文本顏色
  return brightness > 125 ? 'black' : (a < 0.4 ? 'black' : 'white') 
}

四、案例效果展示

案例

const colorList = [
  "#FAFAFAA6",
  "#000000FF",
  "#000000EE",
  "#000000AA",
  "#00000088",
  "#00000066",
  "#00000033",
  "#00000022",
  "#00000011",
  "#00000000",
  "#333333FF",
  "#FFFFFFFF",
  "#FFFFFFEE",
  "#FFFFFFBB",
  "#FFFFFFAA",
  "#FFFFFF99",
  "#FFFFFF88",
  "#FFFFFF66",
  "#FFFFFF33",
  "#FFFFFF22",
  "#FFFFFF11",
  "#344258FF",
  "#4CAF50DE",
  "#364FBBFF",
  "#00000040",
  "#FF4D4FFF",
  "#233494FF",
  "#0505050F",
  "#00000005",
  "#E7E8EAFF",
  "#F5F7FAFF",
  "#7A7A7AFF",
  "#1677FFFF",
  "#69B1FFFF",
  "#0958D9FF",
  "#00000014",
  "#0000001E",
  "#0000000C",
  "#52C41AFF",
  "#FAAD14FF",
  "#00000073",
  "#0000000F",
  "#001529FF",
  "#002140FF",
  "#FFFFFF33",
  "#722ED1FF",
  "#13C2C2FF",
  "#EB2F96FF",
  "#F5222DFF",
  "#FA8C16FF",
  "#FADB14FF",
  "#FA541CFF",
  "#2F54EBFF",
  "#A0D911FF",
  "#000000D9",
  "#ADBBE0FF",
  "#5A71C7FF",
  "#FFF2F0FF",
  "#FFFFFFA6",
  "#FFFFFF00",
  "#FFFFFF40",
  "#FF7875FF",
  "#000C17FF",
  "#0543C014",
  "#0000000A",
  "#FFA39EFF",
  "#FF26050F",
  "#FFD666FF",
  "#FFD70519",
  "#D9363EFF",
  "#00000026",
  "#DDE2EDFF",
  "#F5F5F5FF",
  "#F0F0F0FF",
  "#D9D9D9FF",
  "#000FFFFF",
  "#000000A6",
  "#EBF0FAFF",
  "#8196D4FF",
  "#F6FFEDFF",
  "#D9F7BEFF",
  "#B7EB8FFF",
  "#95DE64FF",
  "#389E0DFF",
  "#73D13DFF",
  "#FFF1F0FF",
  "#FFCCC7FF",
  "#FFFBE6FF",
  "#FFF1B8FF",
  "#FFE58FFF",
  "#D48806FF",
  "#FFC53DFF",
  "#E6F4FFFF",
  "#BAE0FFFF",
  "#91CAFFFF",
  "#4096FFFF",
  "#FAFAFAFF",
  "#EDEDEDFF",
  "#E0E0E0FF",
  "#D4D4D4FF",
  "#C7C7C7FF",
  "#A1A1A1FF",
  "#545454FF",
  "#2E2E2EFF"
]
let html = '<ul>'
colorList.forEach((item) => {
  const data = determineTextColor(item)
  html += `<li style="background: ${item}; color: ${data}; border: 1px solid ${data};">${item}</li>`
})
html += '</ul>'
document.body.innerHTML = html