Fungo color-mix() ya CSS

kumekadiri na matumizi

CSS color-mix() Fungo huzui inayotumia kipakia mifano kumiwa na upeo wa rangi kwa urahisi kwenye upeo wa rangi uliochaguliwa.

mifano

matokeo 1

Inafikiria rangi mbili zaidi kwa ukweli wa rangi wa hsl kwa ukweli wa kipendena:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

Tafakari tena

Mfano 2

Inafikiria rangi mbili zaidi kwa ukweli wa rangi wa oklab kwa ukweli wa kipendena:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

Tafakari tena

Mambo ya CSS

color-mix(color-interpolation-method, color1 %, color2 %)
Maadili Muhtasari
color-interpolation-method

Inahitajika. Kufafanua mtumizi wa mtindo wa kufikiria ya rangi.

Inayotengenezwa na herufi inayoitwa ina inayofuata na jina la kichwa cha rangi.

Inaweza kutumiwa kwenye aina mbili:

Kichwa cha rangi cha uvume:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

Kichwa cha ukweli wa rangi:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Inahitajika. Kivinje cha rangi kinachohaririwa, na namba ya faida ya kizozui (0% hadi 100%), kumieleza kipendena cha rangi.

Wakati wa kufikiria, namba ya nafasi ya namba za faida ina uwezo wa 50%.
color2 %

Inahitajika. Kivinje cha rangi kinachohaririwa, na namba ya faida ya kizozui (0% hadi 100%), kumieleza kipendena cha rangi.

Wakati wa kufikiria, namba ya nafasi ya namba za faida ina uwezo wa 50%.

Vivyo ya Vifaa

Mwaka: CSS Color Module Level 5

Matumizi ya kibao

Jifunze namba zaidi ya kwanza zilizosimamia kufanya kazi kwa programu ya kibao hii.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Mawebu ya muhimu

Tazama:CSS 颜色