Syntax

Description: A color Function is defined as a built-in helper Function relating to color.

ctr('<#selector>', {
<...>: <Function>(<...>)
})
<#selector>:
<...>: <Function>(<...>)
<#selector> {
<...>: <...>;
}

Notes

Alpha

Description: Returns the alpha component of the given color, or more commonly sets the alpha component to the optional second argument.

Edit
ctr('.test', {
width: 200px
// Returning the alpha component
opacity: alpha(rgba(0, 128, 128, 0.75))
})
.test:
width: 200px
# Returning the alpha component
opacity: alpha(rgba(0, 128, 128, 0.75))
.test {
width: 200px;
opacity: 0.75;
}
ctr('.test', {
  width: 200px
  //  Returning the alpha component
  opacity: alpha(rgba(0, 128, 128, 0.75))
})
.test {
  width: 200px;
  opacity: 0.75;
}
.test:
  width: 200px
  #  Returning the alpha component
  opacity: alpha(rgba(0, 128, 128, 0.75))
Edit
ctr('.test', {
width: 200px
// Setting the alpha component
background: alpha(teal, 0.5)
})
.test:
width: 200px
# Setting the alpha component
background: alpha(teal, 0.5)
.test {
width: 200px;
background: rgba(0,128,128,0.5);
}
ctr('.test', {
  width: 200px
  //  Setting the alpha component
  background: alpha(teal, 0.5)
})
.test {
  width: 200px;
  background: rgba(0,128,128,0.5);
}
.test:
  width: 200px
  #  Setting the alpha component
  background: alpha(teal, 0.5)

Notes

Blend

Description: Blends the given top color over the bottom color. The bottom argument is optional and defaults to #fff.

Edit
ctr('.test', {
width: 200px
color: blend(rgba(lime, 0.5), rgba(red, 0.25))
})
.test:
width: 200px
color: blend(rgba(lime, 0.5), rgba(red, 0.25))
.test {
width: 200px;
color: rgba(128,128,0,0.625);
}
ctr('.test', {
  width: 200px
  color: blend(rgba(lime, 0.5), rgba(red, 0.25))
})
.test {
  width: 200px;
  color: rgba(128,128,0,0.625);
}
.test:
  width: 200px
  color: blend(rgba(lime, 0.5), rgba(red, 0.25))

Notes

Blue

Description: Returns the blue component of the given color, or sets the blue component to the optional second argument.

Edit
ctr('.test', {
width: 200px
background: blue(#000, 255)
})
.test:
width: 200px
background: 'blue(#000, 255)'
.test {
width: 200px;
background: #00f;
}
ctr('.test', {
  width: 200px
  background: blue(#000, 255)
})
.test {
  width: 200px;
  background: #00f;
}
.test:
  width: 200px
  background: 'blue(#000, 255)'

Notes

Complement

Description: Gives the complementary color. Equal to spinning hue 180deg.

Edit
ctr('.test', {
width: 200px
color: complement(#fd0cc7)
})
.test:
width: 200px
color: 'complement(#fd0cc7)'
.test {
width: 200px;
color: #0cfd42;
}
ctr('.test', {
  width: 200px
  color: complement(#fd0cc7)
})
.test {
  width: 200px;
  color: #0cfd42;
}
.test:
  width: 200px
  color: 'complement(#fd0cc7)'

Notes

Contrast

Description: Returns the contrast ratio Object between top and bottom colors, based on script underlying the “contrast ratio” tool by Lea Verou. The second argument is optional and defaults to #fff. The main key in the returned Object is ratio, it also has min and max values that are different from the ratio only when the bottom color is transparent. In that case, the error also contains an error margin.

Edit
ctr('.test', {
width: 200px
z-index: contrast(black, red).ratio
})
.test:
width: 200px
z-index: contrast(black, red).ratio
.test {
width: 200px;
z-index: 5.3;
}
ctr('.test', {
  width: 200px
  z-index: contrast(black, red).ratio
})
.test {
  width: 200px;
  z-index: 5.3;
}
.test:
  width: 200px
  z-index: contrast(black, red).ratio

Notes

Darken

Description: Darkens the given color by amount. This function is unit-sensitive, for example, it supports percentages.

Edit
ctr('.test', {
width: 200px
color: darken(#D62828, 30%)
})
.test:
width: 200px
color: 'darken(#D62828, 30%)'
.test {
width: 200px;
color: #961c1c;
}
ctr('.test', {
  width: 200px
  color: darken(#D62828, 30%)
})
.test {
  width: 200px;
  color: #961c1c;
}
.test:
  width: 200px
  color: 'darken(#D62828, 30%)'

Notes

Desaturate

Description: Desaturates the given color by amount.

Edit
ctr('.test', {
width: 200px
color: desaturate(#66cc99, 40%)
})
.test:
width: 200px
color: 'desaturate(#66cc99, 40%)'
.test {
width: 200px;
color: #7ab899;
}
ctr('.test', {
  width: 200px
  color: desaturate(#66cc99, 40%)
})
.test {
  width: 200px;
  color: #7ab899;
}
.test:
  width: 200px
  color: 'desaturate(#66cc99, 40%)'

Notes

Grayscale

Description: Gives the grayscale equivalent of the given color.

Edit
ctr('.test', {
width: 200px
color: grayscale(#fd0cc7)
})
.test:
width: 200px
color: 'grayscale(#fd0cc7)'
.test {
width: 200px;
color: #858585;
}
ctr('.test', {
  width: 200px
  color: grayscale(#fd0cc7)
})
.test {
  width: 200px;
  color: #858585;
}
.test:
  width: 200px
  color: 'grayscale(#fd0cc7)'

Notes

Green

Description: Returns the green component of the given color, or sets the green component to the optional second argument.

Edit
ctr('.test', {
width: 200px
background: green(#000, 255)
})
.test:
width: 200px
background: 'green(#000, 255)'
.test {
width: 200px;
background: #0f0;
}
ctr('.test', {
  width: 200px
  background: green(#000, 255)
})
.test {
  width: 200px;
  background: #0f0;
}
.test:
  width: 200px
  background: 'green(#000, 255)'

Notes

Hue

Description: Returns the hue of the given color, or sets the hue component to the optional second argument.

Edit
ctr('.test', {
width: 200px
color: hue(#00c, 90deg)
})
.test:
width: 200px
color: 'hue(#00c, 90deg)'
.test {
width: 200px;
color: #6c0;
}
ctr('.test', {
  width: 200px
  color: hue(#00c, 90deg)
})
.test {
  width: 200px;
  color: #6c0;
}
.test:
  width: 200px
  color: 'hue(#00c, 90deg)'

Notes

Invert

Description: Inverts the color. The red, green, and blue values are inverted while the opacity is left alone.

Edit
ctr('.test', {
width: 200px
color: invert(#d62828)
})
.test:
width: 200px
color: 'invert(#d62828)'
.test {
width: 200px;
color: #29d7d7;
}
ctr('.test', {
  width: 200px
  color: invert(#d62828)
})
.test {
  width: 200px;
  color: #29d7d7;
}
.test:
  width: 200px
  color: 'invert(#d62828)'

Notes

Lighten

Description: Lightens the given color by amount. This function is unit-sensitive, for example, supporting percentages.

Edit
ctr('.test', {
width: 200px
color: lighten(#2c2c2c, 30%)
})
.test:
width: 200px
color: 'lighten(#2c2c2c, 30%)'
.test {
width: 200px;
color: #6b6b6b;
}
ctr('.test', {
  width: 200px
  color: lighten(#2c2c2c, 30%)
})
.test {
  width: 200px;
  color: #6b6b6b;
}
.test:
  width: 200px
  color: 'lighten(#2c2c2c, 30%)'

Notes

Lightness

Description: Returns the lightness of the given color, or sets the lightness component to the optional second argument.

Edit
ctr('.test', {
width: 200px
color: lightness(#00c, 80%)
})
.test:
width: 200px
color: 'lightness(#00c, 80%)'
.test {
width: 200px;
color: #99f;
}
ctr('.test', {
  width: 200px
  color: lightness(#00c, 80%)
})
.test {
  width: 200px;
  color: #99f;
}
.test:
  width: 200px
  color: 'lightness(#00c, 80%)'

Notes

Luminosity

Description: Returns the relative luminance of the given color.

Edit
ctr('.test', {
width: 200px
color: alpha(red, luminosity(red))
})
.test:
width: 200px
color: alpha(red, luminosity(red))
.test {
width: 200px;
color: rgba(255,0,0,0.213);
}
ctr('.test', {
  width: 200px
  color: alpha(red, luminosity(red))
})
.test {
  width: 200px;
  color: rgba(255,0,0,0.213);
}
.test:
  width: 200px
  color: alpha(red, luminosity(red))

Notes

Mix

Description: Mixes two colors by a given amount. The amount is optional and the default value is 50%.

Edit
ctr('.test', {
width: 200px
color: mix(#000, #fff, 30%)
})
.test:
width: 200px
color: 'mix(#000, #fff, 30%)'
.test {
width: 200px;
color: #b2b2b2;
}
ctr('.test', {
  width: 200px
  color: mix(#000, #fff, 30%)
})
.test {
  width: 200px;
  color: #b2b2b2;
}
.test:
  width: 200px
  color: 'mix(#000, #fff, 30%)'

Notes

Red

Description: Returns the red component of the given color, or sets the red component to the optional second argument.

Edit
ctr('.test', {
width: 200px
background: red(#000, 255)
})
.test:
width: 200px
background: 'red(#000, 255)'
.test {
width: 200px;
background: #f00;
}
ctr('.test', {
  width: 200px
  background: red(#000, 255)
})
.test {
  width: 200px;
  background: #f00;
}
.test:
  width: 200px
  background: 'red(#000, 255)'

Notes

Rgb

Description: Returns an RGB value from the color channels or casts to an RGB node.

Edit
ctr('.test', {
width: 200px
background: rgb(255, 204, 0)
})
.test:
width: 200px
background: rgb(255, 204, 0)
.test {
width: 200px;
background: #fc0;
}
ctr('.test', {
  width: 200px
  background: rgb(255, 204, 0)
})
.test {
  width: 200px;
  background: #fc0;
}
.test:
  width: 200px
  background: rgb(255, 204, 0)

Notes

Rgba

Description: Returns an RGBA value from the color channels or casts to an RGBA node.

Edit
ctr('.test', {
width: 200px
color: rgba(#ffcc00, 0.5)
})
.test:
width: 200px
color: 'rgba(#ffcc00, 0.5)'
.test {
width: 200px;
color: rgba(255,204,0,0.5);
}
ctr('.test', {
  width: 200px
  color: rgba(#ffcc00, 0.5)
})
.test {
  width: 200px;
  color: rgba(255,204,0,0.5);
}
.test:
  width: 200px
  color: 'rgba(#ffcc00, 0.5)'

Notes

Saturate

Description: Saturates the given color by amount.

Edit
ctr('.test', {
width: 200px
color: saturate(#c33, 40%)
})
.test:
width: 200px
color: 'saturate(#c33, 40%)'
.test {
width: 200px;
color: #eb1414;
}
ctr('.test', {
  width: 200px
  color: saturate(#c33, 40%)
})
.test {
  width: 200px;
  color: #eb1414;
}
.test:
  width: 200px
  color: 'saturate(#c33, 40%)'

Notes

Saturation

Description: Returns the saturation of the given color, or sets the saturation component to the optional second argument.

Edit
ctr('.test', {
width: 200px
color: saturation(#00c, 50%)
})
.test:
width: 200px
color: 'saturation(#00c, 50%)'
.test {
width: 200px;
color: #339;
}
ctr('.test', {
  width: 200px
  color: saturation(#00c, 50%)
})
.test {
  width: 200px;
  color: #339;
}
.test:
  width: 200px
  color: 'saturation(#00c, 50%)'

Notes

Shade

Description: Mixes the given color with black.

Edit
ctr('.test', {
width: 200px
color: shade(#fd0cc7, 66%)
})
.test:
width: 200px
color: 'shade(#fd0cc7, 66%)'
.test {
width: 200px;
color: #560443;
}
ctr('.test', {
  width: 200px
  color: shade(#fd0cc7, 66%)
})
.test {
  width: 200px;
  color: #560443;
}
.test:
  width: 200px
  color: 'shade(#fd0cc7, 66%)'

Notes

Spin

Description: Spins the hue of the given color by amount.

Edit
ctr('.test', {
width: 200px
color: spin(#ff0000, 90deg)
})
.test:
width: 200px
color: 'spin(#ff0000, 90deg)'
.test {
width: 200px;
color: #80ff00;
}
ctr('.test', {
  width: 200px
  color: spin(#ff0000, 90deg)
})
.test {
  width: 200px;
  color: #80ff00;
}
.test:
  width: 200px
  color: 'spin(#ff0000, 90deg)'

Notes

Tint

Description: Mixes the given color with white.

Edit
ctr('.test', {
width: 200px
color: tint(#fd0cc7, 66%)
})
.test:
width: 200px
color: 'tint(#fd0cc7, 66%)'
.test {
width: 200px;
color: #feaceb;
}
ctr('.test', {
  width: 200px
  color: tint(#fd0cc7, 66%)
})
.test {
  width: 200px;
  color: #feaceb;
}
.test:
  width: 200px
  color: 'tint(#fd0cc7, 66%)'

Notes

Transparentify

Description: Returns the transparent version of the given top color as if it were blended over the given bottom color. The second argument is optional and defaults to #fff. The third argument is optional and overrides the autodetected alpha.

Edit
ctr('.test', {
width: 200px
color: transparentify(#91974C, #F34949, 0.5)
})
.test:
width: 200px
color: 'transparentify(#91974C, #F34949, 0.5)'
.test {
width: 200px;
color: rgba(47,229,79,0.5);
}
ctr('.test', {
  width: 200px
  color: transparentify(#91974C, #F34949, 0.5)
})
.test {
  width: 200px;
  color: rgba(47,229,79,0.5);
}
.test:
  width: 200px
  color: 'transparentify(#91974C, #F34949, 0.5)'

Notes