Syntax¶

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

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

<#selector>:
  <...>: <Function>(<...>)

<#selector> {
  <...>: <...>;
}

Notes

• All Functions are derived from Stylus
• Stylus built-in functions

Alpha¶

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

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))

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

• alpha(<color>)
• alpha(<color>, <0-1>)

Blend¶

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

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

• blend(<top>)
• blend(<top>, <bottom>)

Blue¶

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

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

• blue(<color>) => <0-255>
• blue(<color>, <value: 0-255>)

Complement¶

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

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

• complement(<color>)

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.

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

• contrast(<top>)
• contrast(<top>, <bottom>)
• Resulting Object properties
  • ratio
  • error
  • min
  • max
• Sorry for the shit example

Darken¶

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

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

• darken(<color>, <amount>)

Desaturate¶

Description: Desaturates the given color by amount.

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

• desaturate(<color>, <amount>)

Grayscale¶

Description: Gives the grayscale equivalent of the given color.

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

• grayscale(<color>)

Green¶

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

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

• green(<color>) => <0-255>
• green(<color>, <value: 0-255>)

Hue¶

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

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

• hue(<color>)
• hue(<color>, <value>)

Invert¶

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

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

• invert(<color>)

Lighten¶

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

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

• lighten(<color>, <amount>)

Lightness¶

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

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

• lightness(<color>) => <0-100%>
• lightness(<color>, <value: 0-100%>)

Luminosity¶

Description: Returns the relative luminance of the given color.

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

• luminosity(<color>)

Mix¶

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

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

• mix(<color1>, <color2>)
• mix(<color1>, <color2>, <amount: 0-100%>)

Red¶

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

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

• red(<color>) => <0-255>
• red(<color>, <value: 0-255>)

Rgb¶

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

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

• rgb(<color> | <r,g,b>)

Rgba¶

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

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

• rgba(<color> | <r,g,b,a>)

Saturate¶

Description: Saturates the given color by amount.

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

• saturate(<color>, <amount: 0-100%>)

Saturation¶

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

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

• saturation(<color>) => <0-100%>
• saturation(<color>, <value: 0-100%>)

Shade¶

Description: Mixes the given color with black.

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

• shade(<color>, <amount: 0-100%>)

Spin¶

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

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

• spin(<color>, <amount: deg>)

Tint¶

Description: Mixes the given color with white.

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

• tint(<color>, <amount: 0-100%>)

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.

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

• transparentify(<top>)
• transparentify(<top>, <bottom>)
• transparentify(<top>, <bottom>, <alpha>)