HOW - CSS 定义颜色值

目录

  • 1. 十六进制颜色 (Hexadecimal Color)
  • 2. RGB 颜色 (RGB Color)
  • 3. HSL 颜色 (HSL Color)
    • HSL 颜色模式
    • 示例
  • 4. 预定义颜色名 (Named Colors)
  • 5. LCH 颜色 (LCH Color)
  • 6. Lab 颜色 (Lab Color)
  • 7. HWB 颜色 (HWB Color)
  • 8. CSS 颜色函数 (Color Function)
  • 9. CSS4 颜色模块中的其他函数
  • 示例总结

CSS 支持多种方式定义颜色值。以下是常用的几种颜色定义方式:

1. 十六进制颜色 (Hexadecimal Color)

使用十六进制表示红、绿、蓝三原色。

  • 简写形式(如果每个颜色分量是两个相同的字符):

    color: #f00; /* 红色 */
    
  • 完整形式:

    color: #ff0000; /* 红色 */
    

2. RGB 颜色 (RGB Color)

使用 rgb() 函数,定义红、绿、蓝三个分量的颜色,范围从 0 到 255。

  • 不透明的 RGB:

    color: rgb(255, 0, 0); /* 红色 */
    
  • 透明的 RGBA:

    color: rgba(255, 0, 0, 0.5); /* 50% 透明的红色 */
    

3. HSL 颜色 (HSL Color)

使用 hsl() 函数,定义色调、饱和度和亮度。

  • 不透明的 HSL:

    color: hsl(0, 100%, 50%); /* 红色 */
    
  • 透明的 HSLA:

    color: hsla(0, 100%, 50%, 0.5); /* 50% 透明的红色 */
    

hsl 是一种颜色表示方式,表示色调 (Hue)、饱和度 (Saturation) 和亮度 (Lightness)。与传统的 RGB 颜色表示方式不同,HSL 更接近人类对颜色的感知方式。

HSL 颜色模式

HSL 是一种基于色相、饱和度和亮度来表示颜色的模式:

  • Hue (色调): 色调是指颜色的种类,表示为 0 到 360 之间的角度值。例如:

    • 0° 是红色
    • 120° 是绿色
    • 240° 是蓝色
  • Saturation (饱和度): 饱和度表示颜色的鲜艳程度,范围从 0% 到 100%。0% 是灰色,100% 是全色。

  • Lightness (亮度): 亮度表示颜色的明暗程度,范围从 0% 到 100%。0% 是黑色,100% 是白色。

示例

例如,HSL 值为 hsl(240, 100%, 50%) 表示的是一个纯蓝色,色调为 240°,饱和度为 100%,亮度为 50%。

4. 预定义颜色名 (Named Colors)

使用 CSS 提供的预定义颜色名。

  • 示例:
    color: red; /* 红色 */
    color: blue; /* 蓝色 */
    color: lightgray; /* 浅灰色 */
    

5. LCH 颜色 (LCH Color)

使用 lch() 函数,定义亮度(Lightness)、色度(Chroma)和色调(Hue)。

  • 示例:
    color: lch(50% 100 0); /* 大致为红色 */
    

6. Lab 颜色 (Lab Color)

使用 lab() 函数,定义亮度(Lightness)、a(从绿色到红色轴)和 b(从蓝色到黄色轴)。

  • 示例:
    color: lab(50% 50 0); /* 大致为蓝色 */
    

7. HWB 颜色 (HWB Color)

使用 hwb() 函数,定义色调(Hue)、白色量(Whiteness)和黑色量(Blackness)。

  • 示例:
    color: hwb(0 0% 0%); /* 红色 */
    color: hwb(240 0% 0%); /* 蓝色 */
    

8. CSS 颜色函数 (Color Function)

使用 color() 函数可以定义多种颜色空间的颜色,通常用于更高级的颜色操作和定义。

  • 示例:
    color: color(display-p3 1 0 0); /* 使用 Display-P3 色彩空间 */
    

9. CSS4 颜色模块中的其他函数

CSS4 颜色模块引入了更多颜色定义方法,如 oklch()oklab(),这些方法正在得到越来越多的支持。

  • 示例:
    color: oklch(0.5 0.2 0.2); /* 使用 OKLCH 颜色空间 */
    

示例总结

综合利用这些颜色定义方式,可以根据项目需求选择最合适的颜色表示方法。例如:

/* 十六进制颜色 */
color: #3498db;/* RGB 颜色 */
color: rgb(52, 152, 219);/* HSL 颜色 */
color: hsl(204, 70%, 53%);/* 预定义颜色名 */
color: steelblue;/* 透明的 RGBA 颜色 */
color: rgba(52, 152, 219, 0.5);/* LCH 颜色 */
color: lch(67.5345% 0.2372 264.6053);/* Lab 颜色 */
color: lab(67.5345% -24.2038 -44.5822);/* HWB 颜色 */
color: hwb(204 0% 0%);/* CSS4 颜色模块 */
color: color(display-p3 0.2 0.6 0.8);

每种方法都有其优势和适用场景,可以根据具体需求选择合适的方法来定义颜色。

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

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

相关文章

JavaScript(11)——对象

对象 声明: let 对象名 { 属性名:属性值, 方法名:函数 } let 对象名 new Object() 对象的操作 先创建一个对象 let op {name:jvav,id:4,num:1001} 查 对象名.属性 console.log(op.name) 对象名[属性名] 改 对象名.属性 新值 op.name …

Pytorch学习笔记day4——训练mnist数据集和初步研读

该来的还是来了hhhhhhhhhh,基本上机器学习的初学者都躲不开这个例子。开源,数据质量高,数据尺寸整齐,问题简单,实在太适合初学者食用了。 今天把代码跑通,趁着周末好好的琢磨一下里面的各种细节。 代码实…

Spring MVC的高级功能——拦截器(三)拦截器的执行流程

一、单个拦截器的执行流程 如果在项目中只定义了一个拦截器,单个拦截器的执行流程如图所示。 二、单个拦截器的执行流程分析 从单个拦截器的执行流程图中可以看出,程序收到请求后,首先会执行拦截器中的preHandle()方法,如果preHa…

bug诞生记——动态库加载错乱导致程序执行异常

大纲 背景问题发生问题猜测和分析过程是不是编译了本工程中的其他代码是不是有缓存是不是编译了非本工程的文件是不是调用了其他可执行文件查看CMakefiles分析源码检查正在运行程序的动态库 解决方案 这个案例发生在我研究ROS 2的测试Demo时发生的。 整体现象是:修改…

聊一聊前端动画的种类,以及动画的触发方式有哪些?

引言 动画在前端开发中扮演着重要的角色。它不仅可以提升用户体验,还可以使界面更加生动和有趣。在这篇文章中,我们将深入探讨前端动画的各种实现方式,包括 CSS 动画、JavaScript 动画、SVG 动画等。我们还将讨论一些触发动画的方式和动画在…

【MQTT(2)】开发一个客户端,ubuntu版本

基本流程如下,先生成Mosquitto的库,然后qt调用库进行开发界面。 文章目录 0 生成库1 有界面的QT版本2 无界面版本 0 生成库 下载源码:https://github.com/eclipse/mosquitto.git 编译ubuntu 版本很简单,安装官方说明直接make&am…

rk3568 OpenHarmony4.1 Launcher定制开发—桌面壁纸替换

Launcher 作为系统人机交互的首要入口,提供应用图标的显示、点击启动、卸载应用,并提供桌面布局设置以及最近任务管理等功能。本文将介绍如何使用Deveco Studio进行单独launcher定制开发、然后编译并下载到开发板,以通过Launcher修改桌面背景…

Webpack 5 Tree Shaking与Module Federation

Webpack是一个流行的JavaScript模块打包器,它在前端工程化中扮演着核心角色。Webpack 5引入了许多新特性,其中两个最值得关注的是Tree Shaking和Module Federation。这两个特性分别解决了代码体积优化和微前端架构的问题。接下来,我们将深入探…

记录|如何打包C#项目

参考文章: c#窗体应用程序怎么打包 经过检验确实有效 Step1. 生成发布文件 在Visual Studio的菜单中,找到“生成”->“发布” 第一次会有个向导,基本上一路next下来既可以 最后,点击完成即可以 Step2. 获得publish文件 自…

软考高级第四版备考--第28天(度量绩效域)

核心概念: 度量绩效域涉及评估项目绩效和采取应对措施相关的活动和职能; 有效执行此绩效域将产以下预期目标: 对项目状况充分理解;数据充分,可支持决策;及时采取行动,确保项目最佳绩效&#…

【JavaEE】AQS原理

本文将介绍AQS的简单原理。 首先有个整体认识,全称是 AbstractQueuedSynchronizer,是阻塞式锁和相关的同步器工具的框架。常用的ReentrantLock、Semaphore、CountDownLatch等都有实现它。 本文参考: 深入理解AbstractQueuedSynchronizer只需…

[C++]TinyWebServer

TinyWebServer 文章目录 TinyWebServer1 主体框架2 Buffer2.1 向Buffer写入数据2.2 从Buffer读取数据2.3 动态扩容2.4 从socket中读取数据2.5 具体实现 3 日志系统3.1 生产者-消费者模型3.2 数据一致3.3 代码 4 定时器4.1 调整堆中元素操作4.2 堆的操作4.2.1 增4.2.2 删4.2.3 改…

【AI资讯早报】AI科技前沿资讯概览:2024年7月23日早报

【AI资讯早报,感知未来】AI科技前沿资讯概览,涵盖了行业大会、技术创新、应用场景、行业动态等多个方面,全面展现了AI领域的最新发展动态和未来趋势。 1.阿里巴巴发布ESG报告,AI赋能医疗与助老助残 2024年7月22日,阿里…

ElasticSearch-分词器介绍

Analysis Analysis文本分析,也叫分词,是把全文本转换为一系列单词的过程。 Analyzer的组成 通常Analyzer由三个部分组成。 Character Filters:针对原始文本处理,例如去除html标签等。Tokenizer:按照一定的规则&…

微信小程序-应用,页面和组件生命周期总结

情景1:小程序冷启动时候的顺序 情景2: 使用navigator(保留并打开另一个页面)和redirect(关闭并打开另一个页面)的执行顺序 情景3:切后台和切前台

Linux——组管理和权限管理

目录 组管理 Linux 组基本介绍 文件/目录所有者 组的创建 查看&修改文件/目录所在组 改变用户所在组 权限管理 基本介绍 rwx 文件/目录权限详解 chmod 修改文件或目录权限 chown 修改文件所有者 组管理 Linux 组基本介绍 关于第二张图中问题,答案…

windows11 ,ubuntu20.04双系统,ubuntu没有wifi的解决方式

Ubuntu20系统安装完后没有WIFI_modprobe:error:could not insert 8852be:invalid a-CSDN博客 ubuntu 20.04 设置国内镜像源(阿里源、清华源)_ubuntu 20.04 镜像源-CSDN博客 Ubuntu20.04无法直接连接无线网络 解决方法_ubuntu20.04连接wifi-CSDN博客 …

Linux下如何使用GitLab进行团队协作

在Linux系统中,使用GitLab进行团队协作是非常常见的做法。GitLab是一个基于Git的代码托管和项目管理平台,可以帮助团队成员共享、追踪和管理代码的开发过程。本文将介绍如何在Linux系统中安装和配置GitLab,以及一些常用的团队协作功能。 安装…

【Qt】Qt的坐标转换(mapToGlobal)

1、QPoint QWidget::mapToGlobal(const QPoint &pos) const 将小部件坐标转换为全局坐标。mapToGlobal(QPoint(0,0))可以得到小部件左上角像素的全局坐标。2、QPoint QWidget::mapToParent(const QPoint &pos) const 将小部件坐标转换为父部件坐标。如果小部件没有父部…

Jmeter之count函数

counter函数 1、功能解释 count函数--计数器,每调用这个函数一次,它就会自动加1。它有两个参数,第一个参数是布尔型的,只能设置成 “TRUE”或者“FALSE”,如果是TRUE,那么每个用户有自己的计数器&#xf…