一种基于制造技术

本发明专利技术提供一种基于

【技术实现步骤摘要】
一种基于rgb三原色的调色板代码实现方法


[0001]本专利技术涉及互联网前端领域，尤其涉及一种基于
rgb
三原色的调色板代码实现方法
。
主要应用于
web
端颜色选择，通过设置
rgb
三原色
、
录入颜色的
16
进制
、
输入颜色名称以及屏幕拖拽选择等多种手段都可实现自定义颜色的选择和微调

技术介绍

[0002]在互联网技术蓬勃发展的今天，用户体验对于产品的升级迭代显得越来越重要，对于用户可以自定义颜色的功能，颜色选取方式快捷
、
方便
、
智能是提升用户体验的关键
。
常见的技术方案是系统内置一些颜色供用户选择，但是内置颜色并不能很好的满足用户个性化的需求，而且有限的选择也不能满足用户对大量颜色的需求
。
所以自定义颜色选择才是更好的方案，也就是所谓的调色板，现有的
web
端插件并不能满足当前需求
。

技术实现思路

[0003]为了解决以上技术问题，本专利技术提供了一种基于
rgb
三原色的调色板代码实现方法
。
为用户提供一种颜色设置的方案，内置颜色并不能满足用户需求，提供一个调色板才是最好的方案，支持用户可以通过多种方式来设置自定义颜色，不论是设置
rgb、
录入
16
进制
、
输入颜色名称还是屏幕拖拽式的选择，都应该支持用户使用
。
[0004]本专利技术的技术方案是：
[0005]一种基于
rgb
三原色的调色板代码实现方法，主要应用于
web
端颜色选择，通过设置
rgb
三原色
、
录入颜色的
16
进制
、
输入颜色名称以及屏幕拖拽选择等多种手段都可实现自定义颜色的选择和微调
。
[0006]进一步的，
[0007]拖拽选择首先是颜色范围选择，主要表示形式是长条式的一维颜色选择器，自左向右为
rgb(255,0,0)、rgb(255,255,0)、rgb(0,255,0)、rgb(0,255,255)、rgb(0,0,255)、rgb(255,0,255)、rgb(255,0,0)
共7个颜色的等距渐变
。
[0008]其次是精确颜色选择，颜色范围选择也将决定了拖拽选择的精确颜色选择的范围上限
。
[0009]精确颜色选择的表现形式是方形的二维颜色选择器，左上角
、
左下角
、
右下角
、
右上角依次为
rgb(255,255,255)、rgb(0,0,0)、rgb(0,0,0)
以及第一部分的范围选择器选出的颜色，选择器中间的颜色即为四个角颜色的等距渐变；然后通过拖动选取点来选择颜色
。
[0010]再进一步的，
[0011]选择方式是联动的，通过一种方式选择之后，其余方式都会计算出该颜色对应表现形式的结果，当用户对当前选择颜色不满意时，依然可以通过其他方式微调
。
[0012]第一个办法就是存储一个变量，这个变量允许用小数存储颜色，这个变量不对用户展示；对于用户展示的方式，采用整数，而所有计算可以基于小数存储计算的都一律按小数存储的颜色计算，而不是取整后的
。
[0013]第二个办法就是对于必须取整计算的，采用向下取整
。
[0014]第三个办法就是在用户拖动选取点的时候利用节流手段减少计算次数来减轻计算负担
。
[0015]在
web
端实现了复杂的颜色选择，结合了四种颜色选择方式，多种方式动态联动，同时可以结合多种选择方式来共同进行选择；另外，拖拽选择器分为两部分，通过结合两个选择器来实现所有颜色的选择；同时，还利用了多种方式来减轻运行负担，优化了系统效率
。
[0016]本专利技术的有益效果是
[0017]对于简单的颜色，用户可以直接输入颜色名称进行选择，例如
white、black、red、green、blue、yellow、orange
等，对于复杂的颜色，用户就可以输入
16
进制或者输入
rgb
三原色，而对于模糊不确定的颜色，用户就可以通过选择器不停的拖拽调整来找到心仪的颜色，基本满足了用户的所有需求
。
附图说明
[0018]图1是本专利技术的工作流程示意图
。
具体实施方式
[0019]为使本专利技术实施例的目的
、
技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚
、
完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例，基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本专利技术保护的范围
。
[0020]本专利技术提供了一种基于
rgb
三原色的调色板代码实现方法，基于
web
端实现调色板，并且提供设置
rgb
三原色
、
录入
16
进制
、
输入颜色名称和屏幕拖拽选择四种方式
。
前三种方式主要是输入式，就是输入相应的数值或者名字后就会获取到相应的颜色，故不再赘述
。
这里要着重讲的就是第四种屏幕拖拽，拖拽选择主要分为两部分，第一部分是颜色范围选择，主要表示形式是长条式的一维颜色选择器，自左向右为
rgb(255,0,0)、rgb(255,255,0)、rgb(0,255,0)、rgb(0,255,255)、rgb(0,0,255)、rgb(255,0,255)、rgb(255,0,0)
共7个颜色的等距渐变，而且此处的颜色选择也将决定了我们拖拽选择的第二部分精确颜色选择的范围上限
。
第二部分精确颜色选择表现形式是方形的二维颜色选择器，左上角
、
左下角
、
右下角
、
右上角依次为
rgb(255,255,255)、rgb(0,0,0)、rgb(0,0,0)
以及第一部分的范围选择器选出的颜色，选择器中间的颜色即为四个角颜色的等距渐变
。
然后通过拖动选取点来选择颜色
。
[0021]同时，多种选择方式是联动的，通过一种方式选择之后，其余多种方式都会计算出该颜色对应表现形式的结果，所以当用户对当前选择颜色不是很满意时，依然可以通过其他方式微调
。
而这块逻辑实现也是较为复杂的，因为本身数据联动是多向的，而且
rgb...

【技术保护点】

【技术特征摘要】
1.
一种基于
rgb
三原色的调色板代码实现方法，其特征在于，通过设置
rgb
三原色
、
录入颜色的
16
进制
、
输入颜色名称以及屏幕拖拽选择的方式实现自定义颜色的选择和微调
。2.
根据权利要求1所述的方法，其特征在于，拖拽选择首先是颜色范围选择，表示形式是长条式的一维颜色选择器，自左向右为
rgb(255,0,0)、rgb(255,255,0)、rgb(0,255,0)、rgb(0,255,255)、rgb(0,0,255)、rgb(255,0,255)、rgb(255,0,0)
共7个颜色的等距渐变
。3.
根据权利要求2所述的方法，其特征在于，其次是精确颜色选择，颜色范围选择决定了拖拽选择的精确颜色选择的范围上限
。4.
根据权利要求3所述的方法，其特征在于，精确颜色选择的表现形式是方形的二维颜色选择器，左上角
、
左下角
、

【专利技术属性】
技术研发人员：陈文昊，
申请(专利权)人：山东浪潮数字商业科技有限公司，
类型：发明
国别省市：