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.rhkb.cn/news/465146.html

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

相关文章

STM32——ADC

目录 1、ADC的介绍 2、ADC主要特征 3、ADC结构与引脚 4、ADC配置流程 5、示例(光敏电阻的ADC采样) 6、提示 7、结语: 1、ADC的介绍 12位ADC是一种逐次逼近型模拟数字转换器。它有多达18个通道,可测量16个外部和2个内部 信号…

Node.js——fs模块-同步与异步

本文的分享到此结束,欢迎大家评论区一同讨论学习,下一篇继续分享Node.js的fs模块文件追加写入的学习。

Python | Leetcode Python题解之第528题按权重随机选择

题目: 题解: class Solution:def __init__(self, w: List[int]):self.pre list(accumulate(w))self.total sum(w)def pickIndex(self) -> int:x random.randint(1, self.total)return bisect_left(self.pre, x)

道品科技的水肥一体化智能灌溉:开启现代农业的创新征程

水肥一体化智能灌溉作为一种现代农业技术,其通过对水分与养分供应的有效整合,致力于营造作物的最佳生长环境。此项技术的核心要义在于凭借智能化系统精准把控灌溉与施肥的流程,进而提升水资源的利用效率,降低肥料的浪费程度&#…

GitHub个人主页美化

效果展示 展示为静态效果,动态效果请查看我的GitHub页面 创建GitHub仓库 创建与GitHub用户名相同的仓库,当仓库名与用户名相同时,此仓库会被视作特殊仓库,其README.md(自述文件)会展示在GitHub个人主页…

QT5串口多线程--派生类加moveToThread

QT5串口多线程--派生类加moveToThread Chapter1 QT5串口多线程--派生类加moveToThread前言新建工程源码serialobject.hserialobject.cppmanager.hmanager.cppwidget.hwidget.cpp 测试 Chapter2 QT在PC开发中多串口通信有哪些方法方法实现方案一:需要注意的是&#x…

框架学习01-Spring

一、Spring框架概述 Spring是一个开源的轻量级Java开发框架,它的主要目的是为了简化企业级应用程序的开发。它提供了一系列的功能,包括控制反转(IOC)、注入(DI)、面向切面编程(AOP)…

十年码农的编程心得分享

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

【网络安全】|nessus使用

1、扫描结果分析: Sev:漏洞的严重性级别 CVSS:量化漏洞严重性的标准,通过计算得出一个分数,分数越高表示漏洞越严重。 VPR:基于风险的评分系统,帮助组织优先处理风险最高的漏洞。 EPSS&#xf…

为什么越来越多人开始用云电脑?网友道出了真相

近期,3A游戏大作《黑神话:悟空》的横空出世,成功激起大多数人对国产游戏的兴趣。然而,没有一台高配置的电脑,就无法在《黑神话:悟空》中获得震撼的游戏体验。想要配齐处理器、显卡、内存等硬件,…

W6100-EVB-Pico2评估板介绍

目录 1 简介 2 硬件资源 2.1 硬件规格 2.2 引脚定义 2.3 工作条件 3 参考资料 3.1 RP2350 数据表 3.2 W6100 数据表 3.3 原理图 原理图 & 物料清单 & Gerber 文件 3.3 尺寸图(尺寸:mm) 3.4 参考例程 认证 CE FCC 4 硬…

VUE2升级成VUE3的优化与区别

大家好,我是小编阿贤。欢迎各位大神关注《全栈技术圈》,让技术更加简单易懂。 1. vue2和vue3实例区别 1.1 创建一个vue2实例 在vue2里面的Vue是一个构造函数,通过该构造函数创建一个Vue实例,data选项可以是对象,也可以…

ProLightsfx新的出发–从CSDN到WordPress

原文链接:ProLightsfx新的出发--从CSDN到WordPress_ProLightsfx的技术分享 (https://www.prolightsfxjh.com/article/article-new-start/) 大概有差不多2年时间没有在csdn发布文章了。可能主要是最近几年工作有些疲惫、精神有些懈怠&#xff…

「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。 关键词 自定义动画动画路径贝塞尔曲…

GPIO子系统中Controller驱动源码分析

往期内容 本专栏往期内容: Pinctrl子系统和其主要结构体引入Pinctrl子系统pinctrl_desc结构体进一步介绍Pinctrl子系统中client端设备树相关数据结构介绍和解析inctrl子系统中Pincontroller构造过程驱动分析:imx_pinctrl_soc_info结构体Pinctrl子系统中c…

【Linux系统编程】第四十二弹---多线程编程全攻略:涵盖线程创建、异常处理、用途、进程对比及线程控制

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、线程创建 2、线程异常 3、线程用途 4、进程 VS 线程 5、线程控制 5.1、创建和等待线程 1、线程创建 线程能看到进程的大…

Qt入门基础分享

文章目录 学习 Qt 语言之前的基本知识1. 编程基础语法:面向对象编程(OOP):基本数据结构:了解数组、链表、栈、队列、树(如二叉树、平衡树)、图(如邻接矩阵、邻接表)等。算法:熟悉常见的排序算法(如快速排序、归并排序、冒泡排序)和查找算法(如线性查找、二分查找)…

超萌!HTMLCSS:超萌卡通熊猫头

效果演示 创建了一个卡通风格的熊猫头 HTML <div class"box"><div class"head"><div class"head-copy"></div><div class"ears-left"></div><div class"ears-right"></di…

使用 AMD GPU 的 ChatGLM-6B 双语语言模型

Using the ChatGLM-6B bilingual language model with AMD GPUs — ROCm Blogs 2024 年 4 月 4 日&#xff0c;作者&#xff1a; Phillip Dang. ChatGLM-6B 是一个开源的中英双语语言模型&#xff0c;拥有 62 亿参数。它基于通用语言模型 (GLM) 架构&#xff0c;针对中文对话进…

计算并联电阻的阻值

计算并联电阻的阻值 C语言代码C代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 对于阻值为r1和r2的电阻&#xff0c;其并联电阻阻值公式计算如下&#xff1a; R1/(1/r11/r2) 输入 两个电阻阻抗大小&#xff0c;浮…