Using SASS Color Functions
$colors: #ebcf91, #ebb500, #89af9e, #0f0903;
@function textColor() {
@return nth($colors, 1);
}
@function primaryColor() {
@return nth($colors, 2);
}
@function secondaryColor() {
@return nth($colors, 3);
}
@function alternateColor() {
@return complement(secondaryColor());
}
@function backgroundColor() {
@return nth($colors, length($colors));
}
@function linkColors($base: primaryColor()) {
$link: $base;
$hover: lighten($link, 25%);
$visited: desaturate($link, 25%);
@return $link, $hover, $visited;
}
body {
background: backgroundColor();
color: textColor();
font: 50px sans-serif;
}
h1 {
color: secondaryColor();
}
h3 {
color: alternateColor();
}
a {
$colors: linkColors();
color: nth($colors, 1);
&:hover {
color: nth($colors, 2);
}
&:visited {
color: nth($colors, 3);
}
}