CSS的配色
目录
- 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×162+10×161+3×160
按照十六进制进行计算
1 × 256 + 10 × 16 + 3 × 1 1 \times 256 + 10 \times 16 + 3 \times 1 1×256+10×16+3×1
最终计算十进制的结果
256 + 160 + 3 = 419 256 + 160 + 3 = 419 256+160+3=419
2 CSS中的十六进制
在 CSS 中,颜色的十六进制表示法是一种常用的颜色定义方式,它使用十六进制数字来表示颜色的红、绿、蓝(RGB)分量
2.1 十六进制颜色的基本结构
十六进制颜色通常以 # 符号开头,后面跟随六个十六进制数字。每两个数字分别表示红色、绿色和蓝色的强度。格式如下:
#RRGGBB
- RR:红色分量(00 到 FF)
- GG:绿色分量(00 到 FF)
- BB:蓝色分量(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 中,十六进制颜色也可以包含透明度信息,使用八位十六进制表示法。格式如下:
#RRGGBBAA
AA:表示透明度(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 种主要颜色,以保持设计的简洁性和一致性。过多的颜色可能会使设计显得杂乱无章
- 选择一种主色作为设计的基础,使用辅色来补充主色,并使用点缀色来突出重要元素
相关文章:
CSS的配色
目录 1 十六进制2 CSS中的十六进制2.1 十六进制颜色的基本结构2.2 十六进制颜色的范围2.3 简写形式2.4 透明度 3 CSS的命名颜色4 配色4.1 色轮4.2 互补色4.3 类似色4.4 配色工具 日常在开发小程序中,客户总是希望你的配色是美的,但是美如何定义ÿ…...
Parallax.js:让智能设备视差效果更智能、更自然
今天给大家分享一款功能非常强大的javascript视觉差特效引擎插件:Parallax.js。 Parallax.js简介 Parallax.js是一个简单的,轻量级的视差引擎。你可以将它作为作为jQuery或Zepto插件来使用,也可以以纯JS的方式来使用。 最-最-最厉害的是它…...
一文熟悉新版llama.cpp使用并本地部署LLAMA
0. 简介 最近是快到双十一了再给大家上点干货。去年我们写了一个大模型的系列,经过一年,大模型的发展已经日新月异。这一次我们来看一下使用llama.cpp这个项目,其主要解决的是推理过程中的性能问题。主要有两点优化: llama.cpp …...
vue/react做多语言国际化的时候,在语言配置中不同的语言配置不同的字体,动态引入scss里面
如果想直接在vue文件的css里面使用,就可以使用i18n的t函数,注意t外层也有引号: font-size: v-bind("t(style.teamCurModelFontSize)"); 前提是要引入t函数:...
Unity——鼠标点击信息和当前位置获取
文章目录 前言一、应用场景二、实现方法1.获取鼠标在屏幕上的位置2.获取鼠标点击位置的世界坐标3.获取鼠标点击位置的UI元素总结前言 在Unity开发中,有时会需要我们获取一些鼠标的信息用于数据交互或者角色控制。 一、应用场景 交互式UI 按钮点击:检测用户是否点击了UI按钮,…...
vue 2的v-***关键字作用及使用场景
作为一个Vue 2的高级前端程序员,你需要熟悉Vue 2的所有指令(Directives)。以下是Vue 2中的指令及其详细说明: v-text 作用:更新元素的textContent。使用场景:当你需要将数据直接显示在页面上,且…...
Matlab实现鲸鱼优化算法优化随机森林算法模型 (WOA-RF)(附源码)
目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 鲸鱼优化算法(Whale Optimization Algorithm, WOA)是受座头鲸捕食行为启发而提出的一种新型元启发式优化算法。该算法通过模拟座头鲸围绕猎物的螺旋游动和缩小包围圈的方式,在…...
【Android】ubutun 创建Androidstudio桌面快捷方式
此方法不仅适合Androidstudio,其他应用的快捷方式创建同理。 创建桌面快捷方式 进入桌面 cd ~/Desktop创建.desktop文件 touch androidStudio.desktop编辑.desktop文件 [Desktop Entry] TypeApplication Terminalfalse NameAndroid Studio Comment android stu…...
javascript 流程控制,数组【知识点整理】
javascript JS 流程控制条件控制语句循环语句跳转语句:异常处理: JS 数组数组的方法 JS 流程控制 条件控制语句 if 语句:用于在满足特定条件时执行代码块。 if (condition) {// 如果条件为真,则执行代码块 }if…else 语句&#x…...
2.索引:SQL 性能分析详解
SQL性能分析是数据库优化中重要的一环。通过分析SQL的执行频率、慢查询日志、PROFILE工具以及EXPLAIN命令,能够帮助我们识别出数据库性能的瓶颈,并做出有效的优化措施。以下将详细讲解这几种常见的SQL性能分析工具和方法。 一、SQL 执行频率 SQL执行频率…...
Flink SQL
进入 JobManager 容器: docker exec -it 21442d9ca797 /bin/bash 启动 Flink 的 SQL 客户端: /opt/flink/bin/sql-client.sh embedded 尝试创建 Kafka 表: 在启动的 SQL 客户端中,尝试创建一个 Kafka 表,看看是否能…...
鸿蒙UI开发——实现环形文字
1、背 景 有朋友提问:您好关于鸿蒙UI想咨询一个问题 如果我想实现展示环形文字是需要通过在Text组件中设置transition来实现么,还是需要通过其他方式来实现。 针对这位粉丝朋友的提问,我们做一下解答。 2、实现环形文字效果 ❓ 什么是环形…...
QT版发送邮件程序
简单的TCP邮箱程序 **教学与实践目的:**学会网络邮件发送的程序设计技术。 1.SMTP协议 邮件传输协议包括 SMTP(简单邮件传输协议,RFC821)及其扩充协议 MIME; 邮件接收协议包括 POP3 和功能更强大的 IMAP 协议。 服务…...
JavaSE:初识Java(学习笔记)
java是高级语言的面向对象语言 .[最贴近生活.最快速分析和设计程序] 一,计算机语言发展历史 二,Java体系结构 1,JavaSE(Java Standard Edition) 标准版,定位在个人计算机上的应用 这个版本是Jav…...
ClickHouse创建分布式表
ClickHouse创建分布式表 当数据量剧增的时候,clickhouse是采用分片的方式进行数据的存储的,类似于redis集群的实现方式。然后想进行统一的查询的时候,因为涉及到多个本地表,可以通过分布式表的方式来提供统一的入口。由于是涉及到…...
Flink转换算子
Apache Flink 是一个用于处理无界和有界数据的开源流处理框架。在 Flink 中,转换(Transformation)是数据流处理的核心组件之一,它们定义了如何从输入数据集生成输出数据集。以下是 Flink 中一些常见的转换算子: Map: 将…...
ThinkBook 14+ 2024 Ubuntu 触控板失效 驱动缺失问题解决
首先我的电脑是thinkbook14 2024,从ubuntu18到ubuntu24,笔者整个都试了一遍,触摸板都没反应,确认不是linux系统内核问题,原因为驱动缺失。 解决步骤: (1)下载驱动,网址如…...
【青牛科技】应用方案 | D75xx-150mA三端稳压器
概 述 D75XX系列是一套三端高电流低压稳压器。它们可以提供 150mA 的输出电流和允许输入电压高达30V。它们有几个固定的输出电压范围为3.0 V至5.0 V。CMOS 技术确保低电压降和低静态电流。 虽然这些设备主要设计为固定电压调节器,但它们可以与外部元件一起使用&…...
WPF之iconfont(字体图标)使用
1,前文: WPF的Xaml是与前端的Html有着高度相似性的标记语言,所以Xaml也可同Html一般轻松使用阿里提供的海量字体图标,从而有效的减少开发工作度。 2,下载字体图标: 登录阿里图标库网iconfont-阿里巴巴矢量…...
08、Java学习-面向对象中级:
Java学习第十二天——面向对象中级: IDEA: 创建完新项目后,再src里面创建.java文件进行编写。 src——存放源码文件(.java文件);out——存放编译后的字节码文件(.class文件) 在I…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Xela矩阵三轴触觉传感器的工作原理解析与应用场景
Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知,帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量,能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度,还为机器人、医疗设备和制造业的智…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
