Sass Color Functions

Sass Color Functions

Aming ibahagi ang mga function ng kulay sa Sass sa tatlong bahagi: function sa pag-set ng kulay, function sa pagkuha ng kulay, at function sa paggamit ng kulay:

Sass na function sa pag-set ng kulay

Sass Operation Color Function Function
rgb(pula, berdeng, asul)

I-set ang kulay gamit ang modelo Red-Green-Blue (RGB).
Tukuyin ang halaga ng kulay RGB sa pamamagitan ng rgb(red, green, blue).
Ang bawat parameter ay nagtutukoy sa lakas ng kulay, maaaring ito ay integer na 0 hanggang 255, o persyento (mula 0% hanggang 100%).

Example:

rgb(0, 0, 255);
// Magiging asul ang kulay, dahil ang parameter na blue ay nait-assign sa pinakamataas na halaga (255), habang ang ibang mga parameter ay nait-assign sa 0
rgba(pula, berdeng, asul, alpha)

I-set ang kulay gamit ang Red-Green-Blue-Alpha (RGBA) model.
Ang RGBA color value ay isang pagpapalawak ng RGB color value, na may alpha channel - na nagtutukoy sa opakidad ng kulay.
alpha Ang mga parameter ay numero na nasa pagitan ng 0.0 (tutong malinaw) at 1.0 (walang malinaw).

Example:

rgba(0, 0, 255, 0.3); // Blue with opacity
hsl(kulay ng ilaw, satsurasyon, brilyansya)

I-set ang kulay gamit ang Hue-Saturation-Lightness model - at kumakatawan sa sirkular na koordinado ng kulay.
Ang Hue (tunog) ay isang degree sa color wheel (mula 0 hanggang 360) - 0 o 360 ay pula, 120 ay berde, 240 ay asul.
Ang Saturation (saturasyon) ay isang porsyento; 0% ay liwanag na abiso, 100% ay buong kulay.
Ang Lightness (liwanag) ay isang porsyento; 0% ay itim, 100% ay puti.

Example:

hsl(120, 100%, 50%); // Green
hsl(120, 100%, 75%); // Light green
hsl(120, 100%, 25%); // Dark green
hsl(120, 60%, 70%); // Light green

hsla(kulay ng ilaw, satsurasyon, brilyansya, alpha)

I-set ang kulay gamit ang Hue-Saturation-Lightness-Alpha (HSLA) model.
Ang HSLA color value ay isang pagpapalawak ng HSL color value, na may alpha channel - na nagtutukoy sa opakidad ng kulay.
alpha Ang mga parameter ay numero na nasa pagitan ng 0.0 (tutong malinaw) at 1.0 (walang malinaw).

Example:

hsl(120, 100%, 50%, 0.3); // Green with opacity
hsl(120, 100%, 75%, 0.3); // Light green with opacity

grayscale(color)

I-set ang kulay ng abiso na may parehong liwanag ng kulay.

Example:

grayscale(#7fffd4);

Resulta: #c6c6c6
complement(color)

I-set ang komplementaryong kulay ng kulay.

Example:

complement(#7fffd4);

Resulta: #ff7faa
invert(color, T gumawa ng pinagsamang kulay ng kulay 1 at kulay 2.)

I-set ang komplementaryong kulay ng kulay.
T gumawa ng pinagsamang kulay ng kulay 1 at kulay 2.Ang mga parameter ay opsyonal, dapat na numero na nasa pagitan ng 0% at 100%. Ang default na halaga ay 100%.

Example:

invert(white);

Resulta: black

Sass color function

Sass Operation Color Function Function
red(color)

Sa ibang kulay ang pulang berde sa paggamit ng numero mula 0 hanggang 255.

Example:

red(#7fffd4);

Resulta: 127

red(red);

asul(asul);
green(color)

Sa ibang kulay ang berde sa paggamit ng numero mula 0 hanggang 255.

Example:

green(#7fffd4);

asul(asul);

green(blue);

berdeng(asul);
result: 0color)

asul(

Example:

Ihatid ang halaga ng kulay ng asul ng kulay sa porma ng numero na 0 hanggang 255.

asul(#7fffd4);

result: 212

asul(asul);
result: 255color)

kulay ng ilaw(

Example:

Ihatid ang kulay ng HSL kulay ng ilaw ng kulay sa porma ng numero na 0deg hanggang 360deg.

kulay ng ilaw(#7fffd4);
result: 160degcolor)

satsurasyon(

Example:

Ihatid ang kulay ng HSL satsurasyon ng kulay sa porma ng numero na 0% hanggang 100%.

satsurasyon(#7fffd4);
result: 100%color)

brilyansya(

Example:

Ihatid ang kulay ng HSL brilyansya ng kulay sa porma ng numero na 0% hanggang 100%.

brilyansya(#7fffd4);
Result: 74.9%color)

opacity(

Example:

alpha(

alpha(#7fffd4);
Result: 1color)

opacity(

Example:

Ihatid ang kulay ng alpha channel ng kulay na 0 hanggang 1 sa porma ng numero.

opacity(rgba(127, 255, 212, 0.5));

Result: 0.5

Sass Operation Color Function Function
paglalarawan at halimbawamas malaki na bigay na balanse ay nangangahulugang dapat gamitin ang mas maraming, color2, T gumawa ng pinagsamang kulay ng kulay 1 at kulay 2.)

mix(
T gumawa ng pinagsamang kulay ng kulay 1 at kulay 2. bigay na balanse
ang parametro ay dapat nasa 0% hanggang 100%. Ang default ay 50%. mas malaki na bigay na balanse ay nangangahulugang dapat gamitin ang mas maraming.
Ang mas maliit na bigay na balanse ay nangangahulugang dapat gamitin ang mas maraming color2.

adjust-hue(color, degrees)

Ayusin ang kulay ng hue ng 360 degrees mula sa -360 degrees hanggang 360 degrees.

Example:

adjust-hue(#7fffd4, 80deg);

Result: #8080ff
adjust-color(color, pula, berdeng, asul, kulay ng ilaw, satsurasyon, brilyansya, alpha)

Ayusin ang isang o ilang parametro sa tinukoy na dami.
Ang function na ito ay magdagdag o magbawas ng tinukoy na dami sa kasalukuyang halaga ng kulay.

Example:

adjust-color(#7fffd4, blue: 25);

Result:
palitan-kulay(color, pula, berdeng, asul, kulay ng ilaw, satsurasyon, brilyansya, alpha)

Itatago ang isang o ilang parametro ng kulay sa bagong halaga.

Example:

palitan-kulay(#7fffd4, red: 255);

Result: #ffffd4
scale-color(color, pula, berdeng, asul, satsurasyon, brilyansya, alpha) Iyong palakihin ang isang o ilang parametro ng kulay.
rgba(kulay, alpha)

T gumawa ng bagong kulay gamit ang ibinigay na alpha channel.

Example:

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
lighten(color, amount) Gumawa ng mas mapilas na kulay gamit ang dami na nasa pagitan ng 0% at 100%.
amount Ang mga parameter ay inaangat sa pamamagitan ng porsyento sa HSL brightness.
darken(color, amount) Gumawa ng mas malalim na kulay gamit ang dami na nasa pagitan ng 0% hanggang 100%.
amount Ang mga parameter ay inabot sa pamamagitan ng porsyento sa HSL brightness.
saturate(color, amount) Gumawa ng mas mataas na saturation na kulay gamit ang dami na nasa pagitan ng 0% at 100%.
amount Ang mga parameter ay inaangat sa pamamagitan ng porsyento sa HSL saturation.
desaturate(color, amount) Gumawa ng mas mababang saturation na kulay gamit ang dami na nasa pagitan ng 0% at 100%.
amount Ang mga parameter ay inabot sa pamamagitan ng porsyento sa HSL saturation.
opacify(color, amount) Gumawa ng mas matamis na kulay gamit ang dami na nasa pagitan ng 0 at 1.
amount Ang mga parameter ay inaangat sa pamamagitan ng kanilang halaga sa Alpha channel.
fade-in(color, amount) Gumawa ng mas matamis na kulay gamit ang dami na nasa pagitan ng 0 at 1.
amount Ang mga parameter ay inabot sa pamamagitan ng kanilang halaga sa Alpha channel.
transparentize(color, amount) Gumawa ng mas malikhaing kulay gamit ang dami na nasa pagitan ng 0 at 1.
amount Ang mga parameter ay inabot sa pamamagitan ng kanilang halaga sa Alpha channel.
fade-out(color, amount) Gumawa ng mas malikhaing kulay gamit ang dami na nasa pagitan ng 0 at 1.
amount Ang mga parameter ay inaangat sa pamamagitan ng kanilang halaga sa Alpha channel.