YouTipSass color functions can be divided into three parts: color setting, color getting, and color operations.
\n\nThe following table lists Sass color functions:
\n\nSass Color Setting
\n\n| Function | \nDescription & Example | \n
|---|---|
| rgb(red, green, blue) | \nCreates a Red-Green-Blue (RGB) color. Where R is "red" for red, G is "green" for green, and B is "blue" for blue. Example: rgb(0, 0, 255); | \n
| rgba(red, green, blue, alpha) | \nCreates a color based on red, green, blue and alpha values. Example: rgba(0, 0, 255, 0.3); | \n
| hsl(hue, saturation, lightness) | \nCreates a color through the values of hue, saturation, and lightness. Example: hsl(120, 100%, 50%); // green hsl(120, 100%, 75%); // light green hsl(120, 100%, 25%); // dark green hsl(120, 60%, 70%); // soft green | \n
| hsla(hue, saturation, lightness, alpha) | \nCreates a color through the values of hue, saturation, lightness, and alpha. Example: hsl(120, 100%, 50%, 0.3); // green with transparency hsl(120, 100%, 75%, 0.3); // light green with transparency | \n
| grayscale(color) | \nConverts a color to grayscale, equivalent to desaturate(color, 100%). Example: grayscale(#7fffd4); Result: #c6c6c6 | \n
| complement(color) | \nReturns a complementary color, equivalent to adjust-hue($color, 180deg). Example: complement(#7fffd4); Result: #ff7faa | \n
| invert(color, weight) | \nReturns an inverted color, with red, green, and blue values reversed, while transparency remains unchanged. Example: invert(white); Result: black | \n
Sass Color Getting
\n\n| Function | \nDescription & Example | \n
|---|---|
| red(color) | \nGets the red value from a color (0-255). Example: red(#7fffd4); Result: 127 red(red); Result: 255 | \n
| green(color) | \nGets the green value from a color (0-255). Example: green(#7fffd4); Result: 255 green(blue); Result: 0 | \n
| blue(color) | \nGets the blue value from a color (0-255). Example: blue(#7fffd4); Result: 212 blue(blue); Result: 255 | \n
| hue(color) | \nReturns the hue angle value of a color in HSL color space (0deg - 255deg). Example: hue(#7fffd4); Result: 160deg | \n
| saturation(color) | \nGets the saturation value of a color (0% - 100%). Example: saturation(#7fffd4); Result: 100% | \n
| lightness(color) | \nGets the lightness value of a color (0% - 100%). Example: lightness(#7fffd4); Result: 74.9% | \n
| alpha(color) | \nReturns the alpha channel of color as a number between 0 and 1. Example: alpha(#7fffd4); Result: 1 | \n
| opacity(color) | \nGets the opacity value of a color (0-1). Example: opacity(rgba(127, 255, 212, 0.5); Result: 0.5 |