Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Sass Color Functions


Sass Color Functions

We have divided the color functions in Sass into three parts: Set color functions, Get color functions, and Manipulate color functions:

Sass Set Color Functions

Function Description & Example
rgb(red, green, blue) Sets a color using the Red-Green-Blue (RGB) model. An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%).

Example:
rgb(0, 0, 255); // rendered as blue because the blue parameter is set to its highest value (255) and the others are set to 0
rgba(red, green, blue, alpha) Sets a color using the Red-Green-Blue-Alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example:
rgba(0, 0, 255, 0.3); // rendered as blue with opacity
hsl(hue, saturation, lightness) Sets a color using the Hue-Saturation-Lightness (HSL) model - and represents a cylindrical-coordinate representation of colors. Hue is a degree on the color wheel (from 0 to 360) - 0 or 360 is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

Example:
hsl(120, 100%, 50%); // green
hsl(120, 100%, 75%); // light green
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // pastel green
hsla(hue, saturation, lightness, alpha) Sets a color using the Hue-Saturation-Lightness-Alpha (HSLA) model. HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example:
hsl(120, 100%, 50%, 0.3); // green with opacity
hsl(120, 100%, 75%, 0.3); // light green with opacity
grayscale(color) Sets a gray color with the same lightness as color.

Example:
grayscale(#7fffd4);
Result: #c6c6c6
complement(color) Sets a color that is the complementary color of color.

Example:
complement(#7fffd4);
Result: #ff7faa
invert(color, weight) Sets a color that is the inverse or negative color of color. The weight parameter is optional and must be a number between 0% and 100%. Default is 100%.

Example:
invert(white);
Result: black

Sass Get Color Functions

Function Description & Example
red(color) Returns the red value of color as a number between 0 and 255.

Example:
red(#7fffd4);
Result: 127
red(red);
Result: 255
green(color) Returns the green value of color as a number between 0 and 255.

Example:
green(#7fffd4);
Result: 255
green(blue);
Result: 0
blue(color) Returns the blue value of color as a number between 0 and 255.

Example:
blue(#7fffd4);
Result: 212
blue(blue);
Result: 255
hue(color) Returns the hue of color as a number between 0deg and 255deg.

Example:
hue(#7fffd4);
Result: 160deg
saturation(color) Returns the HSL saturation of color as a number between 0% and 100%.

Example:
saturation(#7fffd4);
Result: 100%
lightness(color) Returns the HSL lightness of color as a number between 0% and 100%.

Example:
lightness(#7fffd4);
Result: 74.9%
alpha(color) Returns the alpha channel of color as a number between 0 and 1.

Example:
alpha(#7fffd4);
Result: 1
opacity(color) Returns the alpha channel of color as a number between 0 and 1.

Example:
opacity(rgba(127, 255, 212, 0.5));
Result: 0.5

Sass Manipulate Color Functions

Function Description & Example
mix(color1, color2, weight) Creates a color that is a mix of color1 and color2. The weight parameter must be between 0% and 100%. A larger weight means that more of color1 should be used. A smaller weight means that more of color2 should be used. Default is 50%.
adjust-hue(color, degrees) Adjusts the color's hue with a degree from -360deg to 360deg.

Example:
adjust-hue(#7fffd4, 80deg);
Result: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) Adjusts one or more parameters by the specified amount. This function adds or subtracts the specified amount to/from the existing color value.

Example:
adjust-color(#7fffd4, blue: 25);
Result:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) Sets one or more parameters of a color to new values.

Example:
change-color(#7fffd4, red: 255);
Result: #ffffd4
scale-color(color, red, green, bluesaturation, lightness, alpha) Scales one or more parameters of color.
rgba(color, alpha) Creates a new color of color with the given alpha channel.

Example:
rgba(#7fffd4, 30%);
Result: rgba(127, 255, 212, 0.3)
lighten(color, amount) Creates a lighter color of color with an amount between 0% and 100%. The amount parameter increases the HSL lightness by that percent.
darken(color, amount) Creates a darker color of color with an amount between 0% and 100%. The amount parameter decreases the HSL lightness by that percent.
saturate(color, amount) Creates a more saturated color of color with an amount between 0% and 100%. The amount parameter increases the HSL saturation by that percent.
desaturate(color, amount) Creates a less saturated color of color with an amount between 0% and 100%. The amount parameter decreases the HSL saturation by that percent.
opacify(color, amount) Creates a more opaque color of color with an amount between 0 and 1. The amount parameter increases the alpha channel by that amount.
fade-in(color, amount) Creates a more opaque color of color with an amount between 0 and 1. The amount parameter increases the alpha channel by that amount.
transparentize(color, amount) Creates a more transparent color of color with an amount between 0 and 1. The amount parameter decreases the alpha channel by that amount.
fade-out(color, amount) Creates a more transparent color of color with an amount between 0 and 1. The amount parameter decreases the alpha channel by that amount.

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.