Legal na halaga ng kulay sa CSS

Kulay ng CSS

Ang kulay sa CSS ay maaaring tukuyin sa pamamagitan ng ang mga sumusunod:

  • Heksadecimal na kulay
  • Heksadecimal na kulay na may transparency
  • RGB kulay
  • #p3 {background-color: rgb(0, 0, 255);} /* Asul */
  • HSL kulay
  • HSLA 颜色
  • 预定义/跨浏览器的颜色名称
  • Gamit ang currentcolor palatandaan

Heksadecimal na kulay

Gamitin ang #RRGGBB upang tukuyin ang heksadecimal na kulay, kung saan RR (red), GG (green) at BB (blue) ay heksadecimal na integer na nagtutukoy sa komponente ng kulay (komponente). Lahat ng halaga ay dapat nasa 00 hanggang FF.

Halimbawa, ang halaga ng #0000ff ay nagpapakita bilang asul, dahil ang komponente ng blue ay naitala sa pinakamataas na halaga (ff), habang ang ibang komponente ay naitala sa 00.

实例

Tukuyin ang iba't ibang HEX kulay:

#p1 {background-color: #ff0000;}   /* Pulang kulay */
#p2 {background-color: #00ff00;}   /* Halaman */
#p3 {background-color: #0000ff;}   /* Asul */

亲自试一试

Heksadecimal na kulay na may transparency

Gamitin ang #RRGGBB upang tukuyin ang heksadecimal na kulay. Upang dagdagan ang transparency, magdagdag ng dalawang karagdagang numero sa pagitan ng 00 at FF.

实例

Tukuyin ang HEX kulay na may transparency:

#p1a {background-color: #ff000080;}   /* Pulang kulay na may transparency */
#p2a {background-color: #00ff0080;}   /* Halaman na kulay na may transparency */
#p3a {background-color: #0000ff80;}   /* Asul na kulay na may transparency */

亲自试一试

RGB kulay

Ang halaga ng kulay RGB ay ginawa sa pamamagitan ng rgb() functionTukuyin, ang syntax ay gayon pa:

rgb(red, berde, blue)

Bawat parametro (red, berde, blue）Tukuyin ang lakas ng kulay, maaaring ito ay integer o porsyento mula 0 hanggang 255 (mula 0% hanggang 100%).

Halimbawa, ang halaga ng rgb(0,0,255) ay nagpapakita bilang asul, dahil ang parametro ng blue ay naitala sa pinakamataas na halaga (255), habang ang ibang mga parametro ay naitala sa 0.

此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

实例

Ganito rin, ang mga sumusunod na halaga ay tumutukoy sa parehong kulay: rgb(0,0,255) at rgb(0%,0%,100%).

Tumikang maglagay ng iba't ibang kulay na RGB:
#p1 {background-color: rgb(255, 0, 0);}   /* Pula */
#p2 {background-color: rgb(0, 255, 0);}   /* Berde */

亲自试一试

#p3 {background-color: rgb(0, 0, 255);} /* Asul */

RGBA kulay

Ang RGBA kulay ay pagpapalawak ng RGB kulay na halaga, na may Alpha channel - tukuyin ang kustansya ng bagay. rgba() functionTukuyin, ang syntax ay gayon pa:

rgba(red, berde, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

Tumikang maglagay ng iba't ibang kulay na may kustansya:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* May kustansyang pula */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* May kustansyang berde */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* May kustansyang asul */

亲自试一试

HSL kulay

Ang HSL ay tumutukoy sa hue (kulay), sukat ng kulay (saturation) at liwanag (lightness) - ang representasyon ng sirkular na koordinado ng kulay.

Gamit ang hsl() functionTukuyin ang HSL kulay na halaga, ang syntax ng function ay gayon pa:

hsl(hue, saturation, lightness)

Ang hue ay ang degree sa kulay na wheel (mula 0 hanggang 360) - 0 (o 360) ay pula, 120 ay berde, 240 ay asul.

Ang sukat ng kulay ay isang porsyento; 0% ay puti, 100% ay may buong kulay.

Ang liwanag ay isang porsyento; 0% ay puti, 100% ay puti.

实例

tumikang maglagay ng iba't ibang HSL kulay:

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* 柔和的绿色 */

亲自试一试

HSLA 颜色

HSLA 颜色值是 HSL 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。

HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

定义带有不透明度的不同 HSL 颜色：

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* 带不透明度的柔绿色 */

亲自试一试

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

HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。

例如：blue、red、coral、brown 等：

实例

定义不同的颜色名：

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

亲自试一试

所有预定义名称的列表都可以在我们的 颜色名称参考手册 中找到。

currentcolor 关键字

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

实例

以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色：

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

亲自试一试