16进制颜色识别和搭配规律 (实用）
原文出处：https://blog.csdn.net/weixin_39037804/article/details/100266599
在CSS中，经常会用到16进制的颜色来设置文本、背景、边框等颜色，但是对于一个纯前端来讲，16进制颜色的识别和搭配可能会较为陌生了 ,本文简单介绍一下16进制颜色的一些规律
16进制颜色的数值意义：
举个例子：比如 #1A2BF4（不区分大小写），前两位1A表示的是RGB中R（Red：红色），2B表示的是RGB中的G（Green：绿色），F4表示RGB中的B（Blue：蓝色），大小从00（0）到FF（255），数值越高，颜色越深。
16进制颜色的混合：
比如对于#FF0000，绿色和蓝色都是00，而红色则是FF，则该颜色#FF0000就是红色，#550000也是红色，但是要比#FF0000的红要浅。同理，#00FF00表示绿色，#0000FF表示蓝色。
根据颜色混合原理，其实是跟物理学是一样的，红绿混合（#FFFF00）为黄色，红蓝混合（#FF00FF）为紫红色（也叫洋红），蓝绿混合（#00FFFF）为青色，而红绿蓝混合（#FFFFFF）则是白色，
#000000为黑色。
将#XXYYZZ分组，XX为第一组，YY为第二组，ZZ为第三组。显然XX，YY，ZZ分别对应红绿蓝。
1.当第一组较大，其余两组较小时，颜色偏红。
2.当第二组较大，其余两组较小时，颜色偏绿。
3.当第三组较大，其余两组较小时，颜色偏蓝。
4.当第一、二组较大，第三组较小时，颜色偏黄。 (红、绿多）
5.当第一、三组较大，第二组较小时，颜色偏紫红。（红、蓝多）
6.当第二、三组较大，第一组较小时，颜色偏青。 （绿、蓝多）
7.三组比较接近或相等时，颜色为灰色。可以通过改变数值大小来调配灰色的深浅（也可以叫明暗，数值越高越明亮，低则较暗）。如#e3e3e3表示的灰色比#a3a3a3表示的灰色要浅，当接近（#FFFFFF白色）时，灰色就很浅了。
颜色的明暗（深浅）：
对于一个纯色的值是0~255即256种，对应00~FF，当颜色处于中间即 256/2=128（换算成16进制为80），可以看成为颜色明暗的分界线。如#800000为暗红，#008000为暗绿，数值更大，颜色变亮，数值越小，颜色越暗
16进制颜色识别和搭配规律 (实用）相关推荐
- 16进制颜色识别和搭配规律
在CSS中,经常会用到16进制的颜色来设置文本.背景.边框等颜色,但是对于一个纯前端来讲,16进制颜色的识别和搭配可能会较为陌生了 ,本文简单介绍一下16进制颜色的一些规律 16进制颜色的数值意义: ...
- iOS 将16进制颜色转换成UIColor
很多地方我们都使用16进制颜色,但iPhone使用的是UIColor对象,不直接支持16进制颜色,为此,需要我们手动将16进制颜色转换为UIColor - (UIColor *) hexStringT ...
- iOS 直接使用16进制颜色
在做iOS开发时,一般我们会吸色,就是产品给的图我们一般会吸色,但是最近吸色时候,老大说有较大的颜色偏差,所以要求我们直接使用UI给出的额16进制颜色,你也可以搜索<RGB颜色值转换成十六进制颜 ...
- POI 自定义16进制颜色导出
今天导入一个Excel 要求什么格式导入就怎么显示,包括字体 颜色,还要怎么导出.这个poi导入的是16进制颜色,导出比较麻烦.具体参考以下代码吧 private CellStyle createSt ...
- rgb与16进制颜色是如何相互转换的？
在css中定义颜色可以使用rgb颜色值,例:rgb(182, 0, 35):也可以使用16进制颜色值,例:#B60023.不管是rgb(182, 0, 35),还是#B60023都表示了同一种颜色,其 ...
- iOS之颜色的调用、显示16进制颜色、渐变色
十六进制颜色 #import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGIN@interface UIColor (HexColor) + (UIColor ...
- Android内部颜色转16进制颜色
我们在Avtivity中设置控件的背景色的时候,会发现setBackgroundColor()居然需要int格式的颜色,本来以为是10进制的颜色,后来实验发现,不是10进制的,因为它是有负数的,它的范 ...
- js自定义随机16进制颜色
js自定义随机16进制颜色 function colorfn() {let str = Math.random().toString().slice(2, 8);if (str.length < ...
- js将16进制颜色转换成RGB格式
js代码如下: function hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h ...
最新文章
- sort用法（默认按升序排列）
- An Invitation to 3-D Vision: From Images to Geometric Models 邀请 3d 视觉从图像的几何模型（免费下载）
- JSON 分析数据格式
- Bash+R: howto pass parameters from bash script to R（转）
- 前端工程化系列好文摘要
- 给我往死里贪！——24行代码AC_今年暑假不AC HDU - 2037（贪心模板讲解）
- jsf 配置_JSF Tomcat配置示例
- Python | 如何强制除法运算为浮点数？ 除数一直舍入为0？
- hwpfdocument 获取第一页内容_有人专注搞这3个引流渠道，精准流量获取从此变得简单...
- 网络相关的常用协议总结
- 【动态规划 回文串11】LeetCode 516. Longest Palindromic Subsequence
- Unity Shader播放序列帧动画
- NVIDIA-SMI has failed because it couldn‘t communicate with the NVIDIA driver
- hivesql uv
- python调用多个cpp文件_python 如何调用cpp
- java练习题-猜数字游戏
- 王之泰201771010131《面向对象程序设计（java）》第十四周学习总结
- 中国诗歌艺术9诗的魅惑：中国诗歌的几个基本元素之诗的节奏与韵律
- 报表类-金蝶K3一次查询所有供应商采购价格
- 成绩在C语言中怎么表示,c语言指数函数-分数在C语言中怎么表示分数和指数形式在C语 – 手机爱问...