CSS-sopivat väriarvot

CSS värit

CSS-värit voidaan määritellä seuraavilla tavoilla:

  • Heksadesimaaliväri
  • Transparenssilla varustettu heksadesimaaliväri
  • RGB-väri
  • RGBA-värit
  • HSL-värit
  • HSLA 颜色
  • 预定义/跨浏览器的颜色名称
  • Käytä currentcolor Avainsana

Heksadesimaaliväri

Määritellään heksadesimaaliväri #RRGGBB, jossa RR (punainen), GG (vihreä) ja BB (sininen) heksadesimaaliluvut määrittelevät värikomponentit (komponentit). Kaikki arvot täytyy olla välillä 00-FF.

Esimerkiksi, arvo #0000ff näyttää siniseltä, koska sininen osa on asetettu korkeimmalle arvolle (ff), ja muut osat asetettu 00:een.

实例

Määritellään erilaisia HEX-värejä:

#p1 {background-color: #ff0000;}   /* Punainen */
#p2 {background-color: #00ff00;}   /* Vihreä */
#p3 {background-color: #0000ff;}   /* Sininen */

Kokeile itse

Transparenssilla varustettu heksadesimaaliväri

Määritellään heksadesimaaliväri #RRGGBB. Jos haluat lisätä läpinäkyvyyttä, lisää kaksi ylimääräistä numeroa 00 ja FF välille.

实例

Määritellään transparenssilla varustettu HEX-väri:

#p1a {background-color: #ff000080;}   /* Transparenssilla varustettu punainen */
#p2a {background-color: #00ff0080;}   /* Transparenssilla varustettu vihreä */
#p3a {background-color: #0000ff80;}   /* Transparenssilla varustettu sininen */

Kokeile itse

RGB-väri

RGB-väriarvon muodostaa rgb()-funktioMääritä, syntaksi on seuraava:

rgb(red, vihreä, blue)

Jokainen parametri (red, vihreä, blueMääritellään väriintensiteetti, joka voi olla kokonaisluku 0-255 väliltä tai prosenttiosuus (0%:sta 100%:iin).

Esimerkiksi, arvo rgb(0,0,255) näyttää siniseltä, koska blue-arameter on asetettu korkeimmalle arvolle (255), ja muut parametrit asetettu 0:een.

Lisäksi seuraavat arvot määrittävät saman värin: rgb(0,0,255) ja rgb(0%,0%,100%)。

实例

Määritä erilaisia RGB-värejä:

#p1 {background-color: rgb(255, 0, 0);}   /* Punainen */
#p2 {background-color: rgb(0, 255, 0);}   /* Vihreä */
#p3 {background-color: rgb(0, 0, 255);}   /* Sininen */

Kokeile itse

RGBA-värit

RGBA-värit ovat RGB-värien laajennus, joissa on Alpha-kanava - määrittää objektin läpinäkyvyyden.

RGBA-värit määrittävät rgba() -funktioMääritä, syntaksi on seuraava:

rgba(red, vihreä, blue, alpha)

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

实例

Määritä erilaisia RGB-värejä, joilla on läpinäkyvyys:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* Epäsuorat punaiset */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* Epäsuorat vihreät */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* Epäsuorat siniset */

Kokeile itse

HSL-värit

HSL tarkoittaa sävyä (hue), saturaatiota (saturation) ja kirkkautta (lightness) - värien sylinterikoordinaatit.

Käytä hsl() -funktioMääritä HSL-väriarvo, funktion syntaksi on seuraava:

hsl(hue, saturation, lightness)

Kuvatapa on asteikko väripyörällä (0-360 astetta) - 0 (tai 360) on punainen, 120 on vihreä, 240 on sininen.

Saturaatio on prosenttiosuus; 0% tarkoittaa harmaata varjostusta, ja 100% on täysiverinen väri.

Kirkkaus on prosenttiosuus; 0% on musta, 100% on valkoinen.

实例

Määritä erilaisia HSL-väriä:

#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%);}    /* 柔和的绿色 */

Kokeile itse

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);}    /* 带不透明度的柔绿色 */

Kokeile itse

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

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

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

实例

定义不同的颜色名：

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

Kokeile itse

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

currentcolor 关键字

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

实例

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

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

Kokeile itse