首页 > web前端 > js教程 > 如何在 JavaScript 中将 RGB 颜色代码转换为十六进制颜色代码?

如何在 JavaScript 中将 RGB 颜色代码转换为十六进制颜色代码?

Barbara Streisand
发布: 2024-12-10 14:21:11
原创
346 人浏览过

How to Convert RGB to Hex Color Codes in JavaScript?

从 RGB 值中提取十六进制颜色代码

使用 jQuery 获取元素背景的 RGB 值可能并不总是足够。您可能需要将这些值转换为其对应的十六进制值。此代码片段演示了如何提取 RGB 值:

$('#selector').css('backgroundColor');
登录后复制

我们的目标是获取 RGB 值对应的十六进制值。

解决方案

TL;DR 解决方案提供了一个简洁的单行函数,可以同时处理 RGB 和 RGBA格式:

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`
登录后复制

更新的解决方案(2021)

现代浏览器现在支持 ECMAScript 5 和 2015 功能,允许更优雅的解决方案:

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`
登录后复制

此更新的函数简化了从 RGB 到十六进制颜色的转换代码。

以上是如何在 JavaScript 中将 RGB 颜色代码转换为十六进制颜色代码?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板