主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

CSS 颜色

CSS 提供了多种方式来指定颜色值,以下是主要的合法颜色值表示方法:

  • 预定义/跨浏览器的颜色名
  • 十六进制颜色和带透明度的十六进制颜色
  • RGB 和 RGBA 颜色值
  • HSL 和 HSLA 颜色值
  • 使用currentcolor关键字

预定义/跨浏览器的颜色名

HTML和CSS颜色规范中预定义了140个颜色名称,可以在我们的颜色名参考中查看所有预定义名称。

常用颜色关键字:blackwhiteredgreenblueyellowcyangraymaroonpurple等。

.p1 {background-color: MediumPurple;}
.p2 {background-color: MediumSeaGreen;}
.p3 {background-color: DodgerBlue;}
.p4 {background-color: Peru;}

颜色演示效果:

  • MediumSeaGreen
  • MediumSeaGreen
  • DodgerBlue
  • Peru

十六进制颜色值

格式: #RRGGBB#RGB(简写),十六进制颜色值不区分大小写。

  • 6位格式:#后跟6个十六进制数字(0-9, A-F),前两位RR表示红色,中间两位GG表示绿色,后两位BB表示蓝色。
  • 3位简写:当每对数字相同时可以简写为3位,如#00ff33可以简写为#0f3
.p1 {background-color: #9370DB;}
.p2 {background-color: #3CB371;}
.p3 {background-color: #1E90FF;}
.p4 {background-color: #CD853F;}

颜色演示效果:

  • #9370DB;
  • #3CB371;
  • #1E90FF;
  • #CD853F;

带透明度的十六进制颜色值

格式: #RRGGBBAA#RGBA(简写),前6位是标准的RGB十六进制值,后2位表示透明度(alpha通道)。

透明度(alpha通道)中,00表示完全透明,FF表示完全不透明。

.p1 {background-color: #9370DB33;}
.p2 {background-color: #3CB37166;}
.p3 {background-color: #1E90FF99;}
.p4 {background-color: #CD853FBB;}

颜色演示效果:

  • #9370DB33;
  • #3CB37166;
  • #1E90FF99;
  • #CD853FBB;

RGB 颜色值

RGB 颜色值由rgb(red, green, blue)函数设置,每个参数取值 0-255 或 0%-100%。

.p1 {background-color: rgb(147,112,219);}
.p2 {background-color: rgb(60,179,113);}
.p3 {background-color: rgb(30,144,255);}
.p4 {background-color: rgb(205,133,63);}

颜色演示效果:

  • rgb(147,112,219);
  • rgb(60,179,113);
  • rgb(30,144,255);
  • rgb(205,133,63);

RGBA 颜色值

RGBA 是 RGB 颜色值的扩展,rgba(red, green, blue, alpha)函数设置,带有 Alpha 通道指定不透明度。

.p1 {background-color: rgba(147,112,219,0.2);}
.p2 {background-color: rgba(60,179,113,0.4);}
.p3 {background-color: rgba(30,144,255,0.6);}
.p4 {background-color: rgba(205,133,63,0.8);}

颜色演示效果:

  • rgba(147,112,219,0.2);
  • rgba(60,179,113,0.4);
  • rgba(30,144,255,0.6);
  • rgba(205,133,63,0.8);

HSL 颜色值

HSL 颜色值由hsl(hue, saturation, lightness)函数设置,指的是色相(hue)、饱和度(saturation)和亮度(lightness)。

  • hue:色相(0-360)
  • saturation:饱和度(0%-100%)
  • lightness:亮度(0%-100%)
.p1 {background-color: hsl(259.63,59.78% 64.9%);}
.p2 {background-color: hsl(146.72,49.79%,46.86%);}
.p3 {background-color: hsl(209.6,100%,55.88%);}
.p4 {background-color: hsl(29.58,58.68%,52.55%);}

颜色演示效果:

  • hsl(259.63,59.78%,64.9%);
  • hsl(146.72,49.79%,46.86%);
  • hsl(209.6,100%,55.88%);
  • hsl(29.58,58.68%,52.55%);

HSLA 颜色值

HSLA 是 HSL 颜色值的扩展,hsla(hue, saturation, lightness, alpha)函数设置,带有 Alpha 通道指定不透明度。

.p1 {background-color: hsla(259.63,59.78%,64.9%,0.3);}
.p2 {background-color: hsla(146.72,49.79%,46.86%,0.4);}
.p3 {background-color: hsla(209.6,100%,55.88%,0.6);}
.p4 {background-color: hsla(29.58,58.68%,52.55%,0.8);}

颜色演示效果:

  • hsla(259.63,59.78%,64.9%,0.3);
  • hsla(146.72,49.79%,46.86%,0.4);
  • hsla(209.6,100%,55.88%,0.6);
  • hsla(29.58,58.68%,52.55%,0.8);

currentColor 关键字

currentColor关键字引用元素的color属性值。

.p1 {
    color: #0077ff;
    border: 2px solid currentColor; /* 边框颜色与文字颜色相同 */
}

颜色演示效果:

color: blue;
border: 2px solid currentColor;


评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
95 章节
133 阅读
0 评论
教程目录

CSS 参考手册

CSS 属性(字母排序) CSS 属性(功能排序) CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 可动画性 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值

CSS 属性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-start-end-radius border-start-start-radius border-top-left-radius border-top-right-radius border-top-style