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可…

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

文章目录 1 原理图2 说明3 相关面试题3.1 面试题13.2 面试题23.3 面试题33.4 面试题4 1 原理图 2 说明 JS 中用来存储待执行回调函数的队列包含 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…

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…

Js — 定时器

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

其他教程:如何设计一个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;跨平台使…

【开发】Java的内存溢出

Java之内存溢出 Java之内存溢出 | OutOfMemoryError 我们都知道&#xff0c;在Java的世界里&#xff0c;由JVM管理着Java中的“垃圾对象”&#xff0c;也就是不被引用的对象&#xff1b;当一个对象不被其它对象引用的时候&#xff0c;该对象就会被垃圾回收器清理掉。但是在某些…

EasyExcel的AbstractColumnWidthStyleStrategy注入CellStyle不生效

设置背景色 CellStyle style workbook.createCellStyle();style.setFillForegroundColor(IndexedColors.RED.getIndex()); // 是设置前景色不是背景色style.setFillPattern(FillPatternType.SOLID_FOREGROUND)EasyExcel.writerTable(0).head(Head1.class).registerWriteHandl…

【51单片机】LED点阵屏 原理 + 使用

学习使用的开发板&#xff1a;STC89C52RC/LE52RC 编程软件&#xff1a;Keil5 烧录软件&#xff1a;stc-isp 开发板实图&#xff1a; 文章目录 LED点阵屏显示原理74HC595 编码LED点阵屏显示笑脸LED点阵屏显示动画 LED点阵屏 点阵屏在开发板的右上角&#xff0c;注意使用前需要…

深度学习-张量相关

一. 张量的创建 张量简介 张量是pytorch的基本数据结构 张量&#xff0c;英文为Tensor&#xff0c;是机器学习的基本构建模块&#xff0c;是以数字方式表示数据的形式。 例如&#xff0c;图像可以表示为形状为 [3, 224, 224] 的张量&#xff0c;这意味着 [colour_channels, h…

使用vite构建一个react网站,并部署到Netlify上

这篇教程中&#xff0c;我会教你如何用vite快速构建一个react网站&#xff0c;并把网站免费部署到Netlify上&#xff0c;让别人可以经由网址访问你的react网站。 1. 使用vite构建基础框架 npm create vitelatestcd vite-project npm install npm run dev2. 网站内容设计 3. 构…

Fastify Swagger:自动化API文档生成与展示

在现代软件开发中&#xff0c;API文档的生成和维护是一个不可或缺的环节。Fastify Swagger 是一个专为 Fastify 框架设计的插件&#xff0c;它能够自动生成符合 Swagger&#xff08;OpenAPI v2 或 v3&#xff09;规范的文档&#xff0c;从而帮助开发者轻松创建和维护API文档。本…