网站方案,军事新闻播报最新,陕西建新建设有限公司网站,注册公司步骤和所需材料目录 1 十六进制2 CSS中的十六进制2.1 十六进制颜色的基本结构2.2 十六进制颜色的范围2.3 简写形式2.4 透明度 3 CSS的命名颜色4 配色4.1 色轮4.2 互补色4.3 类似色4.4 配色工具 日常在开发小程序中#xff0c;客户总是希望你的配色是美的#xff0c;但是美如何定义#xff… 目录 1 十六进制2 CSS中的十六进制2.1 十六进制颜色的基本结构2.2 十六进制颜色的范围2.3 简写形式2.4 透明度 3 CSS的命名颜色4 配色4.1 色轮4.2 互补色4.3 类似色4.4 配色工具 日常在开发小程序中客户总是希望你的配色是美的但是美如何定义什么是美的什么又是不美的。在实践中如果我们用了一个抽象的定义那么背后就有一个理论作为支撑然后结合特定的工具就可以达到美的效果。我们本篇介绍一下CSS配色的理论知识、相关工具的使用。 1 十六进制
十六进制是一种基于16的数字系统使用十六个不同的符号来表示数值。这些符号包括数字0-9表示值0到9和字母A-F或a-f表示值10到15。
十六进制的主要特点
基数16的系统
在十六进制中每个数字代表16的幂。例如十六进制数1A3可以分解为 1 × 1 6 2 10 × 1 6 1 3 × 1 6 0 1 \times 16^2 10 \times 16^1 3 \times 16^0 1×16210×1613×160 按照十六进制进行计算 1 × 256 10 × 16 3 × 1 1 \times 256 10 \times 16 3 \times 1 1×25610×163×1 最终计算十进制的结果 256 160 3 419 256 160 3 419 2561603419
2 CSS中的十六进制
在 CSS 中颜色的十六进制表示法是一种常用的颜色定义方式它使用十六进制数字来表示颜色的红、绿、蓝RGB分量
2.1 十六进制颜色的基本结构
十六进制颜色通常以 # 符号开头后面跟随六个十六进制数字。每两个数字分别表示红色、绿色和蓝色的强度。格式如下
#RRGGBBRR红色分量00 到 FFGG绿色分量00 到 FFBB蓝色分量00 到 FF
2.2 十六进制颜色的范围
每个颜色分量的值范围从 00 到 FF其中
00 表示该颜色分量的强度为 0无该颜色FF 表示该颜色分量的强度为 255最大强度
例如
#FF0000 表示纯红色红色分量为最大绿色和蓝色分量为 0#00FF00 表示纯绿色#0000FF 表示纯蓝色#FFFFFF 表示白色所有分量都为最大#000000 表示黑色所有分量都为 0
2.3 简写形式
如果红、绿、蓝三个分量的值都是两个相同的数字可以使用简写形式。例如
#FFCC00 可以简写为 #FC0表示相同的颜色#AABBCC 可以简写为 #ABC
2.4 透明度
在 CSS 中十六进制颜色也可以包含透明度信息使用八位十六进制表示法。格式如下
#RRGGBBAAAA表示透明度00 到 FF其中 00 表示完全透明FF 表示完全不透明
3 CSS的命名颜色
除了用十六进制表示外我们还可以使用命名颜色表示如
黑色black白色white红色red绿色green蓝色blue黄色yellow青色水色cyan品红色洋红magenta
一共有140种命名颜色可以去W3C CSS Color Module Level 3 中找到完整的颜色名称列表
4 配色
一个个去看命名颜色未免效率太低我们可以依据色轮理论搭配出自己想要的颜色来
4.1 色轮
色轮是颜色的视觉表示通常包括原色红、黄、蓝、次色绿、橙、紫和三次色红橙、黄橙、黄绿、蓝绿、蓝紫、红紫。
4.2 互补色
互补色是色轮上相对的颜色搭配使用时可以产生强烈的对比效果。例如红色和绿色、蓝色和橙色。
4.3 类似色
类似色是色轮上相邻的颜色搭配使用时可以产生和谐的效果。例如蓝色、蓝绿色和绿色
4.4 配色工具
可以使用在线的配色工具如Adobe Color来完成配色 按照我们的配色理论移动取色的球就可以得到互补色或者相邻色有两条最佳实践
通常建议使用 2-4 种主要颜色以保持设计的简洁性和一致性。过多的颜色可能会使设计显得杂乱无章选择一种主色作为设计的基础使用辅色来补充主色并使用点缀色来突出重要元素
