Accessing Colors

@function color()

The primary function for accessing colors in your palette, or making adjustments on the fly.

This is more than a wrapper for map-get($colors, $x). It also handles internal color-references, recursion, and functional color-adjustments. It has access to the global $colors map by default, but you can also pass in arbitrary color-palette maps as well.

Parameters & Return

$color: (string | list)

The name of a color in your palette, or a color description in the map configuration format.

$palette: $colors (map)

Optional map containing the source color-palette. Defaults to the global $colors map.

@return (color)

A calculated css-ready color, based on your global color palette and adjustments.

Example

scss
$colors: (
  'background': #eee,
  'text': #222,
);

html {
  background: color('background');
  color: color('text');
}
css compiled
html {
  background: #eee;
  color: #222;
}

Requires

@function _ac-color-get-function() [private]

Used By

@function contrast()

@mixin contrasted()

@function luminance()

@function tint()

@function shade()