将 RGB 转换为 RGBA 白色

2023-11-24

我有一个十六进制颜色,例如#F4F8FB (or rgb(244, 248, 251))我想转换成尽可能透明rgba 颜色(显示在白色上时)。合理?我正在寻找一种算法,或者至少是一种如何做到这一点的算法的想法。

例如:

rgb( 128, 128, 255 ) --> rgba(   0,   0, 255,  .5 )
rgb( 152, 177, 202 ) --> rgba(  50, 100, 150,  .5 ) // can be better(lower alpha)

Ideas?


基于 Guffa 答案的仅供参考的解决方案:

function RGBtoRGBA(r, g, b){
    if((g == null) && (typeof r === 'string')){
        var hex = r.replace(/^\s*#|\s*$/g, '');
        if(hex.length === 3){
            hex = hex.replace(/(.)/g, '$1$1');
        }
        r = parseInt(hex.substr(0, 2), 16);
        g = parseInt(hex.substr(2, 2), 16);
        b = parseInt(hex.substr(4, 2), 16);
    }

    var min, a = (255 - (min = Math.min(r, g, b))) / 255;

    return {
        r    : r = 0|(r - min) / a,
        g    : g = 0|(g - min) / a,
        b    : b = 0|(b - min) / a,
        a    : a = (0|1000*a)/1000,
        rgba : 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'
    };
}

RGBtoRGBA(204, 153, 102) == RGBtoRGBA('#CC9966') == RGBtoRGBA('C96') == 
    {
       r    : 170,
       g    : 85 ,
       b    : 0  ,
       a    : 0.6,
       rgba : 'rgba(170, 85, 0, 0.6)' 
    }

取最低的颜色分量,并将其转换为 Alpha 值。然后通过减去最低值并除以 Alpha 值来缩放颜色分量。

Example:

152 converts to an alpha value of (255 - 152) / 255 ~ 0.404

152 scales using (152 - 152) / 0.404 = 0
177 scales using (177 - 152) / 0.404 ~ 62
202 scales using (202 - 152) / 0.404 ~ 123

So, rgb(152, 177, 202)显示为rgba(0, 62, 123, .404).

我已经在 Photoshop 中验证了颜色确实完美匹配。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 RGB 转换为 RGBA 白色 的相关文章

  • 一个 Next.js 路由中的两个不同子域

    我想使用构建一个新平台Next js https nextjs org React js https reactjs org and 反应路由器 https reacttraining com react router web guides
  • 检测 iframe 内容加载失败

    我可以使用以下命令检测 iframe 的内容何时加载load事件 不幸的是 就我的目的而言 这有两个问题 如果加载页面时出现错误 404 500 等 则永远不会触发加载事件 如果某些图像或其他依赖项加载失败 则会照常触发加载事件 有什么方法
  • 使用 easyXDM 调整 IFrame 大小

    我将 iFrame 代码提供给客户 以便他们可以显示我网站上的动态内容 我希望其页面上的 iFrame 能够调整大小以适合我的内容 我按照 easyXDM 网站的说明进行操作 但也许我遗漏了一些东西 我没有收到任何错误 但 iFrame 保
  • 滚动时静态标题

    我编写了一个主页 现在我正在尝试构建一个标题 该标题是静态的 就像在滚动内容时不滚动一样 当内容位于其下方时 它应该保持在顶部 我找到了这个解决方案here https stackoverflow com questions 9677894
  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗
  • 如何获取数组中最后 5 个元素(不包括第一个元素)?

    在 JavaScript 数组中 如何获取最后 5 个元素 排除第一个元素 1 55 77 88 would return 55 77 88 添加其他示例 1 55 77 88 99 22 33 44 would return 88 99
  • 当我“显示:无”一个 SVG 时,另一个(独立的)SVG 会以不同的方式呈现

    我已经伤透了几个小时了 这没有任何意义 我将遇到的问题减少到这个codepen https codepen io Octopous pen OJORpJQ https codepen io Octopous pen OJORpJQ HTML
  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • 如何在参数上使用 .reduce() 而不是特定的数组或对象?

    我想定义一个函数 flatten 将多个元素展平为一个数组 我知道以下是不可能的 但本质上我想这样做 var flatten function var flattened arguments reduce function acc elem
  • 有没有办法在 TypeScript 2+ 中全局添加类型定义?

    我有一堆简单的 ts files 不是项目 即独立的 ts 脚本 他们使用一些 Node js 功能 TypeScript 和节点类型定义通过安装 npm install g typescript npm install g types n
  • Relay 中的嵌套片段数据始终相同

    我是 Relay 新手 并且遇到了片段上嵌套数据的问题 当我在 graphiql 中进行测试时 以下查询返回正确的数据 因此我确信我的架构是正确的 viewer customers name billing address city 但是
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • CryptoJS 和 Pycrypto 一起工作

    我正在使用 CryptoJS v 2 3 加密 Web 应用程序中的字符串 并且需要在服务器上使用 Python 对其进行解密 因此我使用 PyCrypto 我觉得我错过了一些东西 因为我无法让它工作 这是JS Crypto AES enc
  • IE6 丢失查询字符串

    我有一个使用 javascript 从查询字符串中获取值的页面window location 从网络服务器运行时效果很好 但如果我通过将其放在地址栏中使用 IE6 在本地运行它 c mysite index htm 网站创建的任何查询字符串
  • Javascript - 如何计算数字的平方?

    使用 JavaScript 函数 function squareIt number return number number 当给定数字 4294967296 时 函数返回 18446744073709552000 每个人都知道真正的答案是
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • 使用 dnode 从服务器向客户端发送消息

    几个月前 我发现了 nowjs 和 dnode 并最终使用了 nowjs 并且https github com Flotype nowclient https github com Flotype nowclient 用于客户端 服务器双向
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR
  • 响应式菜单:悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单
  • 如何在 ChartJS 中创建自定义图例

    我需要使用 ChartJS 库为我的圆环图创建自定义图例 我已经使用 ChartJS 提供的默认图例创建了甜甜圈 但我需要一些修改 我希望其价值高于汽车名称 另外 我不喜欢粘性图例 我想将其与甜甜圈分开 这样我就可以更改字体 框的样式 例如

随机推荐

  • 关于Android权限和签名保护级别

    我是 Android 新手 对 AndroidManifest xml 中的权限保护级别 签名 有疑问 Android 参考文档说明了 签名 保护级别 仅当请求应用程序时系统才授予的权限 使用与声明的应用程序相同的证书进行签名 的许可 如果
  • JAXB 创建上下文和编组器成本

    这个问题有点理论化 创建 JAXB 上下文 编组器和反编组器的成本是多少 我发现我的代码可以受益于为所有编组操作保留相同的 JAXB 上下文和可能相同的编组器 而不是在每个编组上创建上下文和编组器 那么创建 JAXB 上下文和编组器 反编组
  • python matplotlib条形图添加条形标题[重复]

    这个问题在这里已经有答案了 我正在使用 matplotlib 和 python 2 7 我需要创建一个简单的 pyplot 条形图 对于每个条形图 我需要在其顶部添加它的 y 值 我正在使用以下代码创建条形图 import matplotl
  • 使用 Ajax 将表单数据发送到控制器操作

    我在 MVC3 中有一个页面 带有一个链接 Ajax ActionLink 当用户单击它时 它会调用控制器的操作 并将结果插入到 div 中 并进行替换 代码如下所示 Ajax ImageActionLink Images btn shar
  • 使用java从字符串中删除重复的字母

    我需要使用java中的正则表达式操作从字符串中删除重复的字母 例如 王子 gt 王子 苹果 gt 苹果 简单的解决方案 删除重复字符 像这样 final String str APPLEE String replaced str repla
  • 使用 AJAX 上传文件而不使用 FormData (IE9)

    In IE9 FormData不支持 这使得使用上传文件XMLHttpRequest不那么琐碎了 这可以做到吗 我已经看到提到了 iFrame 虽然我不反对编写一些繁琐的代码 但我对如何实现这一目标感到困惑 有很多资源讨论上传到 iFram
  • 使用头文件有哪些优点和缺点? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我对 Java C Scala 等编程语言以及 C C Objective C 等较低级编程语言有一些经验 我的观察是 低级语言尝试将头文件和实现文件分开 而其他高级编程语言从不将其分开
  • 在单元测试方法中显示 Windows 窗体

    我刚刚在 Visual Studio NET 中发现了单元测试项目 并使用测试方法来设置我开发的全局代码的示例 一些全局方法涉及显示可重用的对话框 例如日期选择器和输入框 问题是 有时表格会显示 有时则不会 我认为这与模态有关 因为我有一个
  • Kotlin:“return@”是什么意思?

    我在我的一个项目中使用 RxJava 我使用 Android Studio 插件和地图之一将我的类之一转换为 KotlinflatMaplambda java 中的 Func1 中间体返回如下所示 Func1 我不懂这啥意思 somethi
  • 将两个数据框逐个元素粘贴在一起

    我需要逐个元素粘贴两个数据帧的内容以输入到另一个程序 我有一个平均值数据框和一个平均值标准误差数据框 我尝试使用 R Paste 函数 但它似乎无法处理数据框 使用向量时 似乎将第一个向量的所有元素连接到一个字符串中 并将第二个向量的所有元
  • Javascript 中使用双括号调用函数

    当我调用函数时hi 带双括号的函数显示hi输出 它也会给出错误 说hi不是函数 使用的意义是什么 带函数名 如果出现以下情况 双括号会很有用 hi返回了一个函数而不是它的名称 就像 function hi return hello hi 这
  • 查找包含另一个字符串中一个字符串的所有字符的最小窗口的长度

    最近我接受了采访 我做得不好 因为我被以下问题卡住了 假设给出一个序列 A D C B D A B C D A C D 搜索顺序如下 A C D 任务是找到给定字符串中的开始和结束索引 该索引包含保留顺序的搜索字符串的所有字符 Output
  • 如何重载打印函数来扩展其功能?

    我想知道是否有内置功能print可以被覆盖 以便以下语句将同时写入控制台和文件 print test0 test1 test2 sep n 另外 我想知道是否可以修改内置的源代码print功能 使用装饰器 简化示例 def my decor
  • Android 编辑文本 - 光标停留在起始位置

    我在我的项目中使用编辑文本 问题是 每当我在文本框中输入任何内容时 它都会显示出来 但无论我输入多少个字符 光标都不会从其起始位置移动 此外 我无法通过单击文本框中的任何特定字符来移动 我的包含编辑文本的 xml 文件是这样的
  • 如何知道 PHAsset 是否已被修改?

    更具体地说 你如何知道一个PHAsset标的资产的当前版本是否与原始版本不同 我的用户只需在必要时在当前资产或原始资产之间进行选择 然后我需要他们的答案PHImageRequestOptions version 从 iOS 16 开始 PH
  • 如何打开 Chrome DevTools 命令菜单?

    人们如何访问下面屏幕截图中的命令菜单 If you re unable to use keyboard shortcut Cmd Ctrl Shift P you can also click the three stacked dots
  • WPF 中的 x:Reference 何时解析?为什么 XAML 元素顺序会影响它?

    x 在 XAML 中重新排列元素后 无法解析引用 这里我展示一个工作代码 只需移动 DataGrid 元素 使其位于按钮元素之后 ContextMenu 中的 MenuItem 和 Button IsEnabled 中的 MultiBind
  • QTreeWidget 通过拖动重新排序子项

    我有一个 QTreeWidget 它仅显示单个根节点和一级子节点 我需要允许子节点的重新排序 他们绝不能被重新养育 这就是我在 QTreeWidget 中启用项目拖动的方法 ui gt levelElements gt setSelecti
  • 将 RGB 转换为光频率

    是否可以从 RGB 表示中获取颜色的光频率 我发现了相反的过程 1 但我不知道这种方式是否可行 1 http www fourmilab ch documents specrend AFAIK 没有直接的答案 因为多个波长可以组合起来给出相
  • 将 RGB 转换为 RGBA 白色

    我有一个十六进制颜色 例如 F4F8FB or rgb 244 248 251 我想转换成尽可能透明rgba 颜色 显示在白色上时 合理 我正在寻找一种算法 或者至少是一种如何做到这一点的算法的想法 例如 rgb 128 128 255 g