如何从linear/radial-gradient渐变字符串中提取rgba、hex等格式颜色值

可以直接使用如下正则完成所有目标颜色值的匹配：
/(?:rgba?\([^)]+\)|#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8}))\b/g

该正则覆盖的匹配范围：

• 支持rgb()、rgba()格式的颜色值
• 支持3位/4位短hex、6位/8位长hex颜色（包含带透明度通道的格式）
• 自动过滤渐变类型声明（linear-gradient/radial-gradient）、角度/形状参数等无关内容

使用示例（JavaScript环境） #

const gradients = [
  'linear-gradient(90deg, rgba(196,97,97,1), #222222)',
  'linear-gradient(90deg, #222222, #222222)',
  'linear-gradient(90deg, #222, #22222280)',
  'linear-gradient(90deg, rgba(196,97,97,1), rgba(196,97,97,1))',
  'radial-gradient(circle, rgb(240,240,240), #f0f0f066)'
]

const colorRegex = /(?:rgba?\([^)]+\)|#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8}))\b/g

gradients.forEach(item => {
  const colorList = item.match(colorRegex)
  console.log(JSON.stringify(colorList))
})

输出结果 #

["rgba(196,97,97,1)","#222222"]
["#222222","#222222"]
["#222","#22222280"]
["rgba(196,97,97,1)","rgba(196,97,97,1)"]
["rgb(240,240,240)","#f0f0f066"]

内容的提问来源于stack exchange，提问作者Filippo854