网页颜色色值取色器:

CSS3渐变色代码生成器:

效果示例1

效果示例2

渐变参数

webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );

-webkit-gradient是background的一个属性值;

webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear;

第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);

当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;

当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;

当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;

当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;

实现垂直渐变和水平渐变渐变时,x1和x2可以最简单的取值是left(或0%)或right(或100%),y1和y2可以最简单的取值是top(或0%)或bottom(或100%);

from(开始颜色值),to(结束颜色值)是两个渐变颜色值;

[color-stop(偏移量,停靠颜色值),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为小数,如果偏移量>=1,那么该color-stop相当于无效;

颜色配色

所谓配色,简单来说就是将颜色摆在适当的位置,做一个最好的安排。色彩是通过人的印象或者联想来产生习理上的影响,而配色的作用就是通过改变空间的舒适程度和环境气氛来满足消费者的各方面的要求。配色主要有两种方式,一是通过色彩的色相、明度、纯度的对比来控制视觉刺激,达到配色的效果;另一种是通过心理层面感观传达,间接性地改变颜色,从而达到配色的效果。

颜色的种类非常多,不同的颜色会给人不同的感觉。红,橙,黄给人感到温暖和欢乐,因此称为"暖色";蓝,绿,紫给人感到安静和清新,因此称为"冷色"。

html颜色代码生成器,在线取色配色工具,CSS3渐变色代码生成器-易玩稀有相关推荐

  1. 在线压力并发工具AB版 简单易用

    由于之前发布过在线版并发工具,由于测试不能持久还是不能相对准确测试出吞吐量. 如下是基于AB并发测试工具来开发出来的一个线上测试版本. 验证网站还是使用之前并发工具验证列表,无需单独进行网站验证. 验 ...

  2. 帮助开发者和网站设计师更方便配色的在线配色工具 - PLTTS

    日期:2013-5-4  来源:GBin1.com 如果你不是一个专业的网站设计师的话,往往有时候你会纠结于配色方案,这里我们将介绍一个在线的配色工具-PLTTS,或许能够帮助你解决配色问题. PLT ...

  3. html颜色参考 速查 在线取色,Color by Fardos - 配色/取色插件

    Color by Fardos开发背景 设计师的工作离不开颜色,而且经常会遇到需要取到网页某个部分的颜色,之前我们chrome插件网介绍了ColorPick:网页颜色选择器.ColorZilla插件. ...

  4. ppt取色html,如何进行屏幕取色,取色器工具怎么使用,教你在线识别颜色

    有时候我们设计图片或者网站是时候,常常会为颜色为头疼,或者在某个地方看到中意的颜色想运用到自己的作品上面,却发现不知道其颜色模式是怎么搭配而犯难,我们常见的颜色模式有RGB.CMYK等,只要知道颜色模 ...

  5. 20款对设计师非常有用的在线配色工具

    配色是网页设计的关键之一,精心挑选的颜色组合可以帮助你让设计更有吸引力,相反的,糟糕的配色会伤害眼睛,妨碍读者对网页内容和图片的理解.然而,很多时候设计师不知道如何选择颜色搭配,好消息是如今有很多的配 ...

  6. 20款常用的在线配色工具

    配色是网页设计的关键之一,精心挑选的颜色组合可以帮助你让设计更有吸引力,相反的,糟糕的配色会伤害眼睛,妨碍读者对网页内容和图片的理解.然而,很多时候设计师不知道如何选择颜色搭配,好消息是如今有很多的配 ...

  7. Material Design专用在线配色工具

    现在Material的设计方式的应用越来越多,但是颜色搭配实在让人有些头痛.很多程序员不懂PS,他们的应用UI设计全靠设计师,这样在很大程度上降低了开发效率,但是随着这个小工具的诞生,我想很多程序员就 ...

  8. 颜色选择器vs在线取色器

    在线颜色选择器 http://gavin-yyc.github.io/colorconvert/ 可以输入rgb/hsv/hex,转换成其他的输出 在线取色器 http://www.jiniannet ...

  9. Android开发——小技巧:推荐辅助工具(icon图标网站、在线取色网站以及视频学习网站)

    图标网站: Iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 在线取色网站: R ...

  10. tbopen链接生成工具_筛选了100个配色工具后,我挑出了这25个

    研究主题:提升色彩感知的配色工具 研究对象:配色工具 UI 设计中,颜色几乎是最先被感知到的设计元素,好的色彩感知是成为一个优秀的设计师的基础,配色工具层出不穷,辞典酱在筛选了100多种配色工具后,精 ...

最新文章

  1. linux命令--提升
  2. html img 指定旋转角度_ALLEN老师自动化测试小课堂 | 生成HTML可视化报告的两个常见模块...
  3. table_line
  4. php 不支持无符号整数,是否可以使用大型无符号int64而不会在PHP中失去精度?
  5. ADSL掉线解决方法全略
  6. MYSQL 在当前时间加上或减去一个时间段
  7. Linux下细碎温度等的监控与调整
  8. 七代处理器装win7_为啥新电脑没法装windows7系统?解决方法总会有的
  9. C++之char , signed char , unsigned char
  10. 前端aes加密_前端安全攻防解析
  11. Hibernate —— 映射关联关系
  12. 【干货分享】Color Fonts是什么?多彩字体详解
  13. OMNeT 例程 Tictoc1-5 总结
  14. 九月亲测可运营【付费视频奖励计划赞助视频付费计划】最新版本的视频奖励源代码带有订阅可扣除金额带有代理新UI ...
  15. 英飞凌XC2000系列——汽车ECU Bootloader 设计详解
  16. 如何打开.exe文件
  17. smaa github iryoku
  18. uni.getLocation(Object)获取经纬度和当前中文地址
  19. 进制详解:二进制、八进制和十六进制
  20. 在Ubuntu1604中安装ROS Kinetic

热门文章

  1. oracle数据库考试题带答案解析,oracle数据库期末考试试题及答案剖析
  2. 计算机二级C++知识点归纳之公共基础
  3. 你要的《高性能MySQL》.pdf
  4. 简单的背包问题(c语言)
  5. java-php-python-ssm在线购书商城系统计算机毕业设计
  6. WPF开发实例——仿QQ登录界面
  7. Android淘宝客链接自动跳转淘宝APP问题
  8. chrome浏览器解除pdf加密
  9. 用asp如何开发wap push(转)
  10. 原生js写小球向右移动移动一定距离停止运动及小球加速运动