Style ~ Palette
image
Create a color regime

No matter how you pick your color scheme, you want to manage it and not end up with endless variations and fragmentation. Silva's palette system is a dictionary of color. You define the base color values, the amount of tone and alpha variations, and the module generates all color variations, making them available as a CSS class and by a lookup @function. In addition, in the same way you can manage textures and gradients.

Intro

The Palette module generates colors with tone and alpha variations derived from a set of configurable primary colors. The generated color and color variation classes can be applied to any element to set a background color.

Class syntax: f_color--{colorname}-{tone:normal|dark|light}-{alpha:low|medium|high}

Besides using these colors directly in markup, it is also possible to use them from within SCSS, using the @color(colorname) function.

grapefruit
light
 
normal
 
dark
 
bittersweet
light
 
normal
 
dark
 
sunflower
light
 
normal
 
dark
 
sunset
light
 
normal
 
dark
 
saddle
light
 
normal
 
dark
 
jungle
light
 
normal
 
dark
 
grass
light
 
normal
 
dark
 
aqua
light
 
normal
 
dark
 
lavender
light
 
normal
 
dark
 
clear
light
 
normal
 
dark
 
cloudy
light
 
normal
 
dark
 
cave
light
 
normal
 
dark
 
Textures

Texture utility classes are generated from a texture definition that is part of the global palette. Textures can be used in combination with colors.

Class syntax: f_texture--{texturename}

dragon
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
feather
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
leather
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
linen
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
lizard
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
noise
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
scratch
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
stitch
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
tile
grapefruit
 
bittersweet
 
sunflower
 
sunset
 
saddle
 
jungle
 
grass
 
aqua
 
lavender
 
clear
 
cloudy
 
cave
 
Gradients

Gradient utility classes are generated from a gradient definition that is part of the global palette.

Class syntax: f_gradient--{gradientname}