Colors

🔗Overview

The colors module is auto-loaded in every compile, no import needed. Named colors normalize to lowercase hex on emission (red -

#ff0000); hex keeps spelling; transparent, currentcolor and CSS-wide keywords (inherit initial unset revert revert-layer) pass through.

Color percentage arguments accept both 10 and 0.1 forms.

🔗lighten

Lightens a color by the given amount. Returns a color.

var d = #336699
.a { color: lighten($d, 10); }  /* -> #407fbf */

🔗darken

Darkens a color by the given amount. Returns a color.

.a { color: darken(red, 10); }

🔗saturate

Increases color saturation by the given amount. Returns a color.

.a { color: saturate(red, 10); }

Note: saturate has two overloads. saturate(color, amount) returns a color; the single-argument saturate(amount) is the CSS filter function returning a filter. Arity decides.

🔗desaturate

Decreases color saturation by the given amount. Returns a color.

.a { color: desaturate(red, 10); }

🔗spin

Rotates the hue of a color by the given degrees. Returns a color.

.a { color: spin(red, 30); }

🔗mix

Blends two colors, with an optional weight for the first color. Returns a color.

.a { color: mix(red, blue); }      /* -> #800080 */
.a { color: mix(red, blue, 25); }

🔗mixCMYK

Blends two colors in CMYK space. Returns a color.

.a { color: mixCMYK(red, blue); }

🔗toHex

Serializes a color to a #rrggbb string. Returns a string.

var s = toHex(red)   /* "#ff0000" */

🔗toHexAlpha

Serializes a color to a #rrggbbaa string, including the alpha channel. Returns a string.

var s = toHexAlpha(rgba(255, 0, 0, 0.5))

🔗toHtmlHex

Serializes a color to an HTML hex string. Returns a string.

var s = toHtmlHex(red)

🔗distance

Computes the distance between two colors. Returns a float.

var d = distance(red, blue)

🔗almostEqual

Compares two colors with a tolerance (default epsilon 0.01). Returns a bool.

var ok = almostEqual(red, red)
var ok2 = almostEqual(red, blue, 200.0)

🔗parseHex / parseHexAlpha / parseHtmlHex

Parse a hex string into a typed color.

var c = parseHex("#0d6efd")
var c2 = parseHexAlpha("#0d6efd80")

🔗parseColor / parseHtmlName / parseHtmlColor

Parse a color name or color string into a typed color.

var c = parseColor("red")
var c2 = parseHtmlName("rebeccapurple")