Colors

Webpixels CSS includes an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

• Overview

• Color palette

  • Available colors

  • Changing default values

• Theme colors

  • Available theme colors

  • Changing theme colors

• Gray colors

  • Available gray colors

  • How to use gray colors

  • Changing gray colors

• Using colors

¶Overview

The source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.

• $colors lists all our available colors
• $theme-colors lists all semantically named theme colors (shown below)
• $grays lists all tints and shades of gray

¶Color palette

All the colors are available as Sass variables and a Sass map in the variables file. We use them to create a subset of these colors for a theme palette for easier usage. It allows you to remain consistent.

¶Available colors

We manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., $indigo-500) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s mix() color function.

¶Changing default values

When you do need to customize your palette, you can configure your base colors which will automatically create a complete suite of colors. Be sure to monitor contrast ratios as you customize colors.

All variables in the $colors map are defined as standalone variables. To modify an existing color in our $colors map, add the following to your custom Sass file:

$blue:    #3b6eff;
$indigo:  #6366F1;
$purple:  #5F1F7A;
$pink:    #FF92AE;
$red:     #F16063;
$orange:  #F7936F;
$yellow:  #fdb813;
$green:   #66CB9F;
$teal:    #4DD9CB;
$cyan:    #68DBF2;

¶Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables. This enables more comprehensive customization and extension for any project.

¶Available theme colors

¶Changing theme colors

Since now we have a pre-defined color palette it is easy to change the default theme colors just by swaping the default value. You can use the variable below for customization.

$primary:       $indigo;
$secondary:     $gray-300;
$tertiary:      $pink;
$neutral:       $white;
$success:       $green;
$info:          $cyan;
$warning:       $orange;
$danger:        $red;
$light:         $gray-200;
$dark:          $gray-900;

¶Gray colors

¶Available gray colors

Each gray color has a specific use in our themes. Some of them are used for backgrounds, some of them are used for component properties or text colors.

¶How to use gray colors

Each gray shade was specially created to be used in certain situations. The table below will give you an idea of how we use them:

¶Changing gray colors

Inside the variables file you will find the pre-defined gray colors and Sass map. Here’s an example of the variables used:

$gray-50:  #FAFAFA;
$gray-100: #F7FAFC;
$gray-200: #EDF2F7;
$gray-300: #E2E8F0;
$gray-400: #CBD5E0;
$gray-500: #A0AEC0;
$gray-600: #718096;
$gray-700: #425466;
$gray-800: #2D3748;
$gray-900: #1A202C;

¶Using colors

There's wide range of shorthand responsive color, background, and border utility classes to modify an element’s appearance.