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来完成配色

在这里插入图片描述
按照我们的配色理论,移动取色的球就可以得到互补色或者相邻色,有两条最佳实践:

  1. 通常建议使用 2-4 种主要颜色,以保持设计的简洁性和一致性。过多的颜色可能会使设计显得杂乱无章
  2. 选择一种主色作为设计的基础,使用辅色来补充主色,并使用点缀色来突出重要元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/58891.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv11融合[ECCV2024]自调制特征聚合SMFA模块及相关改进思路|YOLO改进最简教程

YOLOv11v10v8使用教程: YOLOv11入门到入土使用教程 YOLOv11改进汇总贴:YOLOv11及自研模型更新汇总 《SMFANet: A Lightweight Self-Modulation Feature Aggregation Network for Efficient Image Super-Resolution》 一、 模块介绍 论文链接&#xff1…

数据库SQLite的使用

SQLite是一个C语言库,实现了一个小型、快速、独立、高可靠性、功能齐全的SQL数据库引擎。SQLite文件格式稳定、跨平台且向后兼容。SQLite源代码属于公共领域(public-domain),任何人都可以免费将其用于任何目的。源码地址:https://github.com/…

【大模型】Spring AI Alibaba 对接百炼平台大模型使用详解

目录 一、前言 二、Spring AI概述 2.1 spring ai是什么 2.2 Spring AI 核心能力 2.3 Spring AI 应用场景 三、Spring AI Alibaba 介绍 3.1 Spring AI Alibaba 是什么 3.2 Spring AI Alibaba 核心特点 3.3 Spring AI Alibaba 应用场景 四、SpringBoot 对接Spring AI Al…

Java:HTTP/HTTPS

HTTP HTTP(全称"超文本传输协议")是一种应用最广泛的应用层协议; 文本=>字符串 超文本:可以传输文本,图片,语言等等其他的各种数据... HTTP各种应用场景: 1.使用浏览器打开网页; 2.打开手机APP; 3.后端程序,都是"分布式/微服务"体系结构; HTTPS可…

android studio 把unversioned文件加入git

在Android Studio中把未版本化的文件纳入Git版本控制,你可以按照以下步骤操作: 打开Android Studio。 打开你的项目。 在项目视图中,右键点击你想要添加的未版本化的文件或文件夹。 在上下文菜单中选择"Add to VCS" -> "…

【Promise】JS 异步之宏队列与微队列

文章目录 1 原理图2 说明3 相关面试题3.1 面试题13.2 面试题23.3 面试题33.4 面试题4 1 原理图 2 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的队列:宏队列和微队列。宏队列:用来保存待执行的宏任务(回调),比如:定…

递推经典例题 - 爬楼梯

一、题目阅读 题目描述 一段楼梯有n级台阶。你每次可以跨一个、两个或者三个台阶。 请问走上n级台阶有几种方案?答案对998244353取模。 输入格式 一行一个数n。 输出格式 一行一个数,表示方案数。 样例 Input 1 3 Output 1 4 样例解释 1 1 1 3 1 2 …

用 Python 从零开始创建神经网络(二):第一个神经元的进阶

第一个神经元的进阶 引言1. Tensors, Arrays and Vectors:2. Dot Product and Vector Additiona. Dot Product (点积)b. Vector Addition (向量加法) 3. A Single Neuron with NumPy4. A Layer of Neurons with NumPy5…

【优选算法 — 滑动窗口】最大连续1的个数 将 x 减到0的最小操作数

最大连续1的个数 最大连续1的个数 题目描述 题目解析 给我们一个元素全是0或者1的数组&#xff0c;和一个整数 k &#xff0c;然后让我们在数组选出最多的 k 个0&#xff1b;这里翻转最多 k 个0的意思&#xff0c;是翻转 0 的个数< k&#xff0c;而不是一定要翻转 k …

各种排序分组

简易排序方法如下: public static void XX(){var circles Z.db.SelectEntities<Circle>();circles circles.OrderByDescending(x > x.Center.Y).ThenBy(x > x.Center.X).ToList();for (int i 0; i < circles.Count; i){DBText text new DBText() { Positi…

svgicon大小问题(简单记录

Prob.: reactts下用类似import XxxIcon from "../icons/xxx.svg语句之后使用< XxxICon >标签&#xff0c;不能直接用style指定大小 &#xff08;viewbox好像是有效的&#xff0c;height和width类似只改了画布大小&#xff0c;没缩放里面的path&#xff09; 过程: 前…

RK3288 android7.1 适配 ilitek i2c接口TP

一&#xff0c;Ilitek 触摸屏简介 Ilitek 提供多种型号的触控屏控制器&#xff0c;如 ILI6480、ILI9341 等&#xff0c;采用 I2C 接口。 这些控制器能够支持多点触控&#xff0c;并具有优秀的灵敏度和响应速度。 Ilitek 的触摸屏控制器监测屏幕上的触摸事件。 当触摸发生时&am…

DICOM图像知识:DICOM图像排序与坐标系解析

目录 引言 1. 概述 2. DICOM图像排序规则 2.1 Patient的Study按Study Date排序 2.2 Study的Series按Series Number排序 2.3 Series的SOP按Instance Number或Slice Location排序 2.3.1 Instance Number排序 2.3.2 Slice Location排序 2.3.3 使用Image Position (Patien…

Vector和ArrayList

Vector和ArrayList都是Java集合框架中的一部分&#xff0c;它们提供了动态数组的功能&#xff0c;但在实现和使用场景上存在一些差异。以下是对Vector和ArrayList的详细比较&#xff1a; 一、线程安全性 Vector&#xff1a; 是线程安全的。Vector类的所有方法都使用了synchron…

css多列布局用法

文章目录 CSS多列布局详解与代码案例一、CSS多列布局介绍特点 二、CSS多列布局的用法1. 列数和宽度控制2. 列间距和规则3. 跨列和分列内容4. 列宽度自动调整5. 垂直对齐 三、CSS多列布局的代码案例示例一&#xff1a;基础多列布局示例二&#xff1a;响应式多列布局 CSS多列布局…

Js — 定时器

有两种&#xff1a;setInterval 和 setTimeout 间隔时间单位为毫秒 setInterval 每隔指定的毫秒数重复执行一个函数或代码 开启定时器&#xff1a;setInterval(函数&#xff0c;间隔时间) 作用&#xff1a;每隔一段时间调用这个函数 注意&#xff1a;它不是立即执行&#x…

【大数据测试spark+kafka-详细教程(附带实例)】

大数据测试&#xff1a;Spark Kafka 实时数据处理与窗口计算教程 1. 概述1.1 大数据技术概述1.2 Apache Kafka 与 Spark 的结合 2. 技术原理与流程2.1 Kafka 简介2.2 Spark Streaming 简介2.3 数据流动与处理流程 3. 环境配置3.1 安装依赖项 4. 实例&#xff1a;实时数据处理与…

其他教程:如何设计一个App扫码登录功能,来实现免账号密码登录功能,仅供参考

–本次教程是给大家列举一下常见的扫码登录功能&#xff0c;小程序或app均可参考&#xff0c;如需更安全的模式可多次设计加工&#xff0c;本次只列举概念层面的实现方式

ChatGPT键盘快捷键(按ctrl + /呼出)

文章目录 ChatGPT键盘快捷键- 打开新聊天: Ctrl Shift O- 聚焦聊天输入: Shift Esc- 复制最后一个代码块: Ctrl Shift ;- 复制最后一个回复: Ctrl Shift C- 设置自定义指令: Ctrl Shift I- 切换边栏: Ctrl Shift S- 删除聊天: Ctrl Shift ⌫- 显示快捷方式: Ctrl …

AWTK-HarmonyOS NEXT 发布

AWTK 全称为 Toolkit AnyWhere&#xff0c;是 ZLG 倾心打造的一套基于 C 语言开发的 GUI 框架。旨在为用户提供一个功能强大、高效可靠、简单易用、可轻松做出炫酷效果的 GUI 引擎&#xff0c;支持跨平台同步开发&#xff0c;一次编程&#xff0c;到处编译&#xff0c;跨平台使…