两个颜色叠加之后是什么颜色

最新推荐文章于 2024-08-10 09:24:48 发布
原创 最新推荐文章于 2024-08-10 09:24:48 发布 · 2.8k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#颜色叠加 #rgb #颜色加法 #颜色混合 #autojs

约定

  • 这里只讨论显示器的颜色, 也就是加法混色算法
  • 两个颜色叠加, 至少有一个颜色是有透明度的, 不然一点都不透明的话, 下面的颜色就看不见了
  • 颜色模型是rgb模型,
  • 为了简化计算, argb四个通道的值范围定为0~1
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

定义变量

  • 前景色 c1, argb通道: a1, r1, g1, b1
  • 背景色 c2, argb通道: a2, r2, g2, b2
  • 叠加后的颜色 c3, argb通道: a3, r3, g3, b3

​

颜色实体

把颜色想象成为, 一个有颜色的玻璃, 且玻璃可以调节反射率,
比如玻璃反射0.5, 那么剩下的0.5就是折射, 反射率 + 折射率 = 1
​

两个颜色叠加模型

在这里插入图片描述

计算叠加颜色的数值

靠近眼睛的玻璃板令其颜色为蓝色, 代号玻璃1号, 玻璃反射率为0.5, 折射率为0.5
远离眼睛的玻璃板令其颜色为红色, 代号玻璃2号, 玻璃反射率为0.5, 折射率为0.5
​

玻璃颜色数值

玻璃1号: a1: 0.5, r1: 1, g1: 0, b1: 0
玻璃2号: a2: 1, r2: 0, g2: 0, b2: 1

R通道

玻璃1号的R通道值是0
玻璃2号的R通道值是1
首先, 玻璃2号反射率为1, 反射了所有的红色, 然后通过玻璃2号, 折射0.5的红, 射到眼睛里;
然后, 玻璃1号R通道值为0
​

射到眼睛里R通道的值是 0.5 + 0 = 0.5
​

G通道

玻璃1号的G通道值是0
玻璃2号的G通道值是0
射到眼睛里G通道的值是 0 + 0 = 0
​

B通道

玻璃1号的B通道值是1
玻璃2号的B通道值是0
​

首先, 玻璃2号B通道值是0;
然后, 玻璃1号反射0.5的蓝, 射到眼睛里
​

射到眼睛里B通道的值是 0 + 0.5 = 0.5
​

射到眼睛里的颜色

R: 0.5
G: 0
B: 0.5
​

各乘255, 后是127, 0, 127,
在这里插入图片描述

计算出来的颜色和ps的颜色对比

在这里插入图片描述

​

完美

两者不能说一模一样, 简直一模一样
​

随机的颜色叠加

我们随机两个颜色

玻璃颜色数值

玻璃1号: r1: 0.3, g1: 0.4, b1: 0.5, 反射率0.2, 折射率0.8
玻璃2号: r2: 0.6, g2: 0.7, b2: 0.8, 反射率1.0, 折射率0.0
​

R通道

玻璃1号的R通道值是0.3
玻璃2号的R通道值是0.6
​

首先, 玻璃2号反射率为1, 反射了0.6的红色, 然后通过折射率为0.8的玻璃1号, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.3的红通过反射率为0.2的玻璃1号, 射到眼睛里
​

射到眼睛里R通道的值是
玻璃2号: 0.6 * 0.8
玻璃1号: 0.3 * 0.2
射到眼睛里的R通道的总值: (0.6 * 0.8) + (0.3 * 0.2) = 0.48 + 0.06 = 0.54
​

G通道

玻璃1号的G通道值是0.4
玻璃2号的G通道值是0.7
​

首先, 玻璃2号反射率为1, 反射了0.7的绿色, 然后通过玻璃1号, 折射0.8的绿, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.4的绿通过反射率为0.2的玻璃1号, 射到眼睛里
​

射到眼睛里G通道的值是
玻璃2号: 0.7 * 0.8
玻璃1号: 0.4 * 0.2
射到眼睛里的G通道的总值: (0.7 * 0.8) + (0.4 * 0.2) = 0.56 + 0.08 = 0.64
​

B通道

玻璃1号的B通道值是0.5
玻璃2号的B通道值是0.8
​

首先, 玻璃2号反射率为1, 反射了0.8的蓝色, 然后通过玻璃1号, 折射0.8的蓝, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.8的蓝通过反射率为0.2的玻璃1号, 射到眼睛里
​

射到眼睛里B通道的值是
玻璃2号: 0.8 * 0.8
玻璃1号: 0.5 * 0.2
射到眼睛里的B通道的总值: (0.8 * 0.8) + (0.5 * 0.2) = 0.64 + 0.1 = 0.74
​

射到眼睛里的颜色

R: 0.54
G: 0.64
B: 0.74
​

各乘255, 后是137.7, 163.2, 188.7
不能有小数, 四舍五入
138, 163, 189
在这里插入图片描述

计算出来的颜色和ps的颜色对比

玻璃1号: r1: 0.3, g1: 0.4, b1: 0.5, 反射率0.2, 折射率0.8
玻璃2号: r2: 0.6, g2: 0.7, b2: 0.8, 反射率1.0, 折射率0.0
​

玻璃1号颜色: 76.5, 102, 127.5
玻璃2号颜色: 153, 178.5, 204
​

取整四舍五入
玻璃1号颜色: 77, 102, 128
玻璃2号颜色: 153, 179, 204
​

ps的颜色是138, 164, 189
在这里插入图片描述

完美

两者不能说一模一样, 简直一模一样

先用255换算颜色值, 再叠加颜色

G通道

玻璃1号的G通道值是0.4, 乘以255等于102
玻璃2号的G通道值是0.7, 乘以255等于178.5, 四舍五入等于179
​

首先, 玻璃2号反射率为1, 反射了179的绿, 然后通过折射率为0.8的玻璃1号, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 102的绿通过反射率为0.2的玻璃1号, 射到眼睛里
​

射到眼睛里R通道的值是
玻璃2号: 179 * 0.8
玻璃1号: 102 * 0.2
射到眼睛里的R通道的总值: (179 * 0.8) + (102 * 0.2) = 143.2 + 20.4 = 163.6 = 164
​

完美

两者一模一样
​

总结

虽然你看见的只有这一篇文章, 但是我看了很多帖子, 颜色叠加模型也想了好几种, 推翻重来了好多次,
最终终于实现了和ps一样的颜色叠加效果, 我非常满意, 你能看懂我写的吗? 我觉的我写的非常详细了
​

参考

颜色叠加算法
两个半透明颜色色的叠加计算方法
​

名人名言

思路是最重要的, 其他的百度, bing, stackoverflow, 安卓文档, autojs文档, 最后才是群里问问
— 牙叔教程

声明

部分内容来自网络
本教程仅用于学习, 禁止用于其他用途

bilibili

牙叔教程

微信公众号 牙叔教程

在这里插入图片描述

QQ群

747748653
在这里插入图片描述

两个RGBA四通道颜色的叠加计算方法与代码实现
fifbro的博客
01-06 1万+
叠加算法原理： 通过一些简单的实验外加一些逻辑推理，可以成功的找到 Alpha 混合的方法。这里为了计算上的方便，全部颜色分量值的取值范围都是 0 ~ 1。 首先是透明度值的计算。颜色在本质上是光的产物，假设把透明度理解为玻璃的透光性，则一切就变得很easy。比如一个 alpha = 0.2 的颜色，就能够将其想像为透光率为 80% 的彩色玻璃。我们透过这块玻璃看去，因为 80% 的光都透过了
Unity 两张Texture叠加时用到的颜色混合
breeze默宇
06-01 1871
Unity 两张Texture叠加时用到的颜色混合
Ps：图层样式 - 颜色叠加、渐变叠加、图案叠加
qq_41176800的博客
08-10 3846
Photoshop 图层样式中的叠加类效果包括：颜色叠加、渐变叠加以及图案叠加三种。当使用这些图层效果时，Photoshop 会新建一个隐式的填充图层并作为剪贴蒙版以完全覆盖当前图层的内容。◆◆◆颜色叠加颜色叠加Color Overlay，新建一个隐式的纯色填充图层作为叠加层以完全覆盖当前图层的内容。可以添加多达 10 个颜色叠加效果。颜色Color混合模式Blend Mode控制纯色填...
rgba图层混合算法--公式
Ruilin
11-12 1739
目标：实现带alpha通道的多个图像合并生成新的图像 格式：每个图层的数据格式为像素数组，每个像素由rgba四个值组成。 方法：计算两层中位置相对应的两个像素的rgba计算后得出的新像素rgba值，即得到新图层的图像；新的图层再与下一个图层按相同的算法合并，直到所有图层合并完成。 算法：实现算法分为两种-- + 第一种是计算机底层绘制过程的算法，结果为显示在屏幕上的视觉效果，无alpha通
探索图片透明度叠加方式
hitheqing的博客
05-22 2832
两张带有透明度的图叠加，能够叠加出另一个透明度的图，如下： 那么叠加后的透明度是多少呢？ 很容易做实验，两个透明度0.5的图叠在一起，并不会就没有透明度了。两个0.9的叠在一起，也不会超过1是不是？ 那么很可能就是非线性叠加。类似于数学中概率事件的计算： 理解透明度为 显示程度 设图a透明度 x, 图b透明度y，（0<=x,y<=1） 那么 a为空的程度1-x,b为空...
两个色彩叠加，RGB怎么计算
cbbbc
09-06 2万+
如果是两个图像相加，有几种方法， 第一种是直接相加，然后对结果进行检查，将所有超过255的值设定为255。 第二种是相加后除以2，这样就可能保证不会超出。 两种方法做出来的效果是不一样的，第一种的暗部细节要保存得好一点，但是亮部的损失有点大 原文地址：http://bbs.youkuaiyun.com/topics/390241016
RGB三种颜色相加
cbbbc
09-06 1万+
色光三原色 　　 （红）+（绿)=（黄）   （蓝）+（绿)=（青） 　　 （红）+（蓝)=（品红） 　　 （绿）+（蓝)+(红)=（白） 　　 颜料三原色 　　 （红）+（黄)=（橙） 　　 （蓝）+（红)=（紫） 　　 （蓝）+（黄)=（绿） 参考资料： http://baike.baidu.com/view/41629
精选资源
imoverlay:创建两个图像的颜色叠加。 允许透明度和阈值。-matlab开发
05-30
- 允许独立控制两个图像- 通过下拉菜单选择工作区变量- 轻松调整颜色图- 可调节的透明度- 加载 3D 或 4D 数据集- 导出图保存- 用于快速选择的加速键例子： % 将一张图片透明地叠加到另一张图片上imB = 幻影（256）...
叠加两个数据集或索引图像：叠加两个数据集：独立的颜色图、数据提示检查和创建后可更改。-matlab开发
05-30
叠加层适用于两个图像的独立颜色图。 对于某个范围内的值，它可以部分隐藏。 数据提示提供坐标、背景和叠加数据集中的像素值。 这是一种面向对象的方法，因此函数调用实例化了一个 Matlab 类。 只要您保留引用，...
Unity Shader 学习 003-Shader结构体 颜色叠加
m0_48781656的博客
05-27 1364
1.实现效果 2.代码分析 3.引用参数块中的参数 4.Shader结构体 4.1 a2v结构体 4.1 v2f结构体 5. 颜色叠加效果的实现 5.1 顶点着色器部分 5.2 片元着色器部分
blending-modes:JS中类似Photoshop的两种颜色混合公式
06-06
混合模式 JS中的Photoshop双色混合公式基于： : 基本用法： multiply = blendingModes . multiply pixelA = r : 0 g : 60 b : 255 pixelB = r : 45 g : 27 b : 134 pixelC = r : multiply ( pixelA . r , pixelB . r ) g : multiply ( pixelA . g , pixelB . g ) b : multiply ( pixelA . b , pixelB . b )
Photoshop-颜色混合模式(全为计算公式)
08-20
Photoshop-颜色混合模式(全为计算公式)
叠加半透明位图Delphi源码
08-30
叠加半透明位图，或指定透明度，应用API实现，Delphi源码
Photoshop图层混合模式的计算公式
痞子龙3D编程
11-30 4051
Photoshop中，图层混合模式和图层不透明度都是被广泛应用的功能之一。这篇PS教程提供了各种图层混合模式以及图层不透明度的数学计算公式，了解这些公式，可以更好的掌握这些功能。   文章来源于网络，向作者致敬。     注释： 1.混合模式的数学计算公式，另外还介绍了不透明度。 2.这些公式仅适用于RGB图像，对于Lab颜色图像而
混合颜色的色值计算公式
热门推荐
SigridW的专栏
09-21 2万+
之前为了实现液体混合的颜色实时变化效果，推敲得出一个计算公式，分享一下。 两种颜色混合后，混色的色值计算，RGB分别用这个公式计算：颜色A-(颜色A-颜色B)*(1-颜色A的百分比) 例如：绿和白混合，绿(192, 229, 112)70%，白(255, 255, 255)30% R: 192-(192-255)*(1-0.7) = 210.9 G: 229-(229-255)*(1-0.
颜色叠加(模拟)
weixin_45883147的博客
03-07 1034
Description 👉HNUCM:2080 题目的大致意思是在平面上给出两个矩形左上角的坐标、长度和宽度，求出重叠部分的面积。【注意：此处定义与X轴平行的那组边为长边，与Y轴平行的那组边为宽边】 Input 单组输入。 第1行输入四个整数，分别表示蓝色长方形透明卡片的左上角坐标（X坐标和Y坐标）、长和宽。两两之间用英文空格隔开。 第2行输入四个整数，分别表示黄色长方形透明卡片的左上角坐标（X坐标和Y坐标）、长和宽。两两之间用英文空格隔开。 两张长方形透明卡片的X坐标和Y坐标的取值范围为[-1000
html颜色叠加代码,html代码大全(基础使用代码)(颜色代码完整版)
weixin_39771987的博客
06-09 427
该楼层疑似违规已被系统折叠隐藏此楼查看此楼您在使用以下基础使用代码时请把{}换成<>！！！)(这样这个命令才成立！！！)基础使用代码：1)贴图：{imgsrc="图片地址"}2)加入连接：{ahref="所要连接的相关地址"}写上你想写的字{/a}3)在新窗口打开连接：{ahref="相关地址"target="_blank"}写上要写的字{/a}4)移动字体(走马灯)：{ma...
PS图层混合算法之三（滤色， 叠加， 柔光， 强光）
weixin_30273931的博客
04-03 1031
滤色模式： 作用结果和正片叠底刚好相反，它是将两个颜色的互补色的像素值相乘，然后除以255得到的最终色的像素值。通常执行滤色模式后的颜色都较浅。任何颜色和黑色执行滤色，原色不受影响;任何颜色和白色执行滤色得到的是白色；而与其他颜色执行滤色会产生漂白的效果。 Screen 滤色 C=1-(1-A)*(1-B)也可以写成 1-C=(1-A)*(1-B) 该模式和上...
Android怎么将两个颜色叠加起来
最新发布
08-21
<think>好的，用户问的是在Android中如何将两个颜色叠加起来。首先，我需要理解用户的具体需求是什么。颜色叠加可能指的是不同的颜色混合方式，比如透明度混合、颜色模式叠加（如正片叠底、叠加模式等），或者是简单的颜色覆盖。用户可能是在开发应用时遇到了需要将两个颜色结合的需求，比如在绘制图形、设置背景或者处理图像时。 接下来，我需要考虑Android中常见的颜色叠加方法。首先想到的是使用Paint的setColor、setXfermode等方法，或者使用PorterDuff.Mode来定义不同的混合模式。另外，可能还会用到颜色过滤器ColorFilter，或者通过自定义View的onDraw方法来实现更复杂的混合效果。 用户可能对这些方法不太熟悉，所以需要详细说明每种方法的使用场景和步骤。例如，PorterDuff.Mode有不同的选项，如SRC_OVER、DST_OVER、MULTIPLY等，每种模式的效果不同，需要举例说明。 另外，用户可能希望得到代码示例，这样他们可以直接应用在项目中。所以需要提供具体的代码片段，比如如何创建Paint对象，如何设置混合模式，如何在Canvas上绘制两个颜色叠加的效果。 还要考虑不同Android版本的兼容性问题，某些颜色模式可能在旧版本上不支持，需要提醒用户注意。此外，可能还需要解释颜色叠加的基本原理，比如颜色通道的运算，帮助用户更好地理解不同模式的效果。 用户可能的应用场景可能包括按钮点击效果、图片滤镜、动态颜色变化等。需要根据这些场景给出不同的解决方案，让用户能够根据具体情况选择合适的方法。 最后，需要总结各种方法的优缺点，比如使用PorterDuff.Mode简单快捷，但灵活性有限；自定义着色器可以实现更复杂的效果，但需要更多代码和性能考虑。这样用户可以根据自己的需求选择最佳方案。 在回答时，要确保语言简洁明了，步骤清晰，示例代码准确，并涵盖常见的使用场景和注意事项。同时，按照用户的要求，在回答末尾提供3-5个相关问题，帮助用户进一步扩展知识。</think>在 Android 中，将两个颜色叠加可以通过 **颜色混合模式（PorterDuff.Mode）** 或 **自定义颜色计算** 实现。以下是具体方法及代码示例： --- ### 1. **使用 `PorterDuff.Mode` 实现颜色混合** Android 提供了 `PorterDuff.Mode` 枚举，支持多种颜色混合模式（如叠加、正片叠底、变暗等）。 #### (1) **基本用法** ```kotlin val paint = Paint() paint.color = Color.RED // 基础颜色 paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_OVER) // 默认叠加模式 // 在 Canvas 上绘制两个颜色 canvas.drawColor(Color.BLUE) // 背景颜色 canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint) // 叠加颜色 ``` #### (2) **常用混合模式** | 模式 | 效果 | |------|------| | `PorterDuff.Mode.SRC_OVER` | 默认模式（前景色覆盖背景色） | | `PorterDuff.Mode.MULTIPLY` | 颜色相乘（变暗） | | `PorterDuff.Mode.SCREEN` | 颜色反相后相乘（变亮） | | `PorterDuff.Mode.ADD` | 颜色叠加（亮化） | | `PorterDuff.Mode.OVERLAY` | 根据背景色决定变亮或变暗 | #### (3) **示例：变暗效果** ```kotlin val paint = Paint() paint.color = Color.parseColor("#8800FF00") // 半透明绿色 paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.MULTIPLY) canvas.drawColor(Color.RED) // 背景色 canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint) // 叠加后为黑色 ``` --- ### 2. **通过颜色通道计算叠加** 若需精确控制颜色混合逻辑，可手动计算 RGB 或 HSL 通道值。 #### (1) **RGB 通道叠加** ```kotlin fun blendColors(color1: Int, color2: Int, ratio: Float): Int { val inverseRatio = 1 - ratio val r = (Color.red(color1) * inverseRatio + Color.red(color2) * ratio).toInt() val g = (Color.green(color1) * inverseRatio + Color.green(color2) * ratio).toInt() val b = (Color.blue(color1) * inverseRatio + Color.blue(color2) * ratio).toInt() return Color.rgb(r, g, b) } ``` #### (2) **HSL 模式调整** ```kotlin fun adjustHSL(color: Int, hueShift: Float, saturationScale: Float, luminanceScale: Float): Int { val hsv = floatArrayOf(0f, 0f, 0f) Color.colorToHSV(color, hsv) hsv[0] = (hsv[0] + hueShift) % 360 // 色相偏移 hsv[1] = (hsv[1] * saturationScale).coerceIn(0f..1f) // 饱和度缩放 hsv[2] = (hsv[2] * luminanceScale).coerceIn(0f..1f) // 亮度缩放 return Color.HSVToColor(hsv) } ``` --- ### 3. **使用 `ColorFilter` 实现动态叠加** 通过 `ColorFilter` 可对图像或控件应用颜色叠加效果。 #### (1) **设置控件颜色滤镜** ```kotlin imageView.setColorFilter(Color.parseColor("#8800FF00"), PorterDuff.Mode.MULTIPLY) ``` #### (2) **动态颜色叠加动画** ```kotlin val animator = ValueAnimator.ofArgb(0x00FFFFFF.toInt(), 0x88FF0000.toInt()) animator.addUpdateListener { animation -> val color = animation.animatedValue as Int val filter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_OVER) myView.background.colorFilter = filter } animator.duration = 1000 animator.repeatCount = ValueAnimator.INFINITE animator.start() ``` --- ### 4. **注意事项** - **透明度处理**：颜色叠加时需注意 Alpha 通道（`Color.parseColor("#AAFFFFFF")`）。 - **硬件加速限制**：某些 `PorterDuff.Mode` 在硬件加速下可能不支持，需关闭硬件加速或使用 `setLayerType(View.LAYER_TYPE_SOFTWARE, null)`。 - **性能优化**：复杂颜色计算建议在非主线程处理，避免卡顿。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牙叔教程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值