均匀渐变

渐变(Gradient)是美学中一条重要的形式美法则,与其相对应的是突变。形状、大小、位置、方向、色彩等视觉因素都可以进行渐变。在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的渐变算法。

已知:A=50,B=200,A、B之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少。

公式:Gradient = A + (B-A) / Step * N

[注]:编程时为了提高效率避免浮点运算,往往把除法放在最后面,这样公式就成了:Gradient = A + (B-A) * N / Step

Step=3时,根据公式可以求出Step1=A+(A-B)/3*1=50+(200-50)/3=100,Step2=A+(A-B)/3*2=50+(200-50)/3*2=150。这就是均匀渐变的算法原理了,很简单,小学知识。

两种颜色的渐变就是对两种颜色的RGB通道分别进行这样的计算,例如两种颜色分别是RGB(200,50,0)和RGB(50,200,0),用上述公式进行计算就是:

RStep1=RA=RA+(BA-RA)/Step*N=200+(50-200)/3*1=200-50=150

GStep1=GA=GA+(GA-GA)/Step*N=50+(200-50)/3*1=50+50=100

BStep1=BA=BA+(BA-BA)/Step*N=0

因此RGBStep1=(150,100,0),同样的方法可以求出RGBStep2=(100,150,0)。

颜色渐变的RGB计算的更多相关文章

  1. JS 处理十六进制颜色渐变算法-输入颜色,输出渐变rgb数组

    html颜色有几种表示方式: 英文单词颜色值:background-color:Blue:十六进制颜色值:background-color:#FFFFFF:  RGB颜色值三元数字:backgroun ...

  2. 颜色渐变的JS代码

    今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> ...

  3. javascript实现颜色渐变

    渐变(Gradient)是美学中一条重要的形式美法则,与其相对应的是突变.形状.大小.位置.方向.色彩等视觉因素都可以进行渐变.在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的 ...

  4. WPF在3D Cad模型中利用TextureCoordinates实现颜色渐变显示偏差值的变化

    原文:WPF在3D Cad模型中利用TextureCoordinates实现颜色渐变显示偏差值的变化 注:最近在做3D机械模型重建方面的软件,需要根据光栅传感器采集的数据绘制3D图形,并显示出色差以及 ...

  5. javascript实战 : 简单的颜色渐变

    HTML <div id="color"></div> CSS .item{ display:inline-block; margin:10px; widt ...

  6. 【.NET 与树莓派】WS28XX 灯带的颜色渐变动画

    在上一篇水文中,老周演示了 WS28XX 的基本使用.在文末老周说了本篇介绍颜色渐变动画的简单实现. 在正式开始前,说一下题外话. 第一件事,最近树莓派的价格猛涨,相信有关注的朋友都知道了.所以,如果 ...

  7. iOS 动画绘制线条颜色渐变的折线图

    效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...

  8. android Button 切换背景,实现动态按钮和按钮颜色渐变

        android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变     1.右键单击项目->new->Oth ...

  9. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. php模拟POST请求提交数据

    php模拟POST请求提交数据 1.基于fsockopen function phppost00($jsonString){ $URL='https://www.jy.com/phppostok.ph ...

  2. PYTHON开发--面向对象基础入门

    面向对象 一:面向对象初级 1.思考:首先在python中,以前我们以前用到的几乎都是函数式编程,但是有时候函数式编程其中代码重复利用率太高,我们往往会把这些重复代码写进一个函数日后去调用,所以呢,今 ...

  3. ubuntu14.04安装wine以及国际版QQ

    公社(http://www.linuxidc.com/linux/2014-06/103768.htm)说: Wine (“Wine Is Not an Emulator” 的首字母缩写)是一个能够在 ...

  4. 编程思想—依赖注入(DI)并非实现控制反转(IOC)的最佳方法

    以构造函数注入为例: public class TestClass(IClassA a,IClassB b, IClassC C,IClassD d) { public void Method1() ...

  5. IE8,IE9,IE10绿色版,以及ColorPix

    对于开发者而言IETest是一坨屎. 但是我们终于迎来的蛋糕和火腿,今天无意间发现了竟然有绿色版的浏览器版本,IE9,IE10已经下到本地,IE8网传是有的,但是没有找到合适的版本.但是足够了,本机使 ...

  6. Quartz源码阅读

    基于Quartz1.8.5的源码解读 首先看一个demo //简单的任务管理类 //QuartzManager.java package quartzPackage; import java.text ...

  7. mmap内存映射复习

    c语言初学时,比较常见的一个习题就是实现cp. 使用c库实现的cp就不赘述了. 最近工作用到内存映射,就拿来练下手,复习一下mmap的用法. 很简单,将目标文件和源文件映射到内存,然后使用memcpy ...

  8. Test for open live write

    this is test document. this is test document. this is test document. this is test document. this is ...

  9. C语言 rand()函数的用法

    rand()(产生随机数) 相关函数 srand() 表头文件 #include<stdlib.h> 定义函数 int rand()(void) 函数说明 rand()会返回一随机数值,范 ...

  10. [BZOJ 3144] [Hnoi2013] 切糕 【最小割】

    题目链接:BZOJ - 3144 题目分析 题意:在 P * Q 的方格上填数字,可以填 [1, R] . 在 (x, y) 上填 z 会有 V[x][y][z] 的代价.限制:相邻两个格子填的数字的 ...