Colors

SASS-like colormapping with PostCSS

Easily generate accessible color maps for any color, instantly. By using the primary color swatches from Open Color and 3 color-adjuster's from the postcss-color-function plugin.

Example

/* Violet */
--violet: #7048E8;
--violet-lighter: color(var(--violet) lightness(+20%) tint(15%));
--violet-light: color(var(--violet) lightness(+10%) tint(15%));
--violet-medium: color(var(--violet) lightness(-10%) shade(15%));
--violet-dark: color(var(--violet) lightness(-20%) shade(15%));

#DE4E47
--red

#A04BC2
--pink

#A04BC2
--purple

#6850E0
--violet

#DE4E47
--red-lighter

#A04BC2
--pink-lighter

#A04BC2
--purple-lighter

#6850E0
--violet-lighter

#DE4E47
--red-light

#A04BC2
--pink-light

#A04BC2
--purple-light

#6850E0
--violet-light

#DE4E47
--red

#A04BC2
--pink

#A04BC2
--purple

#6850E0
--violet

#DE4E47
--red-medium

#A04BC2
--pink-medium

#A04BC2
--purple-medium

#6850E0
--violet-medium

#DE4E47
--red-dark

#A04BC2
--pink-dark

#A04BC2
--purple-dark

#6850E0
--violet-dark

#DE4E47
--red-darker

#A04BC2
--pink-darker

#A04BC2
--purple-darker

#6850E0
--violet-darker

#6C6D73
--grey

#DE4E47
--red

#DE4E47
--pink

#A04BC2
--purple

#6850E0
--violet

#4667E3
--indigo

#387CCF
--blue

#4496AA
--cyan

#DE4E47
- teal

#86CF88
--green

#84B53C
--lime

#E5A555
--yellow

#E76F2F
--orange