Color颜色——颜色模式、颜色基本特征、网页颜色以及色彩使用技巧（理论）

已于 2023-02-11 20:29:23 修改
阅读量2.9k 收藏 5
点赞数
文章标签： css html
于 2021-10-09 22:30:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52514930/article/details/120680316
版权
本文深入探讨了网页颜色的表示方法，包括十六进制和十进制RGB表示，以及CSS中的RGBA和HSLA。讨论了色相、纯度和明度的颜色基本特征，并介绍了各种颜色模式。重点讲述了色彩使用技巧，如色轮理论在单色、相似、互补、分裂互补和三元、四元配色中的应用，提供实用的色彩搭配建议。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

颜色

  • 网页颜色
  • 颜色基本特征（三要素）
  • 颜色模式
  • 颜色使用技巧（重点）

网页颜色

简介：

网页颜色是在万维网上设计网页时，表示各种颜色的方法。颜色可以用三组十六进制数字表示，部分常用颜色或和上下文相关的内容也可以用英语名称的“关键字”来表示。此外还有直接使用多组十进制表示的方法。

十六进制数字表示方法


在HTML和CSS中使用3字节共6个十六进制数字表示一种颜色，每字节从00到FF，相当十进位数字从0到255，按顺序前两位是红色的值，中间两位是绿色的值，最后两位是蓝色的值。

由于网页是基于计算机浏览器开发的媒体，所以颜色以光学颜色RGB（红、绿、蓝）为主。 网页颜色是以16进制代码表示，一般以“#”号开头，后面分别为R、G、B的16位进制数。 FF为最大数，代表十进制255。比如白色是R、G、B三个颜色最大，在网页代码便是：#FFFFFF。黑色是三个颜色为0，在网页代码便是：#000000。当颜色代码为#XXYYZZ时，可以用#XYZ表示，如#135与#113355表示同样的颜色。在CSS中，也可以使用rgb(127,127,127)代替#7F7F7F（十进制表示）。

例如一种颜色在十进位中红、绿、蓝的比例分别是36、104、160，在十六进位制中则分别为24、68、A0，所以十六进位制数字表示方法就为：2468A0，如果数字小于16，在十六进位中就会小于10，前面就要加0，如在十进位中分别为0、1、2，在十六进位制数字表示方法中就为：000102，所以可以表示的颜色数总共有：2563 = 16,777,216 种。

CSS颜色模块第四版引入了#RRGGBBAA和#RGBA的表示方式。

十进制“函数”表示


从CSS 2.1开始，提供有rgb(red,green,blue)的十进制颜色代码。

从CSS 3开始，网页颜色支持RGBA和HSLA颜色表示法：

  • rgba(255,0,0,0.5) - 半透明的红色。
  • hsla(120,100%,50%,0.3) - 半透明 (0.3) 的绿色。

这样的语法提供了使用透明色的可能性。

颜色基本特征

  • 色相： 色相是有彩色的最大特征。所谓色相是指能够比较确切地表示某种颜色色别的名称。如玫瑰红、桔黄、柠檬黄、钴蓝、群青、翠绿……从光学物理上讲，各种色相是由射入人眼的光线的光谱成分决定的。对于单色光来说，色相的面貌完全取决于该光线的频率；对于混合色光来说，则取决于各种频率光线的相对量。物体的颜色是由光源的光谱成分和物体表面反射（或透射）的特性决定的。

  • 纯度：色彩的纯度是指色彩的纯净程度，它表示颜色中所含有色成分的比例。含有色彩成分的比例愈大，则色彩的纯度愈高，含有色成分的比例愈小，则色彩的纯度也愈低。可见光谱的各种单色光是最纯的颜色，为极限纯度。当一种颜色参入黑、白或其他彩色时，纯度就产生变化。当参入的色达到很大的比例时，在眼睛看来，原来的颜色将失去本来的光彩，而变成掺和的颜色了。当然这并不等于说在这种被掺和的颜色里已经不存在原来的色素，而是由于大量的参入其他彩色而使得原来的色素被同化，人的眼睛已经无法感觉出来了。

  • 明度：有色物体色彩的纯度与物体的表面结构有关。如果物体表面粗糙，其漫反射作用将使色彩的纯度降低；如果物体表面光滑，那么，全反射作用将使色彩比较鲜艳。

颜色模式

  1. 简介：颜色模式，是将某种颜色表现为数字形式的模型，或者说是一种记录图像颜色的方式。分为：RGB模式、CMYK模式、HSB模式、Lab颜色模式、位图模式、灰度模式、索引颜色模式、双色调模式和多通道模式。

  2. 各个模式概述：
RGB模式虽然可见光的频率有一定的范围，但我们在处理颜色时并不需要将每一种频率的颜色都单独表示。因为自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色频率的不同强度组合而得，这就是人们常说的三基色原理。因此，这三种光常被人们称为三基色或三原色。有时候我们亦称这三种基色为添加色(Additive Colors)，这是因为当我们把不同光的频率加到一起的时候，得到的将会是更加明亮的颜色。把三种基色交互重叠，就产生了次混合色：黄(Yellow)、青(Cyan)、紫(Purple)。这同时也引出了互补色(Complement Colors)的概念。基色和次混合色是彼此的互补色，即彼此之间最不一样的颜色。例如青色由蓝色和绿色构成，而红色是缺少的一种颜色，因此青色和红色构成了彼此的互补色。在数字视频中，对RGB三基色各进行8位编码就构成了大约1677万种颜色，这就是我们常说的真彩色。顺便提一句，电视机和计算机的监视器都是基于RGB颜色模式来创建其颜色的。
CMYK模式CMYK颜色模式是一种印刷模式。其中四个字母分别指青（Cyan）、洋红（Magenta）、黄（Yellow）、黑（Black），在印刷中代表四种颜色的油墨。CMYK模式在本质上与RGB模式没有什么区别，只是产生色彩的原理不同，在RGB模式中由光源发出的色光混合生成颜色，而在CMYK模式中由光线照到有不同比例C、M、Y、K油墨的纸上，部分光谱被吸收后，反射到人眼的光产生颜色。由于C、M、Y、K在混合成色时，随着C、M、Y、K四种成分的增多，反射到人眼的光会越来越少，光线的亮度会越来越低，所有CMYK模式产生颜色的方法又被称为色光减色法。
HSB颜色模式从心理学的角度来看，颜色有三个要素：色泽(Hue)、饱和度(Saturation)和亮度(Brightness)。HSB颜色模式便是基于人对颜色的心理感受的一种颜色模式。它是由RGB三基色转换为Lab模式，再在Lab模式的基础上考虑了人对颜色的心理感受这一因素而转换成的。因此这种颜色模式比较符合人的视觉感受，让人觉得更加直观一些。它可由底与底对接的两个圆锥体立体模型来表示，其中轴向表示亮度，自上而下由白变黑；径向表示色饱和度，自内向外逐渐变高；而圆周方向，则表示色调的变化，形成色环。
Lab颜色模式Lab颜色是由RGB三基色转换而来的，它是由RGB模式转换为HSB模式和CMYK模式的桥梁。该颜色模式由一个发光率(Luminance)和两个颜色(a,b)轴组成。它由颜色轴所构成的平面上的环形线来表示色的变化，其中径向表示色饱和度的变化，自内向外，饱和度逐渐增高；圆周方向表示色调的变化，每个圆周形成一个色环；而不同的发光率表示不同的亮度并对应不同环形颜色变化线。它是一种具有“独立于设备”的颜色模式，即不论使用任何一种监视器或者打印机，Lab的颜色不变。其中a表示从红色至绿色的范围，b表示黄色至蓝色的范围。
位图模式位图模式用两种颜色（黑和白）来表示图像中的像素。位图模式的图像也叫作黑白图像。因为其深度为1，也称为一位图像。由于位图模式只用黑白色来表示图像的像素，在将图像转换为位图模式时会丢失大量细节，因此Photoshop提供了几种算法来模拟图像中丢失的细节。 在宽度、高度和分辨率相同的情况下，位图模式的图像尺寸最小，约为灰度模式的1/7和RGB模式的1/22以下。
灰度模式灰度模式可以使用多达256级灰度来表现图像，使图像的过渡更平滑细腻。灰度图像的每个像素有一个0（黑色）到255（白色）之间的亮度值。灰度值也可以用黑色油墨覆盖的百分比来表示（0%等于白色，100%等于黑色）。使用黑折或灰度扫描仪产生的图像常以灰度显示。
索引颜色模式索引颜色模式是网上和动画中常用的图像模式，当彩色图像转换为索引颜色的图像后包含近256种颜色。索引颜色图像包含一个颜色表。如果原图像中颜色不能用256色表现，则Photoshop会从可使用的颜色中选出最相近颜色来模拟这些颜色，这样可以减小图像文件的尺寸。用来存放图像中的颜色并为这些颜色建立颜色索引，颜色表可在转换的过程中定义或在生成索引图像后修改。
双色调模式双色调模式采用2-4种彩色油墨来创建由双色调（2种颜色）、三色调（3种颜色）和四色调（4种颜色）混合其色阶来组成图像。在将灰度图像转换为双色调模式的过程中，可以对色调进行编辑，产生特殊的效果。而使用双色调模式最主要的用途是使用尽量少的颜色表现尽量多的颜色层次，这对于减少印刷成本是很重要的，因为在印刷时，每增加一种色调都需要更大的成本。
多通道模式多通道模式对有特殊打印要求的图像非常有用。例如，如果图像中只使用了一两种或两三种颜色时，使用多通道模式可以减少印刷成本并保证图像颜色的正确输出。 6. 8位/16位通道模式 在灰度RGB或CMYK模式下，可以使用16位通道来代替默认的8位通道。根据默认情况，8位通道中包含256个色阶，如果增到16位，每个通道的色阶数量为65536个，这样能得到更多的色彩细节。Photoshop可以识别和输入16位通道的图像，但对于这种图像限制很多，所有的滤镜都不能使用，另外16位通道模式的图像不能被印刷。

颜色使用技巧（重点）

  • 所有技巧建立在 色轮（色环） 之上

  • 色环是在彩色光谱中所见的长条形的色彩序列，只是将首尾连接在一起，使红色连接到另一端的紫色，色环通常包括12~24种不同的颜色。按照定义，基色是最基本的颜色，通过按一定的比例混合基色可以产生任何其它颜色。

  • 公式技巧

    1. 单色搭配：在确定了某一个色调之后，通过改变其饱和度和色值，来创造其他的辅色，好处： 能够最大程度的保证匹配与和谐
    2. 相似搭配：在确定了色轮上某一个色调后，选取相邻的色调来进行创造搭配
    3. 互补色搭配：在确定了色轮上某一个色调后，选取对立色调来进行创造搭配
    4. 分裂互补搭配：在确定了色轮上某一个色调后，选取对立色调的相邻两个色调来进行创造搭配
    5. 三元配色（三角配色）：使用三个在色轮上呈现等边三角形的色调进行创造搭配
    6. 四元色搭配：使用四个在色轮上呈现矩形的色调进行搭配创造

  • 实践原则

    1. 遇到刺眼的色调可以通过调整三要素来缓和
    2. 你的搭配需要高可读性，可以中性色来平衡多色画面
    3. 颜色通常带来信息，低饱和度的画面显得更商务，色值较高的画面则更加现代
文秀玮晔
关注
几种色彩模式简介
lyj5079的博客
10-25 4441
数字世界中表示颜色的一种算法成为色彩模式。在数字世界中，为了表示各种颜色，人们通常将颜色划分为若干分量。由于成色原理的不同，决定了显示器、投影仪、扫描仪这类靠色光直接合成颜色的颜色设备和打印机、印刷机这类靠使用颜料的印刷设备在生成颜色方式上的区别。关于计算机对色彩的表示方法，常见的有GRB，HSB，CYMK，Lab。
html css color 灰色,html网页颜色大全css color网页颜色代码
weixin_42408094的博客
06-09 3294
mark一下，每次都要去搜，干脆备份在博客里以方便查找html网页颜色大全css color网页颜色代码网页颜色配色可以用借鉴这个色谱了。Code Color#000000 Black#0C090A Night#2C3539 Gunmetal#2B1B17 Midnight#34282C Charcoal#25383C Dark Slate Grey#3B3131 Oil#413839 Black...
HTML 颜色名：网页色彩世界的基石
最新发布
Smell_of_earth的博客
03-16 629
HTML颜色名是网页开发调配色彩的关键元素，主流浏览器支持141个，含17种标准色，每个对应十六进制值，有不同用途。 如果你还有其他总结需求，比如针对特定段落或更精简，随时都能跟我说。
页面中color颜色值_HTML+CSS 基础知识-入门概括-颜色与单位
weixin_29416629的博客
01-13 2319
颜色与单位一、颜色1、概述色调：很接近通俗意义上的颜色。 是指图像的相对明暗程度，在彩色图像上表现为颜色 ​ 饱和度：是指颜色中灰色的含量。 饱和度最大时，颜色中灰色的含量为零；饱和度最小时，颜色基本就是灰色。也就是说，饱和度与灰色的占比是成反比的。（可以理解为，纯度越高,表现越鲜明,纯度较低,表现则较黯淡） ​ 亮度：是指颜色中黑色的含量。 亮度最大时，颜色中黑色的含量为零。亮度最小时，颜色会变...
color #
踏雪寻梅
11-23 1616
 #003366 是深紫色； #FFFFFF 是白色； #000000是黑色 古董白 #FAEBD7 浅绿色 #00FFFF 碧绿色 #7FFFD4 天蓝色 #F0FFFF 米色 #F5F5DC 桔黄色 #FFE4C4 黑色 #000000白杏色 #FFEBCD 蓝色 #0000FF 紫罗兰色#8A2BE2 褐色 #A52A2A 实木色 #DEB887 军兰色 #5F9EA0 黄绿色 #7FFF0
颜色(color)转换为三色值(r/g/b)（干货分享）
u014784370的专栏
09-28 9361
干货分享---颜色转换 — 三色值
颜色校正的艺术：揭秘专家从理论到实践的5大技巧
本文首先介绍了颜色校正的基本原理和重要性，然后深入探讨了其理论基础，包括颜色科学、人类颜色视觉心理学以及色彩校正的技术原理。文章接着介绍了当前常用的颜色校正工具与软件，并详细分析了它们的界面、工作流程...
RColorBrewer秘籍：专家级颜色配色技巧，美化你的数据图表
![R语言数据包使用详细教程RColorBrewer]...本章将带领读者从颜色理论的基础知识开始，深入了解RColorBrewer的设计理念和使用方法。 ## 1.1 颜色理
RGB颜色模型深度解析：数字世界色彩构建的权威教程
[RGB颜色模型深度解析：数字世界色彩构建的权威教程](https://img-blog.csdnimg.cn/c8a588218cfe4dee9ac23c45765b025d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAzqPOr8-Dz4...
【RGB颜色表】：专业设计师如何在数字艺术中精确控制色彩
[RGB颜色表](https://img-blog.csdnimg.cn/c8a588218cfe4dee9ac23c45765b025d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAzqPOr8-Dz4XPhs6_z4IxOTAw,size_20,color_FFFFFF,t_70...
【cxGrid颜色与用户体验设计】：心理策略在颜色应用中的作用
本文探讨颜色在用户体验设计中的作用，从颜色理论基础到实际应用进行了综合分析。文章首先介绍了颜色感知的科学原理及心理学效应，随后详述了在cxGrid界面设计中的颜色应用原则及信息架构中的作用。通过颜色设计实践...
colors十六进制颜色码.pdf
04-23
十六进制颜色码就是在软件中设定颜色值的代码。在很多软件中，都会遇到设定颜色值的问题，发展来源 人的眼睛看到的颜色有两种： 一种是发光体发出的颜色，比如计算机显示器屏幕显示的颜色； 另一种是物体本身不发光，而是反射的光产生 十六进制颜色。 颜色价值可能并且代表作为数字范围从0 到255。这类型数字代表由计算机程序设计者广泛实施存放各颜色价值在一个8位字节。充分的强度红色代表作为255,0,0。 十六进制颜色码 十六进制颜色码 同样范围，0 到255 和，十六进制数在这个范围通常被写以一个固定的两位数格式，代表它并且代表在十六进制，在某些情况下前缀（象#）。被写和# ff 的充分的强度红色，# 00,# 00。这可能被收缩象# ff0000。
网页配色软件：Color Schemer Studio
尘飞扬の技术Blog
05-09 2044
 可以说，Color Schemer Studio是我迄今为止见过的最优秀的一款配色软件，故在此隆重介绍一下。 尽管 Color Schemer Studio很小巧，只有2.25M，但却提供了非常丰富的网页配色解决方案。使用的时候，可以在颜色轮(Color Wheel)、颜色协调或推荐颜色三种窗口中自由切换。特别是推荐颜色功能，会从当前的多种颜色中为你提供最合适的颜色。选取颜色的时候可以将窗口放大
将Color转换为网页使用的（带#号那种）颜色字符串
weixin_33704234的博客
10-08 186
strings=string.Format("#{0:X2}{1:X2}{2:X2}",Color.Yellow.R,Color.Yellow.G,Color.Yellow.B);//s="#FFFF00" 转载于:https://www.cnblogs.com/1-2-3/articles/1306004.html
计算机读取颜色及opencv的图像色彩模式
lovesjj_1011的博客
10-11 659
计算机中图片颜色通道一般采用RGB进行排列,opencv在读取图片时，按BGR读取.如果想使用RGB顺序的影像数据，需要进行转换。
C# Color颜色RGB对照表
旭东怪的博客
09-21 4万+
序号 Color 颜色 RGB 1 Color.AliceBlue 艾丽丝蓝 240,248,255 2 Color.AntiqueWhite 古典白色 250,235,215 3 Color.Aqua，Color.Cyan 浅蓝色，蓝绿色，青色 0,255,255 4 Color.Aquamarine 海蓝色 127,255,212 5 Color.Azure 天蓝色 240,2
c# Color颜色RGB对照表
qq_44763415的博客
05-16 2590
做项目，需要用到很多颜色属性相关的，就顺手把颜色RGB对照表记录下来了，以备以后需要。C# Color颜色RGB对照表。
PC版c语言输出各种不同颜色代码
qq_32257509的博客
06-20 2444
printf(“■■■淡浅绿色\n”);printf(“回到原来颜色\n”);printf(“■■■淡浅绿色\n”);printf(“■■■淡绿色\n”);printf(“■■■淡红色\n”);printf(“■■■淡紫色\n”);printf(“■■■淡黄色\n”);printf(“■■■亮白色\n”);printf(“■■■淡绿色\n”);printf(“■■■淡红色\n”);printf(“■■■淡紫色\n”);printf(“■■■淡黄色\n”);printf(“■■■亮白色\n”);
各种颜色代码大全（Html、android）
热门推荐
zsb190623的专栏
08-05 4万+
Html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值