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.xdnf.cn/news/9199.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

基于 RNN 的语言模型

基于 RNN 的语言模型 循环神经网络(Recurrent Neural Network, RNN)是一类网络连接中包含环路的 神经网络的总称。 给定一个序列,RNN 的环路用于将历史状态叠加到当前状态上。沿着时间维度,历史状态被循环累积,并作为…

【软考网工笔记】网络基础理论——物理层

文章目录 贝尔系统 T1 载波光纤 - SFP接口差分&&曼彻斯特编码网桥MAC-in-MACQ-in-QIPv6的链路本地地址CRC校验与计算E1载波编码效率对称xDSL坚持算法-CSMAUDP头部字段万兆以太网标准 IEEE 802.3ae海明码-纠错码ARP帧中的目标MAC地址快速以太区网物理层标准 100BASE-TXM…

现代Web开发:TypeScript 深入解析与最佳实践

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 现代Web开发:TypeScript 深入解析与最佳实践 现代Web开发:TypeScript 深入解析与最佳实践 现代Web开发&a…

HCIP MPLS基础

一、 实验拓扑 二、 实验需求及解法 本实验模拟BGP路由黑洞环境,使用MPLS LDP解决路由黑洞。 完成以下需求: 1.设备IP地址配置,请测试直连。 sysname R1 interface GigabitEthernet0/0/0ip address 12.1.1.1 255.255.255.0interface Loop…

Kubernetes架构及核心组件

一、基本架构 Kubernetes集群可以被看作是一个工厂,而各个组件则是这个工厂里的不同部门: Kubernetes API服务器:就像是这个工厂的总经理,负责接收所有的请求并将它们分配给相应的部门进行处理。 etcd:就像是这个工厂的记事本,负责记录所有的配置信息和状态信息,以便其…

移动开发(七):.NET MAUI使用RESTAPI实现查询天气笔记

目录 一、接口准备 二、实体部分 三、页面部分 四、后台代码逻辑 五、总结 在移动开发过程中,第三方对接是非常常见的。今天给大家分享.NET MAUI如何使用REST API实现输入城市名称查询天气的示例,希望对大家学习.NET MAUI可以提供一些帮助! 一、接口准备 首先我们需要…

聊聊基于BERT模型实现多标签分类任务的实践与思考

概述 以预训练大模型为基座神经网络模型,通过模型预训练后的泛化能力与微调后的领域能力,作为NLP任务的解决方案。 在github上找了一个简单的仓库——multi_label_classification,该仓库基于BERT预训练大模型实现了多分类任务。通过对该仓库…

C语言 【大白话讲指针(中)】

在之前的文章中我们已经知道了指针的概念,指针就是一个变量,用来存放地址,地址指向唯一一块内存空间。指针的大小是固定的4/8个字节(32为机器/64位机器)。指针是有类型的,指针的类型决定了指针加减整数的步…

大数据分析在市场营销中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 大数据分析在市场营销中的应用 大数据分析在市场营销中的应用 大数据分析在市场营销中的应用 引言 大数据分析概述 定义与原理 发…

启明云端触觉智能与您相约2024年慕尼黑国际电子元器件博览会,不见不散!

展会信息 展会日期: 2024年11月12-15日 展馆名称: 慕尼黑国际展览中心 MesseMnchen exhibition center 展馆地址: Messegelnde 81829 Mnchen Germany 启明云端&触觉智能展位号:B6-351 诚邀您莅临我司展位,让我们在慕尼黑不见不散! …

OPPO开源Diffusion多语言适配器—— MultilingualSD3-adapter 和 ChineseFLUX.1-adapter

MultilingualSD3-adapter 是为 SD3 量身定制的多语言适配器。 它源自 ECCV 2024 的一篇题为 PEA-Diffusion 的论文。ChineseFLUX.1-adapter是为Flux.1系列机型量身定制的多语言适配器,理论上继承了ByT5,可支持100多种语言,但在中文方面做了额…

【JavaEE初阶】网络原理(4)

欢迎关注个人主页:逸狼 创造不易,可以点点赞吗~ 如有错误,欢迎指出~ 目录 网络层 > IP协议 IP协议报头结构 4位版本 4位首部长度 8位服务类型(TOS) 16位总长度(字节数), 16位标识 3位标志位 13位片偏移 8位生存时间(TTL) 8位协议 16位首部…

树莓派上安装与配置 Nginx Web 服务器教程

在树莓派上配置 Nginx 作为 Web 服务器的步骤如下: 1. 更新树莓派 首先,确保你的树莓派系统是最新的。打开终端并执行以下命令: sudo apt update sudo apt upgrade -y2. 安装 Nginx 在树莓派上安装 Nginx: sudo apt install …

Android Studio 中关于com.github.barteksc:android-pdf-viewer 无法正确加载的问题

Android Studio 的app 模块下,添加依赖: implementation com.github.barteksc:android-pdf-viewer:3.2.0-beta.1 运行程序报错: Caused by: org.gradle.api.internal.artifacts.ivyservice.DefaultLenientConfiguration$ArtifactResolveEx…

[JAVA]Maven项目标准结构介绍

什么是Maven? Maven 是一个强大的项目管理和构建自动化工具,在Java开发中,一个项目通常会依赖许多外部的库,比如开发一个Web应用可能需要依赖Servlet APL,Spring框架等,和需要引入大量的Jar包。往往一个Ja…

Ansys EMC Plus:MHARNESS 串扰演示

Ansys EMC Plus 是一款强大的工具,专门用于分析电磁场及其影响,涵盖电磁兼容性和雷电效应分析等领域。 在本演示中,我们将探讨建立 MHARNESS 仿真的基础知识。这包括构建基本电缆线束、创建 MHARNESS 源和设置 MHARNESS 探针的过程。 概述 …

星环大数据平台--TDH部署

1.1 准备一台虚拟机 正常安装一台新的虚拟机, 内存16G,cpu8核,硬盘50G 1.2 安装前系统配置改动 修改/etc/hosts文件,确保hostname该文件包含节点的hostname和IP地址的映射关系列表。 hostname由数字、小写字母或“-”组成&am…

B+树与聚簇索引以及非聚簇索引的关系

B树、聚簇索引和非聚簇索引是数据库系统中非常重要的概念,它们共同决定了数据的存储和查询效率。本文将详细解释B树的结构,以及聚簇索引和非聚簇索引的区别和联系,使读者能够更好地理解这些概念。 1.B树简介 B树是一种多路平衡树,…

IoTDB 与 HBase 对比详解:架构、功能与性能

五大方向,洞悉 IoTDB 与 HBase 的详尽对比! 在物联网(IoT)领域,数据的采集、存储和分析是确保系统高效运行和决策准确的重要环节。随着物联网设备数量的增加和数据量的爆炸式增长,开发者和决策者们需要选择…

了解RSA和DSA的联系和区别

引言 在信息安全领域,加密算法起着至关重要的作用。RSA(Rivest-Shamir-Adleman)和DSA(Digital Signature Algorithm)是两种常见的公钥加密算法,它们在网络安全领域具有重要的应用价值。本文将对比分析RSA和…