Skip to main content

Sass: Color Functions

Color Components

Traditional color theory breaks any color down into three components: hue, saturation, and value:

  • Hue is the color
  • Saturation is a measure of how "much" of the hue exists in the color-it's intensity
  • Value is a measure of the lightness or darkness of a color.

Color Models

Digitally, colors are represented as either RGB or HSL. (There are other models, including CMYK and LAB, but only RGB and HSL are relevant to Sass development.)

RGB

RGB values are a measure of the amount of red green and blue in the color. Each component is a value between 0 (none of that color) and 255 (all of that color).

note

RGB colors are conventionally expressed in hexadecimal.

For example: #2abd35.

HSL

HSL stands for "Hue, Saturation and Lightness". It is usally expressed as a function:

hsl($hue, $saturation, $value)

Hue is expressed as a degree on the color wheel (pure red is at 0, pure green at 120, and pure blue at 240), while saturation and value are expressed as percentages.

Opacity

An additional aspect of digital color that doesn't exist in traditional color theory is the opacity.

In both the RGB and HSL color models, opacity is expressed via an alpha value between 0 and 100%, with 0 being completely transparent and 100% being completely opaque.

Sass Color Functions

Sass Color Creation Functions

FunctionDescriptionExampleResult
rgb($red, $green, $blue)Creates an opaque color based on the specified decimal values or percentagesrgb(173, 64, 56)#ad4038
rgb(50%, 50%, 100%)#8080ff
rgba($red, $green, $blue, $alpha)Creates a color based on the specified decimal or percentage values at the specified opacity.rgba(172, 65, 56, 0.5 )rgba(172, 65, 56, 0.5 )
hsl($hue, $saturation, $lightness)Creates an opaque color based on the specified hue (in degrees), saturation and lightness (in percentages)hsl(4, 51, 45)#ad4038
hsla($hue, $saturation, $lightness, $alpha)Creates a color based on the specified hue, saturation and lightness at the specified opacity.hsla(4, 51, 45, 50)hsla(4, 51, 45, 50)
grayscale($color)Returns a gray that has the same intensity as $colorgrayscale(#ad4038)#737373
complement($color)Returns a color that has the same saturation and value, but has a hue 180 degrees different from the hue of $color.complement(#ad4038)#38a5ad
invert($color)Returns the inverse of the individual red, green and blue components of $color.invert(#ad4038)#52bfc7

Sass Component Extraction Functions

FunctionDescriptionExamplesResult
red($color)Returns the red component of $color.red(#ad4038)173
green($color)Returns the green component of $color.green(#ad4038)64
blue($color)Returns the blue component of $color.blue(#ad4038)56
hue(($color)Returns the hue of $colorhue(#ad4038)4.10246deg
saturation($color)Returns the hue of $colorsaturation(#ad4038)51.091%
lightness($color)Returns the hue of $colorlightness(#ad4038)44.90196&
alpha($color) opacity($color)Always returns 1alpha(#ad4038)1

Sass Manipulate Colors Functions

FunctionDescriptionExampleResult
mix($color1, $color2, [$weight])Combines two colors by averaging the red, green and blue components. The optional $weight parameter determines how much of the first color is included (the default is 50%).mix(#ad4038, #0000ff, 80)#8a3360
adjust-hue($color, $degrees)Rotates the hue of $color by the specified degreesadjust-hue(#ad4038, 20)#ad6738
lighten($color, $amount)Lightens the specified color by the percentage specified in $amountlighten(#ad4038, 20)#d37e78
darken($color, $amount)Darkens the specified color by the percentage specified in $amountdarken(#ad4038, 20)#60231f
saturate($color, $amount)Increases the saturation of the specified color by the percentage specified in $amountsaturate(#ad4038, 20)#c42c21
desaturate($color, $amount)Decreases the saturation of the specified color by the percentage specified in $amountdesaturate(#ad4038, 20)#96544f
rgba($color, $alpha)Adjusts the opacity of $color by the percentage specified in $alphargba(#ad4038, 50)rgba(172, 65, 56, 0.5)
opacify($color, $amount) fade-in($color, $amount)Increases the opacity of $color by the percentage specified in $alphaopacify(#ad4038, 50)rgba(172, 65, 56, 1)
transparentize($color, $amount) fade-out($color, $amount)Reduces the opacity of $color by the percentage specified in $alphatransparentize(#ad4038, 50)rgba(172, 65, 56, 0.5)
adjust-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])Changes $color by one or more of the named arguments.adjust-color(#ad4038, $red: 10)#b74038
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])Adjusts $color by the amount specified in one or more named arguments. If the argument is a positive number, the adjustment is towards the maximum value for that component. If it is negative, the adjustment is towards the minimum valuescale-color(#ad4038, $red: 50%)#d64038
scale-color(#ad4038, $red: -50%)#574038
change-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])Replaces the component of $color with the value specified in one or more named parameters.change-color(#ad4038, $red: 255)#ff4038