Colors

Colors

Skeletonic CSS comes with a basic set of custom properties, sometimes referred to as CSS variables or cascading variables.

Color Variables

Skeletonic CSS v.1.0.5 pr ovides a set of color palettes and variables as a way to store information that we want to reuse throughout our stylesheet. These are designed to be harmonious, ensure accessible content, and help create contrast between UI elements.

Color Styles available

The Skeletonic CSS v.1.0.5 color variables palette has a smooth range of shadows ranging from brightest to darkest

You will need to import skeletonic-colors.css to display the colors.

Primary palette

Accent palette

Basic colors

$black = #000000;
$white = #ffffff;
$transparent = rgba(0, 0, 0, 0);
$full-black  = rgba(0, 0, 0, 1);
$dark-black  = rgba(0, 0, 0, 0.87);
$lightblack = rgba(0, 0, 0, 0.54);
$min-black   = rgba(0, 0, 0, 0.26);
$faint-black = rgba(0, 0, 0, 0.12);
$full-white  = rgba(255, 255, 255, 1);
$dark-white  = rgba(255, 255, 255, 0.87);
$lightwhite = rgba(255, 255, 255, 0.54);

Material Design colors

The background colors are based on Google’s Material Design Color palette.

Range of non accent & accent colors

• Red
• Pink
• Purple
• Deep Purple
• Indigo
• Blue

• Light Blue
• Cyan
• Teal
• Green
• Light Green
• Lime

• Yellow
• Amber
• Orange
• Deep Orange
• Brown
• Grey
• Blue Grey

Tachyons Color Palette

You will need to import skeletonic-colors.css to display the colors. The background colors are based on the Tachyons - CSS Color palette.

A Palette of Particles.